Loading

Mermaid diagrams

You can create diagrams using Mermaid with standard fenced code blocks. Diagrams are rendered client-side in the browser.

flowchart LR
    A[Write Mermaid] --> B[Render diagram]

Use a fenced code block with mermaid as the language:

```mermaid
flowchart LR
A --> B
```

All Mermaid diagram types are supported, including:

  • Flowcharts
  • Sequence diagrams
  • State diagrams
  • Class diagrams
  • Entity relationship (ER) diagrams
  • And more
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
		
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

```mermaid
sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob, how are you?
    B-->>A: Great!
```
		
sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob, how are you?
    B-->>A: Great!

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Complete: done
    Complete --> [*]
```
		
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Complete: done
    Complete --> [*]

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +isMammal() bool
    Duck : +String beakColor
    Duck : +quack()
    Fish : +int sizeInFeet
    Fish : +canEat()
```
		
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +isMammal() bool
    Duck : +String beakColor
    Duck : +quack()
    Fish : +int sizeInFeet
    Fish : +canEat()

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "is in"
```
		
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "is in"

```mermaid
flowchart TD
    subgraph t2["T2"]
        direction TB
        enterprise_app["Enterprise application"]

        subgraph subscription["Subscription"]
            subgraph rg["Resource Group"]
                event_hub["event hub"]
                storage_account["storage account"]
            end
            spacer1[" "]:::hidden
            spacer2[" "]:::hidden
            spacer1 ~~~ spacer2
        end
        enterprise_app -- "Azure Event Hubs<br>Data Receiver" --> event_hub
        enterprise_app -- "Storage Blob Data<br>Contributor" --> storage_account
    end

    app_reg --> enterprise_app

        subgraph t1["T1"]
        direction TB
        app_reg["App registration"]
        client_secret["Client secret"]
        app_reg --> client_secret
    end

    classDef hidden fill:none,stroke:none,color:transparent,width:0px;
```
		
flowchart TD
    subgraph t2["T2"]
        direction TB
        enterprise_app["Enterprise application"]

        subgraph subscription["Subscription"]
            subgraph rg["Resource Group"]
                event_hub["event hub"]
                storage_account["storage account"]
            end
            spacer1[" "]:::hidden
            spacer2[" "]:::hidden
            spacer1 ~~~ spacer2
        end
        enterprise_app -- "Azure Event Hubs<br>Data Receiver" --> event_hub
        enterprise_app -- "Storage Blob Data<br>Contributor" --> storage_account
    end

    app_reg --> enterprise_app

        subgraph t1["T1"]
        direction TB
        app_reg["App registration"]
        client_secret["Client secret"]
        app_reg --> client_secret
    end

    classDef hidden fill:none,stroke:none,color:transparent,width:0px;

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.

  • 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.