Skip to main content

Mermaid Diagram Examples and Syntax Quick Reference

Mermaid works well in doc sites for flowcharts, sequence diagrams, and class diagrams. It writes directly in Markdown / MDX, has low maintenance cost, and is easier to update than screenshots.

Flowchart​

Example​

graph TD
    A[Start] --> B{Condition}
    B -->|Yes| C[End]
    B -->|No| D[Process]
    D --> B

image-20240701220715588

Mind Map​

Example​

graph TD
    A[Mind Map]
    A --> B[Branch 1]
    A --> C[Branch 2]
    A --> D[Branch 3]
    B --> E[Sub-branch 1]
    B --> F[Sub-branch 2]
    C --> G[Sub-branch 3]
    C --> H[Sub-branch 4]
    D --> I[Sub-branch 5]
    D --> J[Sub-branch 6]

image-20240701220742929

Sequence Diagram​

Example​

sequenceDiagram
    participant User
    participant System
    User->>System: Login Request
    System-->>User: Return Login Result

image-20240701220809877

Gantt Chart​

Example​

gantt
    title Project Plan
    dateFormat  YYYY-MM-DD
    section Phase
    Requirements Analysis :a1, 2024-06-01, 10d
    System Design :after a1, 15d
    Development : 2024-06-20, 30d
    Testing : 2024-07-20, 20d

image-20240701220838836

Class Diagram​

Example​

classDiagram
    class Person{
        +String name
        +int age
        +void speak()
    }

    class Employee{
        +int employeeId
        +double salary
    }

    Person <|-- Employee

image-20240701220856779