Mermaid Syntax Cheatsheet

A quick reference for the diagram types Mermaid supports. Copy an example below into the Editor page to try it out.

Flowchart

Draws a process flow with nodes and directed arrows.

flowchart TD
    A[Start] --> B{Condition?}
    B -- Yes --> C[Done]
    B -- No --> A

Shows the order of interactions between participants/systems.

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

Describes a class structure and its relationships.

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

Shows transitions between the states of a system.

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading
    Loading --> Success
    Loading --> Error
    Success --> [*]

Displays a project's schedule and task durations.

gantt
    title Project Schedule
    dateFormat  YYYY-MM-DD
    section Phase 1
    Research    :a1, 2026-01-01, 5d
    Design      :after a1, 5d

Displays data proportions as a pie chart.

pie title Browser Distribution
    "Chrome" : 65
    "Firefox" : 15
    "Safari" : 20