diagram-generator

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 生成命令 # 生成 PNG mmdc -i diagram.mmd -o diagram.png # 生成 SVG（推荐） mmdc -i diagram.mmd -o diagram.svg # WSL 环境 PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser mmdc -i diagram.mmd -o diagram.png Puppeteer 配置 // puppeteer-config.json { "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 技能作者：小琳 ✨