Mermaid Cheat Sheet

2026-03-05 · Complete Syntax Reference

A complete reference for Mermaid diagram syntax covering all supported diagram types. Click navigation to jump to specific diagram types.

flowchart TD
    %% Node definitions
    A[Start]
    B{Decision}
    C[Process]
    D((End))

    %% Connections
    A --> B
    B -->|Yes| C
    B -->|No| D
    C --> D

    %% Subgraph
    subgraph Subprocess
        C --> E[Step 1]
        E --> F[Step 2]
    end

sequenceDiagram
    actor User
    participant Frontend
    participant API
    participant Database

    User->>Frontend: Click login
    Frontend->>API: POST /login
    API->>Database: Query user
    Database-->>API: Return data
    API-->>Frontend: Return token
    Frontend-->>User: Login success

    %% Loop
    loop Retry mechanism
        API->>Database: Retry query
    end

    %% Conditional
    alt User exists
        API-->>Frontend: Normal response
    else User not found
        API-->>Frontend: Error response
    end

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
        +move()
    }

    class Dog {
        +breed
        +fetch()
    }

    class Cat {
        +color
        +climb()
    }

    Animal <|-- Dog : inherits
    Animal <|-- Cat : inherits
    Dog o-- Toy : aggregation
    Cat *-- Whisker : composition

gantt
    title Project Development Plan
    dateFormat  YYYY-MM-DD

    section Design Phase
    Requirements    :done, a1, 2026-01-01, 7d
    UI Design       :active, a2, after a1, 5d
    Review          :a3, after a2, 3d

    section Development
    Backend         :b1, after a3, 14d
    Frontend        :b2, after a3, 14d
    Integration     :b3, after b1, 5d

    section Testing
    Test            :c1, after b3, 7d
    Bug Fix         :c2, after c1, 5d
    Deploy          :milestone, c3, after c2, 1d

pie title Browser Market Share
    "Chrome" : 65.3
    "Safari" : 18.5
    "Firefox" : 6.2
    "Edge" : 5.1
    "Others" : 4.9

mindmap
  root((Project Management))
    Planning
      Requirements
      Resource allocation
      Scheduling
    Execution
      Development
      Testing
      Deployment
    Monitoring
      Progress tracking
      Risk management

journey
    title Shopping User Journey
    section Browse Products
      Visit homepage: 5: User
      Search product: 4: User
      View details: 4: User
    section Order & Payment
      Add to cart: 5: User
      Fill address: 3: User
      Complete payment: 5: User, System
    section Delivery
      Track shipment: 4: User
      Confirm receipt: 5: User

gitGraph
    commit "Initial commit"
    branch feature/login
    commit "Login feature"
    commit "Login polish"
    checkout main
    branch feature/register
    commit "Register feature"
    checkout main
    merge feature/login tag: "v1.1.0"
    merge feature/register

erDiagram
    CUSTOMER {
        string customer_id PK
        string name
        string email
    }
    ORDER {
        int order_id PK
        date order_date
        string customer_id FK
    }
    CUSTOMER ||--o{ ORDER : places

stateDiagram-v2
    [*] --> Pending
    Pending --> Shipped: Payment confirmed
    Pending --> Cancelled: Cancel order
    Shipped --> InTransit: Shipped
    InTransit --> Delivered: Arrived
    Delivered --> Completed: Confirmed
    Completed --> [*]

%% This is a comment

%% Theme settings
theme default
theme dark
theme forest
theme neutral
theme base

%% Hand-drawn style
%% Toggle in MermZen editor

💡 Tip: Try all diagrams in the MermZen editor with live preview and export to SVG/PNG.