ns-ui
A box-drawing flowchart whose connectors are a real orthogonal router: dragging a node re-routes every edge touching it live, cell by cell, recomputing junction glyphs (┼ ├ ┤ ┬ ┴) from scratch as paths cross. Clicking a node selects it and reports its live connection count; arrow keys move the focused node without a pointer.
Use when a small process/data-flow graph where the reader benefits from actually moving nodes around and seeing the routing react — pick tree-box-drawing instead for a strict hierarchy whose connectors only change on expand/collapse, or network-packet-trace for a FIXED topology whose interest is traffic pulses rather than user-editable layout.
Install
npx shadcn add https://design.helpmarq.comns-ui / diagram-ascii-flow
Drag a node (or focus it and use arrow keys) — every connector re-routes live. Click a node to inspect its connections.
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes? | FlowNode[] | — | — |
| edges? | FlowEdge[] | — | — |
| className? | string | — | — |