Primitive

Diagram Viewport

Diagram canvas and flow viewport shell anatomy.

Use DiagramViewport primitives for diagram shells, headers, pan surfaces, stages, element placement, footers, and compact SVG viewports. Keep selection, pan, zoom, and graph routing in the owning component.
diagram
DOM renderImage render
Diagram ViewportDefault

Agent canvas

Pan and zoom across agent workflow topology.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

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

Default

Diagram canvas shell with status header and viewport.

Agent canvas

Pan and zoom across agent workflow topology.

Render state

Canvas

Canvas viewport with positioned workflow elements.

Routing workflow

Selected model step with supporting trace artifacts.

metricLatency184msp95
Render state

Flow

Compact flow viewport shell.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
display"canvas" | "flow"-Diagram viewport presentation mode.
title *ReactNode-Canvas header title.
descriptionReactNode-Optional header status copy.
widthnumber | string-Stage or graph width token/value.
heightnumber | string-Stage or graph height token/value.
transformstring-Computed pan/zoom transform for the canvas stage.
childrenReactNode-Primitive-owned viewport or stage contents.