Dependency Graph
Map dependencies between connected nodes.
Preview
Import
import { DependencyGraph } from "@sigil-ui/components";Usage
<DependencyGraph
nodes={[
{ id: "app", label: "App", x: 250, y: 40 },
{ id: "api", label: "API", x: 120, y: 150 },
{ id: "db", label: "DB", x: 380, y: 150 },
{ id: "cache", label: "Cache", x: 250, y: 260, group: "infra" },
]}
edges={[
{ from: "app", to: "api" },
{ from: "app", to: "db" },
{ from: "api", to: "cache", label: "reads", dashed: true },
{ from: "db", to: "cache", label: "syncs" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes (required) | DepNode[] | — | Nodes configuration. |
edges (required) | DepEdge[] | — | Edges configuration. |
width | number | — | Width of the rendered content. |
height | number | — | Height of the rendered content. |
nodeRadius | number | — | Node Radius configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-chart-axis | Chart axis |
--s-text-muted | Text muted |
--s-font-mono | Font mono |
--s-surface | Surface |
--s-border | Border |
--s-text | Text |