Flow Diagram
Explain a process with connected steps.
Preview
Import
import { FlowDiagram } from "@sigil-ui/components";Usage
<FlowDiagram
nodes={[
{ id: "spec", label: "DESIGN.md" },
{ id: "tokens", label: "Tokens", variant: "highlighted" },
{ id: "ui", label: "Interface", variant: "accent" },
]}
connections={[{ from: "spec", to: "tokens", label: "parse" }, { from: "tokens", to: "ui", label: "compile" }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes (required) | FlowNode[] | — | Nodes configuration. |
connections (required) | FlowConnection[] | — | Connections configuration. |
direction | "horizontal" | "vertical" | — | Direction configuration. |
connector | "solid" | "dashed" | "dashed-animated" | — | Connector configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-surface | Surface |
--s-primary | Primary |
--s-primary-muted | Primary muted |
--s-primary-contrast | Primary contrast |
--s-radius-md | Radius md |
--s-text | Text |
--s-text-muted | Text muted |
--s-chart-axis | Chart axis |
--s-font-mono | Font mono |