| name | diagram-generator |
| description | Mermaid 绘图技能。用于生成流程图、时序图、架构图、类图、ER图、状态图、甘特图、饼图等。当需要可视化流程、系统架构、数据关系时使用。 |
Mermaid 绘图技能
使用 Mermaid 生成各类图表,适用于技术文档、架构设计、流程说明等场景。
支持的图表类型
| 类型 | 语法 | 适用场景 |
|---|
| 流程图 | flowchart | 业务流程、算法逻辑 |
| 时序图 | sequenceDiagram | API 交互、消息流程 |
| 类图 | classDiagram | 数据模型、OOP 设计 |
| ER 图 | erDiagram | 数据库设计 |
| 状态图 | stateDiagram-v2 | 状态机、生命周期 |
| 甘特图 | gantt | 项目进度、时间线 |
| 饼图 | pie | 数据分布、占比 |
| 架构图 | C4Context | 系统架构 |
流程图(Flowchart)
基本语法
flowchart TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作]
B -->|否| D[其他操作]
C --> E[结束]
D --> E
方向
| 方向 | 说明 |
|---|
TD / TB | 从上到下 |
BT | 从下到上 |
LR | 从左到右 |
RL | 从右到左 |
节点形状
flowchart LR
A[矩形] --> B(圆角矩形)
B --> C([体育场形])
C --> D[[子程序]]
D --> E[(数据库)]
E --> F((圆形))
F --> G>旗帜形]
G --> H{菱形}
H --> I{{六边形}}
样式
flowchart LR
A[节点A] --> B[节点B]
style A fill:#10B981,color:white,stroke:#059669
style B fill:#2563EB,color:white,stroke:#1d4ed8
时序图(Sequence Diagram)
基本语法
sequenceDiagram
participant U as 用户
participant S as 服务器
participant D as 数据库
U->>S: 发送请求
activate S
S->>D: 查询数据
D-->>S: 返回结果
S-->>U: 响应数据
deactivate S
箭头类型
| 箭头 | 说明 |
|---|
-> | 实线无箭头 |
--> | 虚线无箭头 |
->> | 实线带箭头 |
-->> | 虚线带箭头 |
-x | 实线带叉 |
--x | 虚线带叉 |
循环和条件
sequenceDiagram
participant A as 客户端
participant B as 服务器
loop 每秒
A->>B: 心跳检测
B-->>A: 响应
end
alt 成功
B-->>A: 200 OK
else 失败
B-->>A: 500 Error
end
类图(Class Diagram)
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- Cat
ER 图(Entity Relationship)
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : includes
USER {
int id PK
string name
string email
}
ORDER {
int id PK
int user_id FK
datetime created_at
}
状态图(State Diagram)
stateDiagram-v2
[*] --> 待处理
待处理 --> 进行中: 开始
进行中 --> 已完成: 完成
进行中 --> 已取消: 取消
已完成 --> [*]
已取消 --> [*]
甘特图(Gantt)
gantt
title 项目进度
dateFormat YYYY-MM-DD
section 第一阶段
需求分析 :a1, 2024-01-01, 7d
系统设计 :a2, after a1, 5d
section 第二阶段
开发实现 :b1, after a2, 14d
测试验收 :b2, after b1, 7d
饼图(Pie)
pie title 技术栈分布
"JavaScript" : 40
"Python" : 30
"Go" : 20
"其他" : 10
生成图片
安装工具
npm install -g @mermaid-js/mermaid-cli
生成命令
mmdc -i diagram.mmd -o diagram.png
mmdc -i diagram.mmd -o diagram.svg
PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser mmdc -i diagram.mmd -o diagram.png
Puppeteer 配置
{
"args": ["--no-sandbox", "--disable-setuid-sandbox"]
}
mmdc -i diagram.mmd -o diagram.png -p puppeteer-config.json
常见问题
Q: 中文乱码
A: 安装中文字体
sudo apt-get install fonts-wqy-microhei
fc-cache -fv
Q: 找不到 Chromium
A: 安装并设置环境变量
sudo apt-get install chromium-browser
export PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
技能作者:小琳 ✨