Preview

Import

import { MermaidDiagram } from "@sigil-ui/components";

<MermaidDiagram
  chart={`graph LR
    A[Request] --> B[Auth]
    B --> C[Handler]
    C --> D[Response]`}
/>

<MermaidDiagram
  theme="default"
  chart={`sequenceDiagram
    Client->>Server: POST /login
    Server-->>Client: 200 OK`}
/>

<MermaidDiagram
  chart={`flowchart TD
    Start --> Check{Valid?}
    Check -- Yes --> Process
    Check -- No --> Error
    Process --> Done`}
/>

Prop	Type	Default	Description
`chart`	`string`	—	Mermaid chart definition string (required)
`theme`	`"dark" \| "default"`	`"dark"`	Mermaid rendering theme
`className`	`string`	—	Additional CSS classes

Plus all standard <div> HTML attributes.

Requires mermaid as a peer dependency — it is dynamically imported at render time.