Workflow Graph
betaA pipeline or agent workflow drawn as a graph — steps laid out in layers by what they depend on, joined by lines, each showing its status.
- AI
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add workflow-graphnpm packages installed: class-variance-authority.
import { WorkflowGraph } from "@/components/ui/workflow-graph";Default
Vertical
Live
Selectable
<WorkflowGraph>
| Prop | Type | Default |
|---|---|---|
edges (required) | readonly WorkflowEdge[] | — |
label (required)Names the graph, shown as its caption unless | string | — |
nodes (required) | readonly WorkflowNode[] | — |
direction | "horizontal" | "vertical" | "horizontal" |
hideLabel | boolean | false |
layerGapSpace between layers. | number | 56 |
nodeGapSpace between steps in a layer. | number | 20 |
nodeHeight | number | 64 |
nodeWidth | number | 184 |
onSelectMake steps buttons; called with the chosen step's id. | (id: string) => void | — |
selectedThe step currently selected, marked aria-pressed. | string | — |
statusLabelsWords for each status, for other languages. | Partial<Record<WorkflowStatus, string>> | — |
Plus every attribute of <figure> except onSelect.
Steps are an ordered list in dependency order, each stating its status in text and, for screen readers, which steps it follows — so the graph reads fully without the lines, which are an aria-hidden SVG. Status is never colour alone. With `onSelect`, steps are toggle buttons (aria-pressed). A wide graph scrolls inside a named, focusable region so it can be scrolled from the keyboard. The flowing line into a running step holds still under reduced motion.
9/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — fails
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes