Primitive

Diagram node

Compact typed node for concept graphs, architecture sketches, and agent explainers.

Diagram nodes are primary graph entities. Use role to clarify category and keep labels short.
diagram
DOM renderImage render
Diagram nodeDefault

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

Node role atlas.
Render state

Selected

Selected node state.
Render state

Muted

Subdued background node state.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *ReactNode-Primary node label.
metaReactNode-Compact secondary label.
role'boundary' | 'compute' | 'data' | 'decision' | 'error' | 'external' | 'process'processNode semantic category.
selectedbooleanfalseSelected canvas state.
mutedbooleanfalseBackground canvas state.