This post demonstrates the Mermaid diagram integration. The code blocks below are rendered with a tab interface allowing you to switch between the Mermaid source code and the rendered diagram.

Flowchart

graph TD A[Start] --> B{Is it working?} B -- Yes --> C[Great!] B -- No --> D[Debug] D --> B
graph TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great!]
    B -- No --> D[Debug]
    D --> B

Sequence Diagram

sequenceDiagram participant User participant System User->>System: Request Data activate System System-->>User: Return Data deactivate System
sequenceDiagram
    participant User
    participant System
    User->>System: Request Data
    activate System
    System-->>User: Return Data
    deactivate System

Class Diagram

classDiagram class Animal { +String name +eat() } class Dog { +bark() } Animal <|-- Dog
classDiagram
    class Animal {
        +String name
        +eat()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

State Diagram

stateDiagram-v2 [*] --> Idle Idle --> Processing : Event Processing --> Idle : Finished
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : Event
    Processing --> Idle : Finished

Pie Chart

pie title Browser Usage "Chrome" : 70 "Firefox" : 20 "Safari" : 10
pie title Browser Usage
    "Chrome" : 70
    "Firefox" : 20
    "Safari" : 10

Entity Relationship Diagram

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me