Mermaid Diagrams

Overview

Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired syntax to create and modify diagrams dynamically. This site integrates Mermaid to enable rich, interactive diagrams in documentation.

Features

Theme-aware: Diagrams automatically adapt to light/dark mode
Interactive: Clickable elements and tooltips
Multiple diagram types: Flowcharts, sequence diagrams, class diagrams, ER diagrams, and more
Simple syntax: Write diagrams using a Markdown-like syntax

Basic Usage

Method 1: Mermaid Code Blocks

The simplest way to add a Mermaid diagram is using a fenced code block with the mermaid language identifier:

```mermaid
graph TD;
    A[Start] --> B{Decision};
    B -->|Yes| C[Action 1];
    B -->|No| D[Action 2];
    C --> E[End];
    D --> E;
```

Method 2: Component Syntax

You can also use the <Mermaid> component directly for more control:

<Mermaid
  chart="
graph LR;
    A[Client] --> B[Load Balancer];
    B --> C[Server1];
    B --> D[Server2];"
/>

Diagram Types

Flowcharts

Create process flows and decision trees:

Sequence Diagrams

Visualize interaction between components:

Class Diagrams

Document object-oriented structures:

Entity Relationship Diagrams

Model database schemas:

State Diagrams

Show state transitions:

Gantt Charts

Project timelines and scheduling:

User Journey

Map user experiences:

Git Graph

Visualize Git workflows:

Advanced Features

Subgraphs

Organize complex diagrams with subgraphs:

mermaid graph TB subgraph Frontend A[React App] B[Vue App] end subgraph Backend C[API Server] D[Auth Service] end subgraph Database E[(PostgreSQL)] F[(Redis)] end A --> C B --> C C --> D C --> E D --> F

md ```mermaid graph TB subgraph Frontend A[React App] B[Vue App] end subgraph Backend C[API Server] D[Auth Service] end subgraph Database E[(PostgreSQL)] F[(Redis)] end A --> C B --> C C --> D C --> E D --> F ```