Diagrams
DataflowFigure
A pipeline: where data comes from, what happens to it, and who ends up with it.
Ships from@misoto22/design/diagrams
When to reach for it
Examples
default
Event pipeline
4 elements and 3 relationships. What is in the arrow matters more than the arrow.
- Web SDK (frontend) — browser
- Mobile (frontend) — iOS / Android
- Consent gate (security) — policy filter
- Warehouse (database) — analytics tables
- Web SDK → Consent gate: clickstream — user events
- Mobile → Consent gate: app events — device events
- Consent gate → Warehouse: accepted — no PII
Notes
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
| Prop | Type | Default | Description |
|---|---|---|---|
| specrequired | DataflowSpec | — |
Also accepts everything in FigureChrome. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- A flow’s classification is folded into its summary line, so "clickstream — PII touch" reaches a reader who cannot see the chip.