Mermaid diagrams

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

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