Mermaid Live Editor Mermaid Guide About Privacy

Mermaid Tutorial

Mermaid lets you create diagrams from text. This guide covers the most common diagram types with copy-paste examples you can try in the editor.

1. Flowchart

Use graph or flowchart with TD (top-down) or LR (left-right).

graph TD
    A[Start] --> B{OK?}
    B -->|Yes| C[Run]
    B -->|No| D[End]
    C --> D
Preview

2. Sequence Diagram

Show message order between participants.

sequenceDiagram
    participant User
    participant API
    User->>API: Request
    API-->>User: Response
Preview

3. Gantt Chart

Plan tasks over time with sections and durations.

gantt
    title Plan
    dateFormat YYYY-MM-DD
    section Dev
    Analysis :a1, 2025-01-01, 7d
    Coding   :a2, after a1, 10d
Preview

4. Class Diagram

Use classDiagram for classes, attributes, methods, and inheritance.

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

5. State Diagram

Use stateDiagram-v2 for states and transitions; [*] is start/end.

stateDiagram-v2
    [*] --> Idle
    Idle --> Running: start
    Running --> Done: finish
    Done --> [*]
Preview

6. ER Diagram

Use erDiagram for entities and relationships; symbols like ||--o{ show cardinality.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    CUSTOMER {
        string id
        string name
    }
Preview

7. Pie Chart

Pie charts show proportions; each item is "label" : value.

pie title Market Share
    "Product A" : 42
    "Product B" : 28
    "Other" : 30
Preview

8. Mindmap

Use mindmap for hierarchies; indentation defines child nodes.

mindmap
  root((Product))
    Features
      Auth
    Tech
      Frontend
      Backend
Preview

9. Timeline

timeline lists events chronologically—great for milestones.

timeline
    title Project Milestones
    2025-01 : Kickoff
    2025-02 : Design Review
    2025-03 : Dev Complete
    2025-04 : Launch
Preview

10. User Journey

journey maps user steps; the number is satisfaction (1–5).

journey
    title Booking Flow
    section Browse
      Open site: 5: User
      Search trips: 3: User
    section Checkout
      Select seat: 4: User
      Pay order: 2: User, System
Preview

11. Git Graph

gitGraph visualizes branches, commits, and merges.

gitGraph
    commit id: "init"
    branch develop
    checkout develop
    commit id: "feat-A"
    checkout main
    merge develop id: "release-1.0"
Preview

12. Quadrant Chart

quadrantChart maps items to four quadrants; coordinates [x, y] range 0–1.

quadrantChart
    title Priority Matrix
    x-axis Low Impact --> High Impact
    y-axis Low Urgency --> High Urgency
    quadrant-1 Do Now
    quadrant-2 Schedule
    quadrant-3 Defer
    quadrant-4 Monitor
    Bug fix: [0.8, 0.9]
    New feature: [0.7, 0.5]
Preview

13. Block Diagram

block-beta describes modules or data flow with blocks and arrows.

block-beta
    columns 3
    A["Input"] B["Process"] C["Output"]
    A --> B
    B --> C
Preview

14. Sankey Diagram

Start with sankey, then CSV rows: source,target,value (no leading spaces). Use English node names.

sankey

Visit,Signup,5
Visit,Leave,20
Signup,Trial,4
Trial,Pay,3
Preview

15. Requirement Diagram

requirementDiagram links requirements to system elements.

requirementDiagram
    requirement user_login {
        id: 1
        text: Support password login
        risk: medium
        verifymethod: test
    }
    element auth_module {
        type: system
    }
    auth_module - satisfies -> user_login
Preview

16. Tips

Switch themes, hand-drawn style, zoom the preview, and export SVG/PNG in the editor.

Try the Editor