Mermaid Chart Documentation

Quickly learn how to create various diagrams using Mermaid syntax

Flowchart

graph TD
    A[Start] --> B{Logged in?}
    B -->|Yes| C[Show Homepage]
    B -->|No| D[Show Login Page]
    C --> E[End]
    D --> E

Basic Syntax:

graph TD defines a top-down flowchart
A[Text] creates a rectangle node
B{Text} creates a diamond node (typically for conditions)
--> creates a connection between nodes
-->|Text| creates a labeled arrow

Sequence Diagram

sequenceDiagram
    participant User
    participant System
    participant Database
    
    User->>System: Login Request
    System->>Database: Verify Credentials
    Database-->>System: Verification Result
    System-->>User: Login Response

Basic Syntax:

sequenceDiagram defines a sequence diagram
participant Name defines a participant
A->>B: Text creates a solid arrow (synchronous message)
A-->>B: Text creates a dashed arrow (asynchronous message)

Class Diagram

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

Basic Syntax:

classDiagram defines a class diagram
class ClassName {} defines a class with properties/methods
+ indicates public properties/methods
- indicates private properties/methods
A <|-- B indicates B inherits from A (B is a subclass of A)

State Diagram

stateDiagram-v2
    [*] --> Pending
    Pending --> Processing: Start Processing
    Processing --> Completed: Complete Processing
    Processing --> Cancelled: Cancel
    Completed --> [*]
    Cancelled --> [*]

Basic Syntax:

stateDiagram-v2 defines a state diagram
[*] represents start or end state
A --> B represents a transition from state A to B
A --> B: Text adds transition description text

Entity Relationship

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Basic Syntax:

erDiagram defines an entity relationship diagram
||--o{ represents a one-to-many relationship
||--|{ represents a one-to-many (mandatory) relationship
}|..|{ represents a many-to-many relationship (dashed line)
: Text adds relationship label

Gantt Chart

gantt
    title Project Development Plan
    dateFormat YYYY-MM-DD
    section Design Phase
    Requirements Analysis     :done, des1, 2023-01-01, 2023-01-05
    Prototype Design     :active, des2, 2023-01-06, 3d
    section Development Phase
    Coding        :dev1, after des2, 20d
    Testing        :dev2, after dev1, 10d

Basic Syntax:

gantt defines a Gantt chart
title Title sets the chart title
dateFormat Format sets the date format
section Name creates a task section
Task Name: ID, Start Date, Duration/End Date defines a task with its timespan
done/active marks task status (completed/in progress)
after ID defines task dependency

Pie Chart

pie title Traffic Sources
    "Search Engines" : 42.7
    "Direct Access" : 25.5
    "Social Media" : 18.3
    "Other Channels" : 13.5

Basic Syntax:

pie defines a pie chart
title Title sets the chart title
"Label" : Value defines a slice in the pie chart

Additional Resources

This page provides basic Mermaid syntax guidelines. For more advanced features and detailed syntax, please refer to:

Mermaid Official Documentation