Dependency Graph
A directed dependency graph with positioned nodes, arrow edges, and optional labels.
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 },
]}
edges={[
{ from: "app", to: "api", label: "REST" },
]}
nodeRadius={28}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | DepNode[] | — | Nodes with id, label, x, y, optional group |
edges | DepEdge[] | — | Directed edges with optional label and dashed style |
width | number | 500 | SVG width |
height | number | 400 | SVG height |
nodeRadius | number | 28 | Node circle radius |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Node stroke and edge lines |
--s-surface | Node fill |
--s-text | Node label text |
--s-text-muted | Edge labels and group names |
--s-font-mono | All text font family |