Authoritative reference for Mermaid diagram syntax. Provides diagram types, syntax patterns, examples, and platform integration guidance for generating accurate Mermaid diagrams.
Limited to specific tools
Additional assets for this skill
This skill is limited to using the following tools:
Mermaid is a JavaScript-based diagramming tool that renders diagrams from Markdown-inspired text definitions. Diagrams render as SVG directly in browsers and are natively supported by GitHub, GitLab, Azure DevOps, Obsidian, and Notion.
Key advantages:
Limitations:
| Type | Keyword | Best For |
|---|---|---|
| Flowchart | flowchart or graph | Process flows, decision trees, workflows |
| Sequence | sequenceDiagram | API calls, request/response flows, interactions |
| Class | classDiagram | OOP structures, inheritance, relationships |
| State | stateDiagram-v2 | State machines, lifecycle states |
| ER | erDiagram | Database schemas, entity relationships |
| Gantt | gantt | Project timelines, schedules |
| Pie | pie | Distribution, proportions |
| Git Graph | gitGraph | Branching strategies, commit history |
| C4 Context | C4Context | System architecture (experimental) |
| Mindmap | mindmap | Hierarchical ideas, brainstorming |
| Timeline | timeline | Chronological events |
| Quadrant | quadrantChart | 2x2 matrices, prioritization |
Mermaid diagrams are embedded in Markdown using fenced code blocks:
```mermaid
flowchart TD
A[Start] --> B[End]
```
Platform support:
Flowcharts visualize processes, decisions, and workflows.
| Keyword | Direction |
|---|---|
TB or TD | Top to Bottom |
BT | Bottom to Top |
LR | Left to Right |
RL | Right to Left |
flowchart TD
A[Rectangle] --> B(Rounded)
B --> C([Stadium])
C --> D[[Subroutine]]
D --> E[(Database)]
E --> F((Circle))
F --> G>Asymmetric]
G --> H{Diamond}
H --> I{{Hexagon}}
I --> J[/Parallelogram/]
J --> K[\Parallelogram Alt\]
K --> L[/Trapezoid\]
L --> M[\Trapezoid Alt/]
flowchart LR
A --> B
A --- C
A -.- D
A -.-> E
A ==> F
A --text--> G
A -.text.-> H
A ==text==> I
| Syntax | Description |
|---|---|
--> | Arrow |
--- | Line (no arrow) |
-.- | Dotted line |
-.-> | Dotted arrow |
==> | Thick arrow |
--text--> | Arrow with label |
flowchart TB
subgraph Frontend
A[React App] --> B[API Client]
end
subgraph Backend
C[API Server] --> D[Database]
end
B --> C
flowchart TD
Start([Start]) --> Input[/User Input/]
Input --> Validate{Valid?}
Validate -->|Yes| Process[Process Data]
Validate -->|No| Error[Show Error]
Error --> Input
Process --> Save[(Save to DB)]
Save --> End([End])
Sequence diagrams show interactions between participants over time.
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Hello Bob
B-->>A: Hi Alice
| Syntax | Description |
|---|---|
-> | Solid line without arrow |
--> | Dotted line without arrow |
->> | Solid line with arrow |
-->> | Dotted line with arrow |
-x | Solid line with cross |
--x | Dotted line with cross |
-) | Solid line with open arrow (async) |
--) | Dotted line with open arrow (async) |
sequenceDiagram
participant U as User
actor A as Admin
participant S as Server
participant D as Database
sequenceDiagram
participant C as Client
participant S as Server
C->>+S: Request
Note right of S: Processing...
S-->>-C: Response
Note over C,S: Communication complete
sequenceDiagram
participant U as User
participant S as Server
participant DB as Database
U->>S: Login Request
alt Valid Credentials
S->>DB: Verify
DB-->>S: Success
S-->>U: Token
else Invalid Credentials
S-->>U: Error 401
end
opt Remember Me
S->>DB: Store Session
end
loop Health Check
S->>DB: Ping
DB-->>S: Pong
end
sequenceDiagram
autonumber
actor U as User
participant FE as Frontend
participant API as API Server
participant Auth as Auth Service
participant DB as Database
U->>FE: Click Login
FE->>+API: POST /login
API->>+Auth: Validate Token
Auth->>DB: Check User
DB-->>Auth: User Data
Auth-->>-API: Valid
API-->>-FE: 200 OK + JWT
FE-->>U: Redirect to Dashboard
Class diagrams show object-oriented structures and relationships.
classDiagram
class Animal {
+String name
+int age
+makeSound() void
-sleep() void
#eat(food) bool
}
| Symbol | Meaning |
|---|---|
+ | Public |
- | Private |
# | Protected |
~ | Package/Internal |
classDiagram
Animal <|-- Dog : Inheritance
Animal <|-- Cat : Inheritance
Dog *-- Leg : Composition
Dog o-- Toy : Aggregation
Dog --> Food : Association
Dog ..> Water : Dependency
Dog ..|> Mammal : Realization
| Syntax | Relationship |
|---|---|
<|-- | Inheritance |
*-- | Composition |
o-- | Aggregation |
--> | Association |
..> | Dependency |
..|> | Realization |
classDiagram
Customer "1" --> "*" Order : places
Order "1" --> "1..*" LineItem : contains
classDiagram
class User {
+String id
+String email
+String passwordHash
+Date createdAt
+authenticate(password) bool
+updateProfile(data) void
}
class Order {
+String id
+Date orderDate
+OrderStatus status
+calculateTotal() Decimal
+cancel() void
}
class OrderItem {
+String productId
+int quantity
+Decimal price
}
class Product {
+String id
+String name
+Decimal price
+int stock
}
User "1" --> "*" Order : places
Order "1" *-- "*" OrderItem : contains
OrderItem "*" --> "1" Product : references
State diagrams show state machines and transitions.
stateDiagram-v2
[*] --> Idle
Idle --> Processing : start
Processing --> Complete : finish
Processing --> Error : fail
Error --> Idle : reset
Complete --> [*]
stateDiagram-v2
[*] --> Active
state Active {
[*] --> Idle
Idle --> Running : start
Running --> Paused : pause
Paused --> Running : resume
Running --> Idle : stop
}
Active --> Terminated : shutdown
Terminated --> [*]
stateDiagram-v2
state fork_state <<fork>>
state join_state <<join>>
[*] --> fork_state
fork_state --> Task1
fork_state --> Task2
Task1 --> join_state
Task2 --> join_state
join_state --> [*]
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : submit
Submitted --> UnderReview : assign_reviewer
state UnderReview {
[*] --> Reviewing
Reviewing --> NeedsChanges : request_changes
NeedsChanges --> Reviewing : resubmit
Reviewing --> Approved : approve
}
UnderReview --> Published : publish
UnderReview --> Rejected : reject
Rejected --> Draft : revise
Published --> [*]
note right of Draft : Initial state
note left of Published : Final state
ER diagrams show database schemas and relationships.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "ordered in"
| Syntax | Meaning |
|---|---|
|| | Exactly one |
o| | Zero or one |
}o | Zero or more |
}| | One or more |
| Syntax | Meaning |
|---|---|
||--|| | One to one |
||--o{ | One to many |
o|--o{ | Zero-or-one to many |
}|--}| | Many to many |
erDiagram
CUSTOMER {
string id PK
string name
string email UK
date created_at
}
ORDER {
string id PK
string customer_id FK
date order_date
decimal total
string status
}
CUSTOMER ||--o{ ORDER : places
erDiagram
USER {
uuid id PK
string email UK
string password_hash
string name
timestamp created_at
timestamp updated_at
}
POST {
uuid id PK
uuid author_id FK
string title
text content
string status
timestamp published_at
}
COMMENT {
uuid id PK
uuid post_id FK
uuid user_id FK
text content
timestamp created_at
}
TAG {
uuid id PK
string name UK
}
POST_TAG {
uuid post_id FK,PK
uuid tag_id FK,PK
}
USER ||--o{ POST : writes
USER ||--o{ COMMENT : writes
POST ||--o{ COMMENT : has
POST ||--o{ POST_TAG : has
TAG ||--o{ POST_TAG : has
Gantt charts show project timelines and dependencies.
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2024-01-01, 7d
Design :a2, after a1, 14d
section Development
Backend :b1, after a2, 21d
Frontend :b2, after a2, 21d
section Testing
Integration :c1, after b1, 7d
UAT :c2, after c1, 7d
gantt
title Task States
dateFormat YYYY-MM-DD
Completed :done, t1, 2024-01-01, 5d
Active :active, t2, after t1, 5d
Future :t3, after t2, 5d
Critical :crit, t4, after t3, 5d
Milestone :milestone, m1, after t4, 0d
Git graphs visualize branching and merge strategies.
gitGraph
commit id: "Initial"
branch develop
checkout develop
commit id: "Feature A start"
commit id: "Feature A done"
checkout main
merge develop id: "Release v1.0"
branch hotfix
commit id: "Critical fix"
checkout main
merge hotfix id: "v1.0.1"
checkout develop
merge main
commit id: "Feature B"
C4 diagrams show software architecture at different levels.
Note: C4 support in Mermaid is experimental and has rendering limitations. For production C4 diagrams, consider PlantUML.
C4Context
title System Context Diagram
Person(user, "User", "A user of the system")
System(system, "My System", "The system being designed")
System_Ext(email, "Email System", "External email provider")
Rel(user, system, "Uses")
Rel(system, email, "Sends emails via")
C4Container
title Container Diagram
Person(user, "User", "End user")
Container_Boundary(c1, "My System") {
Container(web, "Web App", "React", "Frontend")
Container(api, "API", "Node.js", "Backend")
ContainerDb(db, "Database", "PostgreSQL", "Stores data")
}
Rel(user, web, "Uses", "HTTPS")
Rel(web, api, "Calls", "REST/JSON")
Rel(api, db, "Reads/Writes", "SQL")
flowchart LR
A[Start]:::green --> B[Process]:::blue --> C[End]:::red
classDef green fill:#9f6,stroke:#333,stroke-width:2px
classDef blue fill:#69f,stroke:#333,stroke-width:2px
classDef red fill:#f66,stroke:#333,stroke-width:2px
%%{init: {'theme': 'dark'}}%%
flowchart LR
A --> B --> C
Available themes: default, dark, forest, neutral, base
Special characters in labels: Use quotes for labels with special characters
flowchart LR
A["Label with (parentheses)"]
Subgraph direction: Subgraphs inherit parent direction unless specified
flowchart TB
subgraph sub [Left to Right]
direction LR
A --> B
end
Node ID restrictions: IDs cannot start with numbers or contain certain characters
nodeA, node_1, myNode1node, my-node (use my_node instead)Line breaks in labels: Use <br/> for line breaks
flowchart TD
A["Line 1<br/>Line 2"]
flowchart TD
A[Box] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[Other]
sequenceDiagram
A->>B: Request
B-->>A: Response
classDiagram
class Name {
+attribute type
+method() return
}
A <|-- B : inherits
stateDiagram-v2
[*] --> State1
State1 --> State2 : event
State2 --> [*]
erDiagram
ENTITY1 ||--o{ ENTITY2 : relationship
ENTITY1 {
type attribute PK
}
Last Updated: 2025-12-06 Mermaid Version: 10.x / 11.x