Import it from @grafloria/renderer.
tsinterface NodeSpec
Properties
| Name | Type | Default | Description |
|---|---|---|---|
id? | string | ||
type? | string | Engine node type. Default 'rect'. | |
position? | { x: number; y: number } | Where the box sits. Optional: absent, a new box starts at the origin and an existing one stays put — and a composing layout (layout: 'architecture') places it anyway. | |
size? | { width: number; height: number } | ||
data? | Record<string, any> | Free-form user payload — passed straight to custom node components. | |
label? | string | Convenience for metadata.label. | |
sublabel? | string | NodeSublabel | A second, smaller, muted line under the label — the name-and-description box of the diagrams AI tools draw ("Our API" / "sherkety-erp-api"). With a sublabel the label is drawn semi-bold (a style.fontWeight still wins). An object sets the line's own font ('mono' = a monospace stack), size and colour. Stored on metadata.sublabel, so it serializes with the node. | |
near? | { target: string; side?: 'right' | 'left' | 'above' | 'below'; gap?: number } | null | A note placed BESIDE what it is about — a relation, not a coordinate: the architecture layout puts this box to the side of target (a node or zone), gap px away. Stored on metadata.near. | |
shape? | Record<string, any> | Convenience for metadata.shape (fill / stroke / cornerRadius / …). | |
style? | Partial<NodeStyle> | ||
selected? | boolean | ||
draggable? | boolean | ||
selectable? | boolean | ||
custom? | boolean | Render this node through the host's custom-node callback (React component, slotted template, …) instead of as SVG. Sets metadata.useHTMLLayer. | |
ports? | PortSpec[] | Ports. Omit to keep the four deterministic defaults. | |
metadata? | Record<string, any> | Anything else you want on node.metadata. |
Was this page helpful?