The Complete Guide to Mermaid Syntax

<div class="mermaid-wrapper"><div class="mermaid">
gitGraph LR:
   checkout main
   commit id: "Downtown" tag: "Line 1"
   commit id: "Central Park"
   branch "Line 2 (Blue)"
   commit id: "East Station"
   commit id: "Science Museum"
   checkout main
   commit id: "City Hall (Transfer)" tag: "🔀 Line 1 & 2"
   merge "Line 2 (Blue)"
   commit id: "Financial District"
   branch "Line 3 (Green)"
   commit id: "West Village"
   commit id: "Airport Terminal"
   checkout main
   commit id: "Sports Arena"
   merge "Line 3 (Green)"
   commit id: "Northern Gateway"
   branch "Line 4 (Orange)"
   commit id: "University"
   checkout main
   commit id: "Central Station" tag: "Terminal"
   merge "Line 4 (Orange)"
</div></div>

<div class="mermaid-wrapper">
  <div class="mermaid">
  graph TD
    A --> B
  </div>
</div>

<script is:inline>
  window.MERMAID_CONFIG = { theme: 'forest' };
</script>

graph TD
            A[Start] --> B{Decision}  %% this is a comment
            B -->|Yes| C[Execute]

flowchart TD
    A[Start] --> B{Logged in?};
    B -->|Yes| C[Enter homepage]
    B -->|No| D[Redirect to login page]
    C --> E[End]
    D --> E

flowchart TD
    subgraph User module
        A[User registration] --> B[User login]
    end
    subgraph Business module
        C[Browse products] --> D[Place order and pay]
    end
    B --> C

flowchart LR
    A[Start] --> B[Process]
    classDef red fill:#f99,stroke:#333,stroke-width:2px
    class A red 

sequenceDiagram
    participant User
    participant Server
    User->>Server: Send request
    Server-->>User: Return response

sequenceDiagram
    participant U as User
    participant S as Server
    U->>S: Request data

sequenceDiagram
    A->>+B: Request
    B-->>-A: Response

sequenceDiagram
    participant A
    participant B
    Note right of A: This is a note
    Note left of B: Note on the left
    Note over A,B: Note spanning participants

sequenceDiagram
    loop Run daily
        A->>B: Check status
    end

sequenceDiagram
    alt Success
        A->>B: Continue processing
    else Failure
        A->>B: Retry
    end

sequenceDiagram
    par Run in parallel
        A->>B: Task 1
    and
        A->>C: Task 2
    end

classDiagram
    class Animal {
        +String name
        -int age
        +void eat()
        -void sleep()
    }

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +void move()
    class Dog { 
        +String breed
        +void bark()
    }

stateDiagram-v2
    [*] --> Pending review
    Pending review --> Approved
    Pending review --> Rejected
    Approved --> [*]
    Rejected --> [*]

stateDiagram-v2
    State1: First state
    State2: Second state
    [*] --> State1
    State1 --> State2

stateDiagram-v2
    [*] --> Running
    state Running { 
        [*] --> Ready
        Ready --> Executing
        Executing --> Ready
    } 
    Running --> [*]

stateDiagram-v2
    state fork <<fork>>
    [*] --> fork
    fork --> State A
    fork --> State B

gantt
    title Project development plan
    dateFormat YYYY-MM-DD
    section Requirements phase
        Requirements analysis    :done, a1, 2024-01-01, 7d
        Requirements review    :active, a2, after a1, 3d
    section Development phase
        Frontend development    :a3, after a2, 14d
        Backend development    :a4, after a2, 21d
    section Testing phase
        Integration testing    :a5, after a3, 7d

pie title Programming language usage share
    "JavaScript" : 45
    "Python" : 30
    "Java" : 15
    "Go" : 10

pie showData
    title Market share
    "Product A" : 35.5
    "Product B" : 28.3
    "Product C" : 20.2
    "Others" : 16.0

erDiagram
    CUSTOMER ||--o{  ORDER : places
    ORDER ||--|{  LINE_ITEM : contains
    PRODUCT ||--o{  LINE_ITEM : belongs to
    CUSTOMER { 
        int id PK
        string name
        string email
    } 
    ORDER { 
        int id PK
        int customer_id FK
        date created_at
    } 

journey
    title Shopping experience
    section Browse products
        View product list: 5: User
        Search products: 4: User
    section Place order and pay
        Add to cart: 4: User
        Fill in address: 3: User
        Payment successful: 5: User, System

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop

gitGraph
    commit id: "Initialize"
    commit id: "Add feature"
    branch feature
    checkout feature
    commit id: "Develop new feature"
    checkout main
    merge feature id: "Merge feature"

gitGraph
    commit
    branch dev
    checkout dev
    commit
    branch feature
    checkout feature
    commit
    checkout dev
    merge feature
    checkout main
    merge dev tag: "v1.0.0"

kanban
    Todo
        Requirements analysis
        Design review
    In progress
        Frontend development
    Done
        Project initialization

quadrantChart
    x-axis Low priority --> High priority
    y-axis Low impact --> High impact
    Urgent tasks: [0.8, 0.9]
    Routine chores: [0.3, 0.4]
    Strategic planning: [0.6, 0.7]
    Trivial odds and ends: [0.2, 0.2]

architecture-beta
    service api(server)[APIService]
    service db(database)[Database]
    service cache(database)[Cache]
    api:R --< L:db
    api:R --< L:cache

block-beta
    columns 3
    a["Module A"] b["Module B"] c["Module C"]
    a --< b
    b --< c

C4Context
    title System context diagram
    Person(user, "User", "System user")
    System(app, "Application system", "Core business system")
    Rel(user, app, "Uses", "HTTPS")

flowchart LR
    A[First line
Second line
Third line] --> B[Result]

flowchart TD
    A["Text with special characters"]
    B["The end keyword"]