# DataflowFigure

A pipeline: where data comes from, what happens to it, and who ends up with it.

- Group: Diagrams
- Import: `import { DataflowFigure } from '@misoto22/design/diagrams'`
- Page: https://ui.misoto22.com/components/dataflow-figure/
- Related: architecture-figure, lifecycle-figure

## When to reach for it

Structurally close to an architecture map, read for a different question. classification gets its own chip because a governance reviewer is looking for exactly that.

## Accessibility

- A flow’s classification is folded into its summary line, so "clickstream — PII touch" reaches a reader who cannot see the chip.

## DataflowFigure

A pipeline: where data comes from, what happens to it, and who ends up with it. Structurally close to an architecture map and read for a completely different question, which is why it is a separate renderer rather than a preset. An architecture diagram is read for "what talks to what". A data-flow diagram is read for "what is IN this arrow" — and that question is why `classification` gets its own mono chip under the label rather than being folded into the wording. `clickstream / PII touch` and `clickstream` are two different facts, and a governance reviewer is looking for the second one. Stages are printed as column headings on a rule across the top. They are the axis of the figure: a node's `stage` is its position along the pipeline, and a reader should be able to answer "how far has this got" by looking up rather than by tracing arrows.

### Props

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

Also accepts: `FigureChrome`.

## Example — default

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

<DataflowFigure
  spec={{
    meta: { title: 'Event pipeline', subtitle: 'What is in the arrow matters more than the arrow.' },
    stages: [{ label: 'Sources' }, { label: 'Gate' }, { label: 'Store' }],
    nodes: [
      { id: 'web', type: 'frontend', label: 'Web SDK', sublabel: 'browser', stage: 0, row: 0, tag: 'events' },
      { id: 'app', type: 'frontend', label: 'Mobile', sublabel: 'iOS / Android', stage: 0, row: 1, tag: 'events' },
      { id: 'gate', type: 'security', label: 'Consent gate', sublabel: 'policy filter', stage: 1, row: 0, tag: 'PII guard' },
      { id: 'wh', type: 'database', label: 'Warehouse', sublabel: 'analytics tables', stage: 2, row: 0, tag: 'curated' },
    ],
    flows: [
      { id: 'a', from: 'web', to: 'gate', label: 'clickstream', classification: 'user events', variant: 'emphasis' },
      { id: 'b', from: 'app', to: 'gate', label: 'app events', classification: 'device events' },
      { id: 'c', from: 'gate', to: 'wh', label: 'accepted', classification: 'no PII', variant: 'emphasis' },
    ],
  }}
/>
```