Graph

The <Graph> primitive draws a node-and-edge graph from declarative data. Use it for trees, networks, state machines, and any discrete-math diagram.

0.00s / 1.97s · F0

Props

Prop	Type	Default	Description
`nodes`	`{ id: string, x: number, y: number, label?: string, color?: string, radius?: number }[]`	—	Array of node definitions
`edges`	`{ from: string, to: string, directed?: boolean, label?: string, color?: string, weight?: number }[]`	—	Array of edge definitions
`nodeColor`	`string`	`'#4f46e5'`	Default fill color for nodes
`edgeColor`	`string`	`'#94a3b8'`	Default stroke color for edges
`labelColor`	`string`	`'#e2e8f0'`	Color for node and edge labels
`nodeRadius`	`number`	`18`	Default node radius in pixels
`edgeWidth`	`number`	`2`	Default edge stroke width

Code Example

elements: {
  network: {
    id: 'network',
    type: 'graph',
    props: {
      type: 'graph',
      nodes: [
        { id: 'a', x: 100, y: 175, label: 'A', color: '#6c5ce7', radius: 22 },
        { id: 'b', x: 250, y: 80, label: 'B', color: '#ff6b6b', radius: 22 },
        { id: 'c', x: 400, y: 175, label: 'C', color: '#4ecdc4', radius: 22 },
      ],
      edges: [
        { from: 'a', to: 'b', directed: true, label: '4' },
        { from: 'b', to: 'c', directed: true, label: '2' },
      ],
      edgeColor: '$foreground',
      labelColor: '$foreground',
    },
  },
}