Hex UIv1

Flowchart

Typed React flowchart. Pass nodes (with optional shape) and directional edges; the component runs a topological-rank auto-layout and renders top-to-bottom or left-to-right. Pure SVG; no heavy peer dep.

Installation

pnpm
pnpm dlx @hex-core/cli add flowchart

Usage

tsx
import { Flowchart } from "@/components/ui/flowchart"

Authorization decision flow

Diamond decision node + two outcomes.

tsx
<Flowchart
  nodes={[
    { id: "start", label: "Start", shape: "round" },
    { id: "check", label: "Authorized?", shape: "diamond" },
    { id: "ok", label: "Continue" },
    { id: "denied", label: "Reject", shape: "round" },
  ]}
  edges={[
    { source: "start", target: "check" },
    { source: "check", target: "ok", label: "yes" },
    { source: "check", target: "denied", label: "no" },
  ]}
/>

Horizontal pipeline with click handler

Left-to-right ETL stages.

tsx
<Flowchart
  direction="horizontal"
  nodes={stages}
  edges={transitions}
  onNodeClick={(n) => router.push(`/stages/${n.id}`)}
/>

API Reference

PropTypeDefaultDescription
nodesrequired
object—Array of { id, label, shape?, rank? }. shape ∈ "rect" (default) | "round" | "diamond".
edgesrequired
object—Array of { source, target, label? }. The graph MUST be a DAG (no cycles).
direction
"vertical" | "horizontal"verticalLayout direction — vertical (top-to-bottom) or horizontal (left-to-right).
width
number720SVG pixel width.
height
number480SVG pixel height.
nodeWidth
number140Pixel width of each node.
nodeHeight
number48Pixel height of each node.
onNodeClick
function—Called with the clicked FlowchartNode.
className
string—Additional CSS classes on the SVG element.

AI Guidance

When to use

Render structured process / decision / pipeline diagrams from typed application data — onboarding flows, decision trees, ETL pipelines, agent step-graphs. Use when consumers want an SVG without the bundle cost of `<Diagram>` (Mermaid) or the free-form interaction of `<Canvas>` (ReactFlow).

When not to use

Don't use for cyclic graphs (use Canvas — Flowchart's topological layout assumes a DAG). Don't use when consumers want to drag nodes around (use Canvas). Don't use when the diagram source is a Mermaid string from an LLM (use Diagram).

Common mistakes

  • Cycles in the edge graph — `computeRanks` short-circuits cycles to rank 0, which produces a degenerate layout. Validate the DAG upstream
  • An edge whose source or target id is missing from `nodes` — the edge is silently skipped. Validate ids upstream
  • Too many nodes at the same rank — the cross-axis spacing collapses. Either provide explicit `rank` overrides to balance the layout, or grow the SVG width
  • Mutating nodes/edges in place between renders — the layout pass treats inputs as immutable and re-runs on identity change

Accessibility

The SVG carries role="img" with a <title> and <desc> summarizing node and edge counts. For agent outputs, also expose a parallel ordered list (or tree) of nodes-by-rank so screen-reader users get the flow without relying on visual position.

Token budget: 380

Verified against @hex-core/components@1.12.0

Edit this page on GitHub