Generate various diagrams using Mermaid syntax (flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, pie charts, ER diagrams, mind ma...
---
name: mermaid-chart
description: Generate various diagrams using Mermaid syntax (flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, pie charts, ER diagrams, mind maps, timelines, C4 architecture diagrams, user journey maps, Git graphs, Sankey diagrams, quadrant charts, etc.). Supports inline rendering in Markdown.
---
# Mermaid Diagram Generation
Generate diagrams based on text syntax, directly renderable on platforms that support Mermaid such as GitHub, Notion, and Obsidian.
## Use Cases
Use when users need to draw diagrams, create flowcharts, draw architecture diagrams, create sequence diagrams, draw Gantt charts, create class diagrams, make mind maps, draw state machines, generate ER diagrams, create pie charts, draw user journey maps, make Git branch diagrams, or draw C4 architecture diagrams.
## Supported Diagram Types Quick Reference
| Type | Syntax Keyword | Purpose |
|------|---------------|---------|
| Flowchart | `flowchart` / `graph` | Processes, decisions, logical branches |
| Sequence Diagram | `sequenceDiagram` | API calls, message interactions, system communication |
| Class Diagram | `classDiagram` | OOP design, data models, interface relationships |
| State Diagram | `stateDiagram-v2` | State machines, lifecycles, workflow states |
| ER Diagram | `erDiagram` | Database table relationships, entity modeling |
| Gantt Chart | `gantt` | Project scheduling, milestones, task dependencies |
| Pie Chart | `pie` | Proportions, data composition |
| User Journey | `journey` | User experience maps, scenario paths |
| Git Graph | `gitGraph` | Branch strategies, commit history |
| Mind Map | `mindmap` | Knowledge structures, brainstorming organization |
| Timeline | `timeline` | Historical evolution, milestone timelines |
| Sankey Diagram | `sankey` | Traffic flows, energy transfers |
| C4 Architecture | `C4Context` etc. | System context, container diagrams (requires `-- C4` plugin) |
| Quadrant Chart | `quadrantChart` | Two-dimensional four-quadrant analysis |
| Block Diagram | `block` | Block diagrams |
## Output Specifications
Follow these specifications when generating Mermaid code:
1. **Wrap in ` ```mermaid ` code blocks** for direct rendering
2. **Prefer `flowchart` over `graph`** (`graph` is deprecated)
3. **Use semantic node IDs** (e.g., `userLogin` instead of `A`)
4. **Add comments for complex diagrams** (`%% comment content`)
5. **Wrap Chinese nodes in quotes** (e.g., `Start["Start"]`)
6. **Provide both concise and full versions** for the user to choose from
7. **Define styles centrally with `classDef`** rather than scattering inline styles
## Syntax Highlights by Type
### Flowchart `flowchart`
```
flowchart TD
Start["Start"] --> Input[/"Input Data"/]
Input --> Check{"Validation Passed?"}
Check -->|Yes| Process["Process Data"]
Check -->|No| Error["Error"]
Process --> Output[/"Output Results"/]
Output --> End["End"]
```
Node Shape Quick Reference:
```
["Rectangle"] (/Parallelogram/) ["Rounded Rectangle"]
(("Circle")) {"Diamond"} [["Subroutine"]]
[("Database")] >"Tag"] ((("Double Circle"))
```
Directions: `TD`(top→down) `LR`(left→right) `BT`(bottom→top) `RL`(right→left)
### Sequence Diagram `sequenceDiagram`
```
sequenceDiagram
actor U as User
participant F as Frontend
participant B as Backend
participant D as Database
U->>F: Click Login
F->>B: POST /api/login
B->>D: Query User
D-->>B: Return User Data
B-->>F: Return Token
F-->>U: Redirect to Home
```
Arrow Types: `->>` solid `-->>` dashed `->` no arrowhead `-->` dashed no arrowhead `-x` cross tail `-)` async
Activation: `activate B` / `deactivate B`
Notes: `Note right of B: Description`
Loops: `loop condition ... end`
Conditions: `alt condition ... else condition ... end`
Parallel: `par parallel1 ... and parallel2 ... end`
### Gantt Chart `gantt`
```
gantt
title Project Schedule
dateFormat YYYY-MM-DD
section Design
Requirements Analysis :done, req, 2026-01-06, 5d
UI Design :active, ui, after req, 7d
section Development
Backend Development :dev1, after ui, 14d
Frontend Development :dev2, after ui, 14d
section Testing
Integration Testing :crit, test, after dev1, 5d
Milestone :milestone, m1, 2026-02-15, 0d
```
Status Markers: `done` `active` `crit` `milestone`
Date Formats: `YYYY-MM-DD`, `after <taskId>`, `<N>d`
### Class Diagram `classDiagram`
```
classDiagram
class Animal {
+String name
+int age
+makeSound() void
}
class Dog {
+String breed
+fetch() void
}
class Cat {
+String color
+purr() void
}
Animal <|-- Dog : Inheritance
Animal <|-- Cat : Inheritance
```
Relationships: `<|--` inheritance, `*--` composition, `o--` aggregation, `-->` association, `..>` dependency, `..|>` realization
Visibility: `+` public, `-` private, `#` protected, `~` package
### State Diagram `stateDiagram-v2`
```
stateDiagram-v2
[*] --> PendingPayment
PendingPayment --> Paid : Payment Successful
PendingPayment --> Cancelled : Timeout/Manual Cancel
Paid --> Shipped : Warehouse Dispatch
Shipped --> Completed : Confirm Receipt
Shipped --> Returning : Request Return
Returning --> Refunded : Refund Complete
Cancelled --> [*]
Completed --> [*]
Refunded --> [*]
state Paid {
[*] --> Pending
Pending --> Processing
Processing --> [*]
}
```
### ER Diagram `erDiagram`
```
erDiagram
USER {
int id PK
string name
string email UK
}
ORDER {
int id PK
int userId FK
float amount
datetime createdAt
}
USER ||--o{ ORDER : "places"
```
Relationships: `||--||` one-to-one, `||--o{` one-to-many, `}o--o{` many-to-many, `||--o|` one-to-one-or-zero
### Pie Chart `pie`
```
pie
title User Source Distribution
"Search Engine" : 45.2
"Direct Visit" : 28.7
"Social Media" : 15.3
"Email Marketing" : 10.8
```
### Mind Map `mindmap`
```
mindmap
root((Project Architecture))
Frontend
React
State Management
UI Component Library
Backend
API Gateway
Microservices
User Service
Order Service
Database
MySQL
Redis
DevOps
Docker
CI/CD
```
Indentation depth determines hierarchy. Shapes: `(())` circle, `[])` rounded, `))` cloud, `))` bang, `{{}}` hexagon
### Timeline `timeline`
```
timeline
title Project Milestones
2024-Q1 : Project Launch : Tech stack finalized
2024-Q2 : MVP Development : Core features live
2024-Q3 : Beta Testing : Collect user feedback
2024-Q4 : Official Release : Marketing push begins
```
### User Journey `journey`
```
journey
title User Shopping Journey
section Discovery
Browse Homepage: 4: User
Search Products: 3: User
section Decision
View Details: 5: User
Compare Prices: 2: User
section Purchase
Add to Cart: 5: User
Complete Payment: 4: User, System
```
Score range 1-5, participants comma-separated.
### Git Graph `gitGraph`
```
gitGraph
commit id: "Initial"
branch develop
checkout develop
commit id: "Feature A"
branch feature/B
commit id: "Feature B-1"
commit id: "Feature B-2"
checkout develop
merge feature/B
checkout main
merge develop tag: "v1.0"
```
### C4 Architecture Diagram
```mermaid
C4Context
Person(user, "User", "End user of the system")
System(app, "Web Application", "Provides core business functionality")
System_Ext(payment, "Payment Gateway", "Third-party payment service")
SystemDb(db, "Database", "Stores business data")
Rel(user, app, "Uses")
Rel(app, db, "Reads/Writes")
Rel(app, payment, "Calls payment", "HTTPS")
```
Requires declaring the `-- C4` plugin reference before the code block. More C4 levels: `C4Container`, `C4Component`, `C4Deployment`.
See [references/syntax-reference.md](references/syntax-reference.md) for detailed syntax reference.
## Styles and Themes
### Theme Switching
```
%%{init: {'theme': 'dark'}}%%
%%{init: {'theme': 'forest'}}%%
%%{init: {'theme': 'neutral'}}%%
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#4a90d9'}}}%%
```
Available themes: `default` `dark` `forest` `neutral` `base`
### Custom classDef (Flowchart/Class Diagram)
```
classDef primary fill:#4a90d9,stroke:#333,color:#fff
classDef danger fill:#e74c3c,stroke:#333,color:#fff
class Start,End primary
class Error danger
```
## Workflow
1. **Clarify Requirements** — Ask: What type of diagram? What relationships/flow to express? How many participants/nodes?
2. **Draft First** — Provide a concise version of the code; confirm the structure is correct
3. **Refine Details** — Complete node names, relationship labels, styling
4. **Output for Rendering** — Wrap in ` ```mermaid `, ready to paste into supported platforms
## Platform Compatibility Notes
- **GitHub/GitLab** — Native support for ` ```mermaid `
- **Notion** — Requires Mermaid plugin or embedding images from mermaid.live
- **Obsidian** — Native support
- **Confluence** — Requires plugin
- **Feishu** — No direct rendering support; export SVG/PNG from mermaid.live and insert
- **WeChat/DingTalk** — Not supported; use live editor to export imagesdon't have the plugin yet? install it then click "run inline in claude" again.