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
`fadeIn`	`boolean`	`false`	Animate the graph in on mount

import { Player, FadeIn, Graph } from '@elucim/core';

<Player width={500} height={350} fps={30} durationInFrames={60}>
  <FadeIn duration={25}>
    <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="currentColor" labelColor="#fff"
    />
  </FadeIn>
</Player>

{
  "width": 500, "height": 350, "fps": 30, "durationInFrames": 60,
  "children": [
    {
      "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" }
      ],
      "labelColor": "#fff",
      "fadeIn": { "duration": 25 }
    }
  ]
}