Mermaid Reference

Render Mermaid diagrams such as flowcharts and sequence diagrams from string definitions.

Import and setup

Keep long Mermaid diagram strings in constants so the rendering call stays readable.

Diagram types

Use flowcharts for workflows, decisions, and state transitions. Use sequence diagrams to show interactions between users, apps, APIs, and services. Mermaid chart strings can be static, generated from data, or produced by AI as long as you validate syntax before rendering.

Themes and states

The component supports Mermaid theme values such as default, dark, forest, neutral, and base. It handles loading with a spinner and renders a friendly error state when Mermaid cannot parse the diagram.

Best practices

Keep chart strings readable, use descriptive node labels, prefer flowchart LR for horizontal process diagrams, and validate AI-generated diagram strings before rendering them when possible.