Mermaid Diagrams

Mermaid lets you create diagrams and visualizations using text-based syntax. Diagrams render automatically from code blocks marked with the mermaid language.

Basic Usage

Use a fenced code block with the mermaid language identifier:

```mermaid
flowchart LR
    A[Start] --> B[Process] --> C[End]
```

flowchart LR
    A[Start] --> B[Process] --> C[End]

Diagram Types

Mermaid supports many diagram types. Here are the most commonly used:

Flowcharts

flowchart TD
    A[User Request] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[Response]
    D --> E

```mermaid
flowchart TD
    A[User Request] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[Response]
    D --> E
```

Sequence Diagrams

sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
```

State Diagrams

stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> [*]

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> [*]
```

Entity Relationship Diagrams

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains
    USER {
        string name
        string email
    }
    ORDER {
        int id
        date created
    }

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains
    USER {
        string name
        string email
    }
    ORDER {
        int id
        date created
    }
```

Flowchart Shapes

Arrow Types

Styling Tips

For complex diagrams, keep these tips in mind:

• Keep it simple - Break complex flows into multiple smaller diagrams
• Use labels - Add text to arrows to explain transitions
• Consistent direction - TD (top-down) or LR (left-right) based on your content width

Learn More

For the complete Mermaid syntax reference, see the official Mermaid documentation.

What's Next?