Mermaid Cheat Sheet v11.13.0
💡 Each diagram example supports one-click copy and live preview. Click "Copy Code" to copy the full code, then paste it in the editor to use.
📊 Basic Diagrams (Most Used)
Flowchart
Mermaid
flowchart TD
%% Node definitions
A[Start]
B{Decision}
C[Process]
D((End))
%% Connections
A --> B
B -->|Yes| C
B -->|No| D
C --> D
%% Subgraph
subgraph Subprocess
C --> E[Step 1]
E --> F[Step 2]
end
Live Preview
Loading...
| Syntax | Description |
|---|---|
flowchart TD | Top-down direction |
flowchart LR | Left-to-right |
A[text] | Rectangle node |
A(text) | Rounded rectangle |
A((text)) | Circle |
A{text} | Diamond (decision) |
A --> B | Solid arrow |
A -.-> B | Dotted arrow |
A ==> B | Thick arrow |
Sequence Diagram
Mermaid
sequenceDiagram
actor User
participant Frontend
participant API
participant Database
User->>Frontend: Click login
Frontend->>API: POST /login
API->>Database: Query user
Database-->API: Return data
API-->Frontend: Return token
loop Retry
API->>Database: Retry query
end
alt User exists
API-->Frontend: Success
else Not found
API-->Frontend: Error
end
Live Preview
Loading...
| Syntax | Description |
|---|---|
A->>B: Message | Solid arrow (send) |
A-->>B: Message | Dashed arrow (return) |
A->>+B: Message | Activate B |
A-->>-B: Message | Deactivate B |
loop Description | Loop |
alt Condition | Alternative |
opt Condition | Optional |
Class Diagram
Mermaid
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+breed
+fetch()
}
Animal <|-- Dog : Inheritance
Dog o-- Toy : Aggregation
Live Preview
Loading...
| Syntax | Description |
|---|---|
class Name { } | Define class |
+attribute | Public |
-attribute | Private |
A <|-- B | Inheritance |
A --* B | Composition |
A --o B | Aggregation |
⚙️ Configuration
Themes & Config
Mermaid
---
config:
theme: forest
look: handDrawn
---
flowchart TD
A[Start] --> B[End]
| Config | Description |
|---|---|
theme default | Default |
theme dark | Dark |
theme forest | Forest |
look: handDrawn | Hand-drawn |
look: classic | Classic |
Complete Diagram List
| Diagram | Syntax | Status |
|---|---|---|
| Flowchart | flowchart | ✅ Stable |
| Sequence | sequenceDiagram | ✅ Stable |
| Class | classDiagram | ✅ Stable |
| State | stateDiagram-v2 | ✅ Stable |
| ER | erDiagram | ✅ Stable |
| Gantt | gantt | ✅ Stable |
| Pie | pie | ✅ Stable |
| Mindmap | mindmap | ✅ Stable |
| Git Graph | gitGraph | ✅ Stable |
| Radar ⭐ | radar-beta | 🔥 New v11.6 |
| Venn ⭐ | venn-beta | 🔥 New v11.13 |
| Ishikawa ⭐ | ishikawa-beta | 🔥 New v11.13 |
💡 Tip: Preview all diagrams at MermZen Editor. Based on Mermaid 11.13.0.