10 diagram types · Copy-paste ready

Mermaid Syntax Cheatsheet

Quick-reference syntax for every Mermaid diagram type. Click "Try in Editor" on any example to open it live.

Download printable PDF cheatsheet

Flowchart

Directional graphs for process flows, decision trees, and system architecture.

flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Ship it]
    B -->|No| D[Debug]
    D --> B
    C --> E(Done)
TD top-down · LR left-right · RL · BT[] rect · () rounded · {} diamond · (()) circle · >] asymmetric--> solid · -.-> dashed · ==> thick

Sequence Diagram

Show interactions between participants over time, ideal for API and protocol documentation.

sequenceDiagram
    participant C as Client
    participant S as Server
    participant DB as Database
    C->>S: POST /login
    S->>DB: SELECT user WHERE email=?
    DB-->>S: User record
    S-->>C: 200 OK + JWT token
->> sync · -->> dashed reply · -) async · --) async replyactivate/deactivate · loop · alt/else · opt · par

Gantt Chart

Project timelines with tasks, dependencies, milestones, and status tracking.

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Design
        Wireframes     :done, des1, 2024-01-01, 2024-01-07
        Mockups        :active, des2, 2024-01-08, 5d
    section Development
        Frontend       :dev1, after des2, 10d
        Backend        :dev2, after des2, 14d
    section Launch
        Deploy         :milestone, 2024-02-15, 0d
dateFormat YYYY-MM-DDdone · active · crit · milestoneafter <id> · <n>d duration

Entity Relationship

Database schemas with entities, attributes, and relationship cardinalities.

erDiagram
    USER {
        int id PK
        string email
        string name
        date created_at
    }
    POST {
        int id PK
        string title
        text body
        int user_id FK
    }
    USER ||--o{ POST : "writes"
PK · FK · UK||--|| one-to-one · ||--o{ one-to-many · }o--o{ many-to-many"relationship label" after entity name

Class Diagram

Object-oriented class hierarchies with inheritance, composition, and method signatures.

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool indoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
+ public · - private · # protected · ~ package<|-- inheritance · *-- composition · o-- aggregation · --> association

State Diagram

Finite state machines showing states, transitions, and conditions.

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Success : valid
    Processing --> Error : invalid
    Error --> Idle : retry
    Success --> [*]
    note right of Processing
        Validating input
        and calling API
    end note
[*] start/end statestate --> state : event labelnote right/left of state

Pie Chart

Proportional data as a circular chart with labeled slices.

pie title Browser Market Share
    "Chrome" : 65.3
    "Safari" : 18.7
    "Firefox" : 4.1
    "Edge" : 4.2
    "Other" : 7.7
title <text> optional"label" : value (numeric)

Git Graph

Visualize git branch history, merges, and commits with tags.

gitGraph
   commit id: "initial"
   branch feature/auth
   checkout feature/auth
   commit id: "add login"
   commit id: "add JWT"
   checkout main
   merge feature/auth
   commit id: "bump version"
commit · branch · checkout · merge · cherry-pickid: "label" · tag: "v1.0" · type: HIGHLIGHT/REVERSE/NORMAL

Mindmap

Hierarchical radial diagrams for brainstorming and topic breakdowns.

mindmap
  root((FlowViz))
    Features
      Real-time preview
      SVG export
      Theme switching
    Diagram Types
      Flowchart
      Sequence
      Gantt
    Tech Stack
      Vue 3
      Mermaid v11
      Nuxt 3
root((text)) circle · root[text] rect · root(text) roundedindentation defines hierarchy

Timeline

Chronological event sequences grouped into sections by period.

timeline
    title Product Roadmap
    section 2024 Q1
        Jan : Beta launch
        Feb : User feedback
        Mar : v1.0 release
    section 2024 Q2
        Apr : Mobile support
        Jun : API access
section <name> optional groupingdate : event (date is any string)