# FlowGraph

A node-and-wire editor: drag, wire with magnetic ports or the keyboard, refuse bad connections, watch runs flow and tidy into layers.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/flow-graph
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/FlowGraph.tsx

## Usage

```tsx
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" }]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/flow-graph
```

## Props

- `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` (default `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` (default `— / 232`). Custom node heading and width.
- `tidyFlow(nodes, edges)`: `function`. The layered layout behind Tidy, for positioning stored graphs.

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

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