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

DOM render Image render

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.

Render state

Selected

Selected node and edge states.

Request flow

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

Render state

Interactive

Pan, zoom, and reset controls enabled.

Request flow

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

Render state

Compact

Smaller educational composition.

Request flow

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

Render state

Wide

Full-width canvas for desktop explainers.

Request flow

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

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.

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.

Concrete

Soft, powerful, compact UI vocabulary for AI-native software.

Rubric Labs

Shell

npm install @rubriclab/concrete

Catalog

Foundations Primitives Components

Render

Foundation render Primitive render Component render

Package

npm GitHub