@sanity/workflow-diagram

React component rendering a @sanity/workflow-engine definition as a stage diagram: stages laid out left-to-right by ELK's layered algorithm, rendered with @xyflow/react.

• Every stage is the same label-sized rounded pill, and position says what's first and last. The current stage is the only coloured element — accent border and accent label; a completed stage carries a check; a stage the run went past and can no longer reach fades, lifting again on hover.
• Transitions are orthogonal rounded polylines, drawn solid where the run walked them and dashed where it didn't. Hovering anywhere along a line opens a tooltip with the transition's title and description (plus machine name and GROQ filter when devMode is on — never for end users). Only a gated transition carries a visible on-line marker (a lock disc). No inline edge labels — the layout stays compressed.
• Pass explain to phrase the workflow in human language: transition tooltips gain the filter's requirements as a checklist ("Transitions when: • «Cancellation requested» must be true"), stage tooltips list the stage's activity and editability gates. Derived from the definition alone — no instance needed.
• Pass currentStage / history to tone the instance's position and the visited path.

import {WorkflowDiagram} from '@sanity/workflow-diagram'
;<WorkflowDiagram
  definition={definition}
  currentStage={instance?.currentStage}
  history={instance?.history}
/>
Copy

The component follows the ambient Sanity UI theme (render inside a @sanity/ui ThemeProvider); retheme by overriding the --ws-* CSS variables on a wrapping element — WS_CARD_TOKENS, the exported base token map (--ws-* → Sanity UI card vars), is the reference for what exists. Node labels render in the theme's own type family at medium weight, read from the theme at render rather than mapped through card variables (Sanity UI publishes none for either), so they match the Text around them. Key the component by instance id — layout fits the viewport once per mount and preserves the user's zoom/pan afterwards.

The package entry imports @xyflow/react's stylesheet as a side effect, so it expects a CSS-capable bundler (Vite, Next.js, Studio, the App SDK all qualify); importing it from plain Node without a CSS loader will fail on that import.

flattenTransitions is also exported: the definition's nested per-stage transitions as the flat from-keyed list the diagram renders — useful when building transition UI beside the diagram.