Primitive

Flow Node

SVG node primitive for compact flow diagrams.

Use FlowNode for SVG graph nodes inside compact flow diagrams. It owns node rect and label anatomy; components own drag state, hit testing, and graph data.
diagram
DOM renderImage render
Flow NodeDefault
Model stepValidation

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

Flow node inside an SVG viewport.
Model stepValidation
Render state

Inverse

Inverse selected flow node.
AgentRuntime
Render state

Hierarchies

Flow node hierarchy and selection states.
RouteInputModelReasoningAgentRuntime
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *string-Primary node label.
subtitlestring-Optional secondary node label.
hierarchy'surface' | 'accent' | 'inverse'surfaceNode surface hierarchy.
selectedbooleanfalseSelected node state.
x, y, width, height *number-SVG node geometry.