Diagram canvas

Interactive explainer canvas with DOM nodes, supporting items, SVG edges, pan, zoom, fit, and minimap.

Diagram canvas is the editorial counterpart to FlowDiagram. It explains ideas and relationships, not product graph persistence.

Editorial explainer graph for request routing, context, model synthesis, and streamed output.

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

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

Editorial explainer graph for request routing, context, model synthesis, and streamed output.

Default

Request-flow explainer with nodes, items, and labels.

Editorial explainer graph for request routing, context, model synthesis, and streamed output.

Selected

Selected node, item, and edge states.

Editorial explainer graph for request routing, context, model synthesis, and streamed output.

Interactive

Pan, zoom, fit controls, and minimap enabled.

Editorial explainer graph for request routing, context, model synthesis, and streamed output.

Compact

Smaller educational composition.

Props

Name	Type	Default	Description
`graph *`	`DiagramCanvasGraph`	-	Validated nodes, items, and routed edges.
`title *`	`string`	-	Diagram title.
`description`	`string`	-	Muted supporting copy.
`selectedId`	`string`	-	Highlights a node, item, or edge.
`controls`	`boolean`	`true`	Shows zoom and fit controls.
`minimap`	`boolean`	`false`	Shows a small node overview map.
`pannable`	`boolean`	`true`	Allows local pan interaction.
`zoomable`	`boolean`	`true`	Allows local zoom interaction.
`height`	`number`	`360`	Canvas stage height.
`width`	`number`	`1000`	Canvas design coordinate width.
`onSelectionChange`	`(selectedId: string) => void`	-	Receives local node, item, or edge selection.
`onViewportChange`	`(viewport: DiagramViewport) => void`	-	Receives pan and zoom changes.