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
| 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. |