# DataflowFigure
A pipeline: where data comes from, what happens to it, and who ends up with it.
- Group: Diagrams
- Import: `import { DataflowFigure } from '@misoto22/folio/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.
## Anatomy
- **Figure shell** (required) — The frame around the picture. What a pipeline hands it is a flow list with the classification folded in — "clickstream — PII touch" — so the fact the diagram was opened for reaches a reader who never sees the chip.
- **Stage heading** (required) — One mono caption per stage on a rule across the top. It is the axis: a node’s stage is how far along the pipeline it sits, so "has this been aggregated yet" is answered by looking up rather than by tracing arrows.
- **Node plate** (required) — One box per node, placed by stage across and row down. The row pitch leaves a clear band between two boxes in the same column, which is where a line and its wording go.
- **Flow** — A routed line with a single arrowhead, at its to end. It is the direction claim the whole figure is read for.
- **Classification chip** — classification, printed in mono under the wording rather than inside it. "clickstream" and "clickstream / PII touch" are two different facts, and only one of them is what a governance review came for.
## Best practices
### Do
- Put the governance fact in classification rather than in the label. It prints as its own chip on the line and is appended to the flow’s summary line, so it survives both a reader who is scanning the picture and one who only has the text.
- Keep stage inside the stages you declared. A node’s x is computed from its own stage index rather than looked up, so a node at stage 5 beside four stages is drawn a full column past the last heading, under no heading at all — development prints DIAGRAM_STAGE_OUT_OF_RANGE, and the summary files it under a band called outside the declared stages rather than beside the nodes the axis does label.
- Write a two-way exchange as two flows. Every line carries a head at its to end only, so one flow between a service and its cache says data moves one way, whatever the label claims about the round trip.
### Don’t
- via, channelX and channelY are never honoured here — a data-flow node is always placed by stage and row, so an author’s waypoints refer to a grid this renderer did not build. They are dropped and every line is routed from scratch: the specification still typechecks and the picture is not the one it drew.
- Watch the fan-in. Lines sharing a face are spread evenly across it, and an arrowhead is 11 user units wide against a plate about 55 units tall — so four lines into one face is where the heads meet, and the fifth and sixth arrive as one thick mark. A pipeline at that density wants splitting, not more edges.
## 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/folio/diagrams'
```
## Example — one source three consumers
```tsx
import { DataflowFigure } from '@misoto22/folio/diagrams'
```
## Example — a stage the data skips
```tsx
import { DataflowFigure } from '@misoto22/folio/diagrams'
```
## Example — what is in the arrow
```tsx
import { DataflowFigure } from '@misoto22/folio/diagrams'
```