Mermaid Chart Documentation

Quickly learn how to create various diagrams using Mermaid syntax

Mermaid syntax quick start

Choose a diagram below, copy its plain-text source, and select Try in Editor to preview it. For flowcharts, graph TD and flowchart TD both create a top-down layout; graph LR runs from left to right. Use node IDs to connect steps and quotes around labels containing punctuation. Paste the source without Markdown code fences.

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 graph (TD = Top Down)
A[Text] creates a rectangular node
B{Text} creates a diamond node (condition)
--> creates an arrow connection
-->|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 for synchronous messages
A-->>B: Text creates a dashed arrow for return/asynchronous messages

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 the start or end state
A --> B creates a transition from A to B
A --> B: Text creates a labeled transition

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 defines the relationship description

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 defines a project section
Task Name: ID, Start Date, Duration/End Date defines a task, its start date, and its duration or end date
done/active indicates task status
after ID indicates after another task

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 pie chart title
"Label" : Value defines a slice of 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