KQ-054 · FLOW/DIAGRAM
Flow Diagram
A Sankey flow — nodes in columns, links sized to their value with a marching-dash current, and a hover that traces a node's whole upstream and downstream path.
KQ-054 · FLOW/DIAGRAM
Flow diagram, 12 flows. Auth to Primary DB: 40; Edge API to Auth: 40; Web to Edge API: 60; Edge API to Catalog: 35; Web to Cache: 30; Edge API to Orders: 25; Catalog to Replica: 60; Catalog to Object Store: 25; Mobile to Edge API: 40; Mobile to Cache: 20; Cache to Catalog: 50; Orders to Primary DB: 25.
Hover a node to trace its path.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/flow-diagram
Props
- nodes
- { id: string; label: string; column: number }[]
- default —
- Graph nodes with their column placement.
- links
- { source: string; target: string; value: number }[]
- default —
- Flows; value drives link thickness.
- height
- number
- default 300
- Stage height in px.
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | { id: string; label: string; column: number }[] | — | Graph nodes with their column placement. |
| links | { source: string; target: string; value: number }[] | — | Flows; value drives link thickness. |
| height | number | 300 | Stage height in px. |