# WorkflowFigure

A process in lanes and phases, with the main path drawn heavier than its branches.

- Group: Diagrams
- Import: `import { WorkflowFigure } from '@misoto22/design/diagrams'`
- Page: https://ui.misoto22.com/components/workflow-figure/
- Related: lifecycle-figure, sequence-figure, steps

## When to reach for it

A runbook, an approval chain, a CI pipeline — anything with an owner per step. mainPath is what turns fourteen boxes into a diagram with a subject.

## Accessibility

- Same contract as every figure: a named picture, with its nodes and relationships published as text beside it.
- The exception lane is the one washed band in the system’s diagrams, and it is still labelled — the wash is not carrying the meaning on its own.

## WorkflowFigure

A process: who does what, in what order, and where it can go wrong. Three structures stacked on one grid, and they are three because they answer three different questions a reader brings to a runbook. **Lanes** are rows and answer WHO. A lane marked `exception` is the one band that gets a wash rather than a rule, and it earns the exception to the frames-are-rules law because nothing routes across it — it IS the ground for the failure path, not a frame drawn over the happy one. **Phases** are columns across every lane and answer WHEN. Printed as captions on one header rule, because a phase is an axis label. **Groups** are frames inside a single lane and answer WHAT BELONGS TOGETHER — a planning loop, an evidence path. THE MAIN PATH IS HEAVIER, and that is the whole hierarchy. `mainPath` lists the node ids a reader should be able to follow without thinking. Every edge between two consecutive ids on it is drawn at the emphasis weight whatever its own variant says, which is the one thing that turns fourteen boxes and nineteen arrows into a diagram with a subject. An `error` role goes the other way — dashed and soft — so the exception path recedes without disappearing.

### Props

- `spec` (required) — `WorkflowSpec`.

Also accepts: `FigureChrome`.

## Example — default

```tsx
import { WorkflowFigure } from '@misoto22/design/diagrams'

<WorkflowFigure
  spec={{
    schema_version: 2,
    meta: { title: 'Release', subtitle: 'Green tests ship; a red deploy rolls back.' },
    lanes: [
      { id: 'ci', label: 'CI' },
      { id: 'recover', label: 'Recovery', variant: 'exception' },
    ],
    phases: [
      { id: 'verify', label: 'Verify', fromCol: 0, toCol: 1 },
      { id: 'ship', label: 'Ship', fromCol: 2, toCol: 2 },
    ],
    nodes: [
      { id: 'lint', lane: 'ci', col: 0, type: 'backend', label: 'Lint', sublabel: 'eslint' },
      { id: 'test', lane: 'ci', col: 1, type: 'backend', label: 'Tests', sublabel: 'vitest' },
      { id: 'deploy', lane: 'ci', col: 2, type: 'cloud', label: 'Deploy', sublabel: 'Cloudflare' },
      { id: 'roll', lane: 'recover', col: 2, type: 'security', label: 'Roll back', sublabel: 'previous build' },
    ],
    mainPath: ['lint', 'test', 'deploy'],
    edges: [
      { id: 'a', from: 'lint', to: 'test' },
      { id: 'b', from: 'test', to: 'deploy', label: 'green' },
      { id: 'c', from: 'deploy', to: 'roll', label: 'health check failed', role: 'error', variant: 'dashed' },
    ],
  }}
/>
```