Mermaid Chart Documentation

Quickly learn how to create various diagrams using Mermaid syntax

Flowchart

graph TD
    A[😊 Wake Up] --> B{☕ Coffee Ready?}
    B -->|✅ Yes| C[🌟 Great Day Ahead]
    B -->|❌ No| D[😴 Back to Bed]
    C --> E[💪 Conquer the World]
    D --> F[😪 Zombie Mode]
    F --> G[🏃 Rush to Coffee Shop]
    G --> C

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 Me as 😎 Me
    participant Fridge as 🧊 Fridge
    participant Brain as 🧠 Brain
    participant Stomach as 🤤 Stomach
    
    Me->>Fridge: 👀 What's for dinner?
    Fridge-->>Me: 🥬 Only vegetables...
    Me->>Brain: 🤔 Should I cook?
    Brain-->>Me: 🍕 Order pizza instead!
    Me->>Stomach: 🤷 Pizza again?
    Stomach-->>Me: 😋 Always yes to pizza!

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 DatingAppUser {
      +String bio
      +Array photos
      +Integer age
      +swipeRight()
      +sendMessage()
    }
    class HopelessRomantic {
      +String dreamDate
      +writePoetry()
      +fallInLoveEasily()
    }
    class SerialDater {
      +scheduleMultipleDates()
      +masterSmallTalk()
    }
    DatingAppUser <|-- HopelessRomantic
    DatingAppUser <|-- SerialDater

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