Workflow

A node graph of an agent workflow with live status, rounded SVG edges and keyboard-focusable nodes. No dependencies.

Markdown

On this page

An issue-to-pull-request workflow runs; the active edge flows toward the running node.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/workflow.json

Usage

tsx

import { Workflow } from "@/components/ui/chatcn/workflow"

<Workflow
  nodes={[
    { id: "triage", label: "Triage", detail: "claude-haiku-4-5", status: "done" },
    { id: "fix", label: "Write the fix", status: "in-progress" },
    { id: "pr", label: "Open pull request", status: "pending" },
  ]}
  edges={[
    { from: "triage", to: "fix" },
    { from: "fix", to: "pr" },
  ]}
/>

Without positions, nodes are laid out left to right: each node's column is its longest path from a source, and short columns center against the tallest. Pass x and y on every node to place them yourself.

Examples

Pan, zoom and select

Drag to pan, pinch to zoom, click or use the arrow keys to move between nodes.

Props

Prop	Type	Notes
`nodes`	`WorkflowNode[]`	`{ id, label, detail?, status, meta?, x?, y? }`
`edges`	`WorkflowEdge[]`	`{ from, to, label? }`
`running`	`boolean`	Animates the active edge; defaults to any node in progress
`selectedId`, `onSelect`		Selection; nodes become toggle buttons
`interactive`	`boolean`	Pan, zoom and the zoom controls
`height`	`number`	Viewport height when interactive
`nodeWidth`, `nodeHeight`	`number`	Default 184 by 52
`label`	`string`	Accessible name of the graph

Keyboard

Key	Action
`Tab`	Enter the graph on the running node, then leave it
`ArrowRight`, `ArrowLeft`	Follow an edge forward or back
`ArrowUp`, `ArrowDown`	Move within a column
`Home`, `End`	First or last node
`Enter`, `Space`	Select the node

Accessibility

Nodes are real buttons on one roving tab stop, each named with its label, status and detail.
Keyboard focus pans an interactive graph so the focused node stays in view.
Edges are decorative; the structure is spoken through arrow-key navigation along them.

Motion

The edge into a running node carries a dashed overlay whose dash offset flows toward the target, only while the workflow runs. It uses the Web Animations API and stops the moment the run stops.
Under reduced motion the active edge is a static solid line.