Mermaid Diagram
Render a diagram from Mermaid text syntax.
Preview
Import
import { MermaidDiagram } from "@sigil-ui/components";Usage
<MermaidDiagram
chart={`graph LR
A[Tokens] --> B[CSS]
B --> C[Components]
C --> D[App]`}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
chart (required) | string | — | Chart configuration. |
theme | "dark" | "default" | — | Theme configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-text | Text |
--s-border-strong | Border strong |
--s-chart-axis | Chart axis |
--s-surface | Surface |
--s-surface-elevated | Surface elevated |
--s-chart-grid | Chart grid |
--s-radius-card | Radius card |
--s-border | Border |
--s-background | Background |
--s-error | Error |
--s-text-muted | Text muted |