> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid

Create flowcharts, sequence diagrams, Gantt charts, and other visualizations from text using Mermaid syntax.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Mermaid playground on holydocs.com](https://holydocs.com/components/mermaid).

## 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

**[Code Block](/components/code-block)**

Fenced code blocks with syntax highlighting, language labels, and copy buttons.
**[CodeGroup](/components/code-group)**

Tabbed multi-language code block for showing the same snippet in several programming languages.
**[Terminal](/components/terminal)**

Animated terminal replay with character-by-character typing for CLI tutorials and demos.

## More

- Interactive playground: [Mermaid on holydocs.com](https://holydocs.com/components/mermaid)
- Component library index: [/components](/components)