关于 mermaid-diagrams
使用 Mermaid Markdown 语法创建图表和可视化内容的参考技能，涵盖常见图表类型、语法、样式及 React 渲染示例。
主要功能
- 01流程图与子图
- 02时序图、类图和 ER 图
- 03甘特图、状态图和用户旅程图
- 04思维导图、饼图和 Git 图
- 05样式设置与 React 渲染示例
适用场景
- 01梳理应用流程和决策路径
- 02记录系统交互与数据模型
- 03呈现项目时间线和状态变化
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/mermaid-diagrams确认已加载。
详细介绍
Mermaid 图表
使用 Mermaid Markdown 语法创建图表和可视化内容。
快速参考
Mermaid 图表使用以 mermaid 为语言标识符的 Markdown 代码块编写。
流程图
flowchart TD
A[Start] --> B{Is it valid?}
B -->|Yes| C[Process data]
B -->|No| D[Show error]
C --> E[Save to database]
D --> F[Return to input]
E --> G[End]
F --> A
流程图语法
flowchart TD %% TD = top-down, LR = left-right, RL, BT
A[Rectangle] %% Square brackets = rectangle
B(Rounded) %% Parentheses = rounded rectangle
C{Diamond} %% Curly braces = diamond/decision
D[[Subroutine]] %% Double brackets = subroutine
E[(Database)] %% Cylinder shape
F((Circle)) %% Double parentheses = circle
G>Asymmetric] %% Flag shape
A --> B %% Arrow
B --- C %% Line without arrow
C -.-> D %% Dotted arrow
D ==> E %% Thick arrow
E --text--> F %% Arrow with label
F -->|label| G %% Alternative label syntax
子图
flowchart TB
subgraph Frontend
A[React App] --> B[Components]
B --> C[Hooks]
end
subgraph Backend
D[API Server] --> E[Database]
end
A -->|HTTP| D
时序图
sequenceDiagram
participant U as User
participant C as Client
participant S as Server
participant D as Database
U->>C: Click submit
C->>S: POST /api/data
activate S
S->>D: INSERT query
D-->>S: Success
S-->>C: 200 OK
deactivate S
C-->>U: Show success message
时序图语法
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Solid line with arrow
A-->>B: Dotted line with arrow
A-)B: Solid line with open arrow
A--)B: Dotted line with open arrow
activate B %% Activation box
B->>A: Response
deactivate B
Note over A,B: This is a note
Note right of A: Note on right
alt Condition true
A->>B: Do this
else Condition false
A->>B: Do that
end
loop Every minute
A->>B: Ping
end
opt Optional action
A->>B: Maybe do this
end
类图
classDiagram
class User {
+String id
+String name
+String email
+login()
+logout()
}
class Order {
+String id
+Date createdAt
+calculateTotal()
}
class Product {
+String id
+String name
+Number price
}
User "1" --> "*" Order : places
Order "*" --> "*" Product : contains
类图语法
classDiagram
class ClassName {
+publicField
-privateField
#protectedField
~packageField
+publicMethod()
-privateMethod()
}
ClassA <|-- ClassB : Inheritance
ClassC *-- ClassD : Composition
ClassE o-- ClassF : Aggregation
ClassG --> ClassH : Association
ClassI ..> ClassJ : Dependency
ClassK ..|> ClassL : Realization
实体关系图
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
USER {
string id PK
string email UK
string name
datetime created_at
}
ORDER {
string id PK
string user_id FK
datetime created_at
string status
}
PRODUCT {
string id PK
string name
decimal price
}
LINE_ITEM {
string id PK
string order_id FK
string product_id FK
int quantity
}
ER 图基数
||--|| One to one
||--o{ One to zero or more
||--|{ One to one or more
}o--o{ Zero or more to zero or more
甘特图
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Planning
Requirements :a1, 2024-01-01, 7d
Design :a2, after a1, 14d
section Development
Backend API :b1, after a2, 21d
Frontend :b2, after a2, 28d
Integration :b3, after b1, 7d
section Testing
QA Testing :c1, after b3, 14d
Bug Fixes :c2, after c1, 7d
section Launch
Deployment :milestone, after c2, 0d
状态图
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Submit
Processing --> Success: Valid
Processing --> Error: Invalid
Success --> Idle: Reset
Error --> Idle: Retry
Success --> [*]
饼图
pie title Browser Market Share
"Chrome" : 65
"Safari" : 19
"Firefox" : 10
"Edge" : 4
"Other" : 2
Git 图
gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
branch hotfix
checkout hotfix
commit
checkout main
merge hotfix
用户旅程
journey
title User Checkout Experience
section Browse
View products: 5: User
Add to cart: 4: User
section Checkout
Enter shipping: 3: User
Enter payment: 2: User
Confirm order: 5: User
section Post-Purchase
Receive confirmation: 5: User, System
Track shipment: 4: User
思维导图
mindmap
root((Project))
Frontend
React
TypeScript
Tailwind
Backend
Node.js
PostgreSQL
Redis
DevOps
Docker
Kubernetes
CI/CD
样式
flowchart LR
A[Start]:::green --> B[Process]:::blue --> C[End]:::red
classDef green fill:#22c55e,color:#fff
classDef blue fill:#3b82f6,color:#fff
classDef red fill:#ef4444,color:#fff
React 组件
import mermaid from 'mermaid';
import { useEffect, useRef } from 'react';
mermaid.initialize({
startOnLoad: true,
theme: 'neutral', // default, dark, forest, neutral
securityLevel: 'loose',
});
interface MermaidProps {
chart: string;
id?: string;
}
export function Mermaid({ chart, id = 'mermaid-diagram' }: MermaidProps) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
mermaid.render(id, chart).then(({ svg }) => {
if (ref.current) {
ref.current.innerHTML = svg;
}
});
}
}, [chart, id]);
return <div ref={ref} className="mermaid-container" />;
}
// Usage
<Mermaid
chart={`
flowchart LR
A --> B --> C
`}
/>
提示
- 方向：使用
TD（从上到下）、LR（从左到右）、BT（从下到上）、RL（从右到左） - 注释：使用
%%添加注释 - 引号：标签中包含特殊字符时使用引号：
A["Label with (parentheses)"] - 换行：使用
<br/>创建多行标签
资源
- Mermaid 文档：https://mermaid.js.org/
- 在线编辑器：https://mermaid.live
- GitHub 支持：Mermaid 可在 GitHub Markdown 中原生使用
评论
支持 Markdown