﻿---
title: Mermaid diagrams
description: You can create diagrams using Mermaid with standard fenced code blocks. Diagrams are rendered client-side in the browser. Use a fenced code block with...
url: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/2651/syntax/diagrams
---

# Mermaid diagrams
You can create diagrams using [Mermaid](https://mermaid.js.org/) with standard fenced code blocks. Diagrams are rendered client-side in the browser.

## Basic usage

Use a fenced code block with `mermaid` as the language:
```markdown
```mermaid
flowchart LR
A --> B
```
```


## Supported diagram types

All [Mermaid diagram types](https://mermaid.js.org/intro/) are supported, including:
- Flowcharts
- Sequence diagrams
- State diagrams
- Class diagrams
- Entity relationship (ER) diagrams
- And more


## Examples


### Flowchart

<tab-set>
  <tab-item title="Source">
    ```markdown
    ```mermaid
    flowchart LR
        A[Start] --> B{Decision}
        B -->|Yes| C[Action 1]
        B -->|No| D[Action 2]
        C --> E[End]
        D --> E
    ```
    ```
  </tab-item>

  <tab-item title="Rendered">
    ```mermaid
    flowchart LR
        A[Start] --> B{Decision}
        B -->|Yes| C[Action 1]
        B -->|No| D[Action 2]
        C --> E[End]
        D --> E
    ```
  </tab-item>
</tab-set>


### Sequence diagram

<tab-set>
  <tab-item title="Source">
    ```markdown
    ```mermaid
    sequenceDiagram
        participant A as Alice
        participant B as Bob
        A->>B: Hello Bob, how are you?
        B-->>A: Great!
    ```
    ```
  </tab-item>

  <tab-item title="Rendered">
    ```mermaid
    sequenceDiagram
        participant A as Alice
        participant B as Bob
        A->>B: Hello Bob, how are you?
        B-->>A: Great!
    ```
  </tab-item>
</tab-set>


### State diagram

<tab-set>
  <tab-item title="Source">
    ```markdown
    ```mermaid
    stateDiagram-v2
        [*] --> Idle
        Idle --> Processing: start
        Processing --> Complete: done
        Complete --> [*]
    ```
    ```
  </tab-item>

  <tab-item title="Rendered">
    ```mermaid
    stateDiagram-v2
        [*] --> Idle
        Idle --> Processing: start
        Processing --> Complete: done
        Complete --> [*]
    ```
  </tab-item>
</tab-set>


### Class diagram

<tab-set>
  <tab-item title="Source">
    ```markdown
    ```mermaid
    classDiagram
        Animal <|-- Duck
        Animal <|-- Fish
        Animal : +int age
        Animal : +isMammal() bool
        Duck : +String beakColor
        Duck : +quack()
        Fish : +int sizeInFeet
        Fish : +canEat()
    ```
    ```
  </tab-item>

  <tab-item title="Rendered">
    ```mermaid
    classDiagram
        Animal <|-- Duck
        Animal <|-- Fish
        Animal : +int age
        Animal : +isMammal() bool
        Duck : +String beakColor
        Duck : +quack()
        Fish : +int sizeInFeet
        Fish : +canEat()
    ```
  </tab-item>
</tab-set>


### ER diagram

<tab-set>
  <tab-item title="Source">
    ```markdown
    ```mermaid
    erDiagram
        CUSTOMER ||--o{ ORDER : places
        ORDER ||--|{ LINE_ITEM : contains
        PRODUCT ||--o{ LINE_ITEM : "is in"
    ```
    ```
  </tab-item>

  <tab-item title="Rendered">
    ```mermaid
    erDiagram
        CUSTOMER ||--o{ ORDER : places
        ORDER ||--|{ LINE_ITEM : contains
        PRODUCT ||--o{ LINE_ITEM : "is in"
    ```
  </tab-item>
</tab-set>


## Interactive controls

Mermaid diagrams include interactive controls that appear when you hover over the diagram:
- **Zoom in/out**: Click the `+` and `-` buttons to zoom in or out. You can also hold `Ctrl` (or `Cmd` on macOS) and use the mouse wheel to zoom.
- **Reset**: Click the reset button to return to the default view.
- **Fullscreen**: Click the expand button to view the diagram in a fullscreen modal.
- **Pan**: Click and drag the diagram to pan around when zoomed in.

These controls are particularly useful for large or complex diagrams.

## Notes

- Diagrams require JavaScript to render. Users with JavaScript disabled will see the raw Mermaid code.
- For the full list of diagram types and syntax, see the [Mermaid documentation](https://mermaid.js.org/intro/).