Primitive

Diagram Edge

SVG edge anatomy for diagram canvas and flow graphs.

Use DiagramEdge primitives for routed SVG paths, edge labels, selected states, intent classes, and marker vocabulary. Keep graph validation and route calculation in schemas and utilities.
diagram
DOM renderImage render
Diagram EdgeDefault

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

Canvas edge with markers and label.
Render state

Canvas

Canvas edge with markers and label.
Render state

Flow

Flow graph edge inside an SVG viewport.
event
Render state

Relations

Canvas edge relations and selected intent.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
path *string-Computed SVG path data.
labelstring-Optional edge label.
labelPoint *{ x: number; y: number }-Computed edge label anchor.
relationDiagram edge relationsolidStroke style or path role.
intentDiagramTone | DataIntentmutedEdge color intent.
selectedbooleanfalseSelected edge state.