Component

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.
data
DOM renderImage render
Flow diagramDefault

Agent execution flow

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

Playground

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

Loading playground

Rendered matrix

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

Default

Routed node graph with muted edges.

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.
retrieveshapeexecutesynthesizePromptinputContextmemoryPlantyped stepsToolssafe callsAnswerresponse
contexttool pathselected
Render state

Selected

Selected node and edge states.

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.
retrieveshapeexecutesynthesizePromptinputContextmemoryPlantyped stepsToolssafe callsAnswerresponse
contexttool pathselected
Render state

Interactive

Controls and draggable nodes enabled.

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.
retrieveshapeexecutesynthesizePromptinputContextmemoryPlantyped stepsToolssafe callsAnswerresponse
contexttool pathselected
Render state

Empty

Empty graph state.

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.
contexttool pathselected
Render state

Wide

Full-width graph for desktop inspectors.

Agent execution flow

A compact map of context, planning, tool execution, and final synthesis.
retrieveshapeexecutesynthesizePromptuser inputContextmemory + filesPlantyped stepsToolssafe actionsAnswerfinal response
contexttool pathselected
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
flow *FlowDiagramFlow-Validated node and edge graph.
title *string-Diagram title.
descriptionstring-Muted supporting copy.
selectedNodeIdstring-Highlights one node.
selectedEdgeIdstring-Highlights one routed edge.
controlsbooleanfalseShows zoom controls.
draggableNodesbooleanfalseAllows local node dragging.
pannablebooleanfalseReserved for product-level pan orchestration.
zoomablebooleanfalseReserved for product-level zoom orchestration.
legendreadonly DataLegendItem[][]Optional legend indicators.
widthnumber760SVG viewBox width.
heightnumber320SVG 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.