Mermaid

For isolated previews, theme switching, and sandbox editing, open the Mermaid playground on holydocs.com .

When to use

Use this component when source needs more context than a plain fenced block can provide, or when multiple code representations should stay synced.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Flowchart

Simple top-down flowchart.

graph TD
A[Start] --> B
B -->|Yes| C[Action]
B -->|No| D[End]
C --> D

mdx
<Mermaid>graph TD  A[Start] --> B{Decision}  B -->|Yes| C[Action]  B -->|No| D[End]  C --> D</Mermaid>

Sequence Diagram

Interaction between services.

sequenceDiagram
Client->>API: POST /projects
API->>Database: INSERT project
Database-->>API: project_id
API-->>Client: 201 Created

mdx
<Mermaid>sequenceDiagram  Client->>API: POST /projects  API->>Database: INSERT project  Database-->>API: project_id  API-->>Client: 201 Created</Mermaid>

Gantt Chart

Project timeline visualization.

gantt
title Release Plan
dateFormat YYYY-MM-DD
section Backend
API routes     :a1, 2024-01-01, 14d
Database schema:a2, after a1, 7d
section Frontend
UI components  :b1, 2024-01-08, 10d
Integration    :b2, after b1, 5d

mdx
<Mermaid>gantt  title Release Plan  dateFormat YYYY-MM-DD  section Backend    API routes     :a1, 2024-01-01, 14d    Database schema:a2, after a1, 7d  section Frontend    UI components  :b1, 2024-01-08, 10d    Integration    :b2, after b1, 5d</Mermaid>

Props

This component has no configurable props. Use its child content to shape the output.

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<Mermaid>graph TD  A[Start] --> B{Decision}  B -->|Yes| C[Action]  B -->|No| D[End]  C --> D</Mermaid>

Tips

• Optimize for copy-paste reliability. Labels, tabs, and annotations should help readers choose the right snippet without modifying it first.
• Keep examples small enough to scan but realistic enough to survive first use in a real project.
• If the code block is critical to task completion, mirror the same example in prose so search and AI tools can recover the intent.

Related Components

More

• Interactive playground: Mermaid on holydocs.com
• Component library index: /components