Component

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.
diagram
Diagram canvasDefault

Request flow

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

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

Request-flow explainer with nodes and labels.

Request flow

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

Selected

Selected node and edge states.

Request flow

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

Interactive

Pan, zoom, and reset controls enabled.

Request flow

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

Compact

Smaller educational composition.

Request flow

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

Wide

Full-width canvas for desktop explainers.

Request flow

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

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
graph *DiagramCanvasGraph-Validated nodes, items, and routed edges.
title *string-Diagram title.
descriptionstring-Muted supporting copy.
selectedIdstring-Highlights a node, item, or edge.
controlsbooleantrueShows zoom and fit controls.
minimapbooleanfalseShows a small node overview map.
pannablebooleantrueAllows local pan interaction.
zoomablebooleantrueAllows local zoom interaction.
heightnumber360Canvas stage height.
widthnumber1000Canvas design coordinate width.
onSelectionChange(selectedId: string) => void-Receives local node, item, or edge selection.
onViewportChange(viewport: DiagramViewport) => void-Receives pan and zoom changes.