Mermaid Chart Documentation

Quickly learn how to create various diagrams using Mermaid syntax

Flowchart

graph TD
  A[🚀 Start Project] --> B{📋 Have Requirements?}
  B -->|✅ Yes| C[💻 Start Coding]
  B -->|❌ No| D[📝 Gather Requirements]
  D --> B
  C --> E{🧪 Tests Pass?}
  E -->|✅ Yes| F[🎉 Deploy!]
  E -->|❌ No| G[🔧 Fix Bugs]
  G --> 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 U as 👤 User
  participant S as 🖥️ System
  participant D as 💾 Database
  
  U->>S: 📝 Submit Request
  S->>D: 🔍 Query Data
  D-->>S: 📊 Return Results
  S-->>U: ✅ Display 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
    +int age
    +makeSound()
  }
  class Dog {
    +String breed
    +bark()
    +fetch()
  }
  class Cat {
    +String color
    +meow()
    +sleep()
  }
  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
  [*] --> Idle
  Idle --> Processing: Start Task
  Processing --> Success: Complete
  Processing --> Error: Failed
  Error --> Processing: Retry
  Success --> [*]

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
  USER ||--o{ ORDER : places
  ORDER ||--|{ ITEM : contains
  USER ||--o{ REVIEW : writes
  ITEM ||--o{ REVIEW : receives

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 Timeline
  dateFormat YYYY-MM-DD
  section Planning
  Requirements :done, req, 2024-01-01, 7d
  Design :active, des, after req, 10d
  section Development
  Coding :dev, after des, 14d
  Testing :test, after dev, 7d
  section Launch
  Deploy :deploy, after test, 3d

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 📊 Time Distribution
  "💻 Coding" : 40
  "🔍 Debugging" : 25
  "📚 Learning" : 20
  "☕ Coffee Break" : 15

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