SIG—05 Signature system
FlowGraph
A node-and-wire editor: drag, wire with magnetic ports or the keyboard, refuse bad connections, watch runs flow and tidy into layers.
Live — this one is real
Drag nodes; drag from an output diamond to an input to wire (or press Enter on an output, then on an input). Delete removes the selection. Loops are refused.
Arrow keys move the view, plus and minus zoom, 0 fits everything, 1 returns to 100%. Tab moves between items and the view follows.
Usage
import { FlowGraph } from "mizu-ui";
export function Example() {
return (
<FlowGraph
label="Support intake"
defaultNodes={[
{
id: "a",
x: 0,
y: 0,
kind: "Trigger",
label: "Form submitted",
inputs: [],
},
{ id: "b", x: 320, y: 0, kind: "Action", label: "Create ticket" },
{
id: "c",
x: 640,
y: 0,
kind: "Email",
label: "Confirm receipt",
outputs: [],
},
]}
defaultEdges={[{ id: "ab", source: "a", target: "b" }]}
/>
);
}
This code, running — no configuration beyond the data
Arrow keys move the view, plus and minus zoom, 0 fits everything, 1 returns to 100%. Tab moves between items and the view follows.
Keyboard
- Enter
- On an output: start a connection
- Tab·Enter
- Reach an input · connect
- Esc
- Cancel a connection
- Delete
- Remove the selected node or connection
- ←→↑↓
- Nudge the focused node
Source & setup
Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.
npx shadcn@latest add 0xuser64bit/mizu/flow-graphEvery component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:
import { FlowGraph } from "@/components/ui/mizu/flow-graph";For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.
Inspect signature/FlowGraph.tsx
Source is included in the npm package under src/signature/FlowGraph.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Accessible name of the canvas. |
| nodes / defaultNodes / onNodesChange | FlowNode[] | — | id, x, y, label, kind, description, inputs, outputs and status. |
| edges / defaultEdges / onEdgesChange | FlowEdge[] | — | source, target, optional ports and label. |
| readOnly | boolean | false | Watch only: no dragging, wiring, tidying or deleting. |
| selected / defaultSelected / onSelectedChange | string | null | — | Selected node or connection id. |
| validateConnection | (edge) => boolean | string | — | Refuse a wire; a string explains why. |
| renderNode / nodeWidth | (node) => ReactNode / number | — / 232 | Custom node heading and width. |
| tidyFlow(nodes, edges) | function | — | The layered layout behind Tidy, for positioning stored graphs. |
Accessibility
Nodes are named groups whose description lists what they receive from and send to. Output ports start a connection with Enter; input ports then become tabbable targets and Enter connects. Connections are focusable buttons. Refusals are alerts; connections and removals are announced.
Motion
Selection brackets snap in around a node, running nodes scan, and their outgoing wires carry flowing dashes. Wiring snaps magnetically to the nearest input. Tidy animates every node and wire together into layers, then frames the result.