Flow diagram

Routed node and edge diagram for agent plans, systems, memory flows, and tool pipelines.

Flow diagram is a deterministic SVG map for explainers and product inspectors. It exposes selection and local node movement without owning graph persistence.

DOM render JPEG render

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Rendered matrix.

Every state maps to the same component render route through the `state` query param.

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.

Default

Routed node graph with muted edges.

/render state

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.

Selected

Selected node and edge states.

/render state

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.

Interactive

Controls and draggable nodes enabled.

/render state

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.

Empty

Empty graph state.

/render state

Props

Public contract.

Name	Type	Default	Description
`flow *`	`FlowDiagramFlow`	-	Validated node and edge graph.
`title *`	`string`	-	Diagram title.
`description`	`string`	-	Muted supporting copy.
`selectedNodeId`	`string`	-	Highlights one node.
`selectedEdgeId`	`string`	-	Highlights one routed edge.
`controls`	`boolean`	`false`	Shows zoom controls.
`draggableNodes`	`boolean`	`false`	Allows local node dragging.
`pannable`	`boolean`	`false`	Reserved for product-level pan orchestration.
`zoomable`	`boolean`	`false`	Reserved for product-level zoom orchestration.
`legend`	`readonly DataLegendItem[]`	`[]`	Optional legend indicators.
`width`	`number`	`760`	SVG viewBox width.
`height`	`number`	`320`	SVG viewBox height.
`onNodeSelect`	`(nodeId: string) => void`	-	Node click callback.
`onNodeMove`	`(nodeId: string, position: Point) => void`	-	Drag position callback.
`onViewportChange`	`(viewport: DiagramViewport) => void`	-	Receives pan and zoom changes.