Diagram Generator 概述
Diagram Generator 是一个智能图表生成系统,能够从 PRD 文档、用户故事、API 协议、业务规则等文本输入, 自动生成专业的 Mermaid/PlantUML 图表,包括流程图、序列图、状态图、原型草图等。 该系统是端到端研发自动化流程中的可视化引擎,让需求和技术方案一目了然。
1.1 核心价值
⚡ 自动化生成
从文本描述到可视化图表,无需手动绘制,节省 90%+的图表制作时间。
🤖 AI 增强
利用 Claude AI 理解复杂业务逻辑,智能优化图表布局和样式。
📐 标准化
遵循业界标准的图形符号和配色方案,确保图表专业且易读。
🔄 可维护
基于代码的图表(Diagrams-as-Code),支持版本控制,易于更新和维护。
🌐 多平台
Mermaid 语法被 GitHub、GitLab、Notion、Confluence 等广泛支持。
📦 多格式
支持导出为 Markdown、HTML、SVG、PNG、PDF 等多种格式。
1.2 适用场景
| 场景 | 图表类型 | 输入来源 | 典型用户 |
|---|---|---|---|
| 业务流程梳理 | 流程图/BPMN | PRD 业务流程章节 | 产品经理、业务分析师 |
| 技术方案设计 | 序列图/架构图 | API 协议、技术方案文档 | 架构师、后端开发 |
| 状态机建模 | 状态图 | 业务规则、订单/支付流程 | 后端开发、测试工程师 |
| 数据库设计 | ER 图/类图 | 数据模型定义 | DBA、后端开发 |
| UI/UX 设计 | 原型草图 | UI 需求、页面描述 | UX 设计师、前端开发 |
| 项目规划 | 甘特图/思维导图 | 项目计划、任务列表 | 项目经理、团队负责人 |
核心功能特性
2.1 支持的图表类型
🔀 流程图 (Flowchart)
用于表示业务流程、算法流程、决策树等
- 支持多种节点形状(矩形、圆角、菱形、圆柱等)
- 支持 subgraph 分组
- 支持自定义样式和颜色
- 适用于:业务流程图、泳道图、数据流图
↔️ 序列图 (Sequence Diagram)
用于表示对象间的交互顺序和时间关系
- 支持同步/异步消息
- 支持激活框(activate/deactivate)
- 支持条件分支(alt/opt/break)
- 适用于:API 调用流程、系统交互、用例场景
🔄 状态图 (State Diagram)
用于表示对象的状态变化和转换规则
- 支持初始状态和结束状态
- 支持复合状态
- 支持转换条件和动作标注
- 适用于:订单状态、支付状态、工作流
📋 类图 (Class Diagram)
用于表示系统的静态结构和类之间的关系
- 支持类属性和方法
- 支持继承、实现、关联、聚合、组合关系
- 支持访问修饰符
- 适用于:面向对象设计、代码结构文档
🗄️ ER 图 (Entity Relationship)
用于表示数据库实体和关系
- 支持实体属性和类型
- 支持主键/外键标识
- 支持 1:1、1:N、M:N 关系
- 适用于:数据库设计、数据模型文档
📝 原型草图 (Wireframe)
使用 ASCII 艺术绘制 UI 线框图
- 支持常见 UI 元素(按钮、输入框、图片等)
- 支持多种布局方式
- 快速表达界面结构
- 适用于:早期 UI 构思、快速原型
2.2 双模式引擎
🧠 AI 增强模式
适用场景:复杂业务逻辑、需要优化布局、追求最佳视觉效果
- ✅ 使用 Claude AI 理解业务上下文
- ✅ 智能选择节点形状和颜色
- ✅ 自动优化布局和连线
- ✅ 生成更自然流畅的图表
性能:每个图表 2-5 秒
⚙️ 规则引擎模式
适用场景:简单流程、批量生成、无 API Key 环境
- ✅ 基于预定义模板和规则
- ✅ 确定性的输出结果
- ✅ 无需外部 API 调用
- ✅ 速度快(<0.1 秒/图表)
性能:每个图表 <0.1 秒
图表类型详解
3.1 流程图(Flowchart)
📊 流程图语法示例
flowchart TB
title 电商订单处理流程
subgraph Actor_0["👤 用户"]
用户_0(([浏览商品]))
用户_1([加入购物车])
用户_2([点击结算])
用户_3([完成支付])
end
subgraph Actor_1["🖥️ 系统"]
系统_0{{验证库存}}
系统_1([显示支付页面])
系统_2[(创建订单)]
系统_3[(扣减库存)]
end
用户_0 --> 用户_1
用户_1 --> 用户_2
用户_2 --> 系统_0
系统_0 -- Yes --> 系统_1
系统_0 -- No --> 系统_4([提示库存不足])
系统_1 --> 用户_3
用户_3 --> 系统_2
系统_2 --> 系统_3
classDef start fill:#10b981,color:white
classDef decision fill:#f59e0b,color:white
classDef process fill:#6366f1,color:white
3.2 序列图(Sequence Diagram)
↔️ 序列图语法示例
sequenceDiagram
title POST /api/v1/auth/login
participant U as 用户
participant F as 前端
participant B as 后端
participant D as 数据库
U->>F: 输入手机号和验证码
activate F
F->>B: POST /api/v1/auth/login
activate B
B->>D: 查询用户信息
activate D
D-->>B: 返回用户数据
deactivate D
B->>B: 验证验证码
B->>D: 更新登录时间
B-->>F: 返回 JWT Token
deactivate B
F->>U: 跳转首页
deactivate F
3.3 状态图(State Diagram)
🔄 状态图语法示例
stateDiagram-v2
title 订单状态图
[*] --> 待支付
待支付 --> 已支付:用户支付成功\n更新支付状态
待支付 --> 已取消:用户取消/超时\n释放库存
已支付 --> 配货中:商家确认订单\n生成拣货单
配货中 --> 已发货:打包完成\n打印快递单
已发货 --> 运输中:快递公司揽收\n更新物流信息
运输中 --> 已送达:客户签收\n更新签收状态
已送达 --> 已完成:确认收货/7 天自动确认\n结算货款
已支付 --> 退款中:用户申请退款\n创建退款单
退款中 --> 已退款:退款审核通过\n原路退回
已取消 --> [*]
已完成 --> [*]
已退款 --> [*]
3.4 原型草图(Wireframe)
📝 原型草图示例
+------------------------------------------------------------------------------+ | 用户登录页 | | 用户身份验证入口 | +------------------------------------------------------------------------------+ +------------------------------------------------------------------------------+ | [首页] [产品] [服务] [关于] [登录/注册] | +------------------------------------------------------------------------------+ +------------------------------------------------------------------------------+ | ★ 用户登录 | | | | 欢迎回来!请输入您的手机号和验证码进行登录。 | | | | < 请输入手机号(11 位) > | | | | [ 获取验证码 ] | | | | < 请输入 6 位验证码 > | | | | [ 登录 ] | | | | 还没有账号?立即注册 | 忘记密码? | | | | • 微信登录 | | • 支付宝登录 | | • 微博登录 | +------------------------------------------------------------------------------+ +------------------------------------------------------------------------------+ | © 2026 用户登录页 | 隐私政策 | 服务条款 | 联系我们 | | +------------------------------------------------------------------------------+
工作流程
4.1 整体流程图
PRD/用户故事/API
提取关键信息
AI/规则引擎
Mermaid 代码
MD/HTML/SVG/PNG
4.2 详细步骤说明
| 步骤 | 操作 | 输入 | 输出 | 耗时 |
|---|---|---|---|---|
| Step 1 准备输入 |
收集 PRD、用户故事、API 协议等文本 | 自然语言描述 | 结构化数据 | 5-10 分钟 |
| Step 2 选择图表类型 |
根据内容选择合适的图表类型 | 业务场景 | 图表类型 | <1 分钟 |
| Step 3 配置参数 |
设置方向、样式、主题等参数 | 偏好设置 | DiagramConfig | <1 分钟 |
| Step 4 生成图表 |
调用 AI 或规则引擎生成 Mermaid 代码 | 配置参数 | Mermaid 代码 | 0.1 秒 -5 秒 |
| Step 5 预览调整 |
在 Mermaid Live Editor 中预览并微调 | Mermaid 代码 | 优化后的代码 | 5-10 分钟 |
| Step 6 导出发布 |
导出为 MD/HTML/SVG/PNG/PDF | Mermaid 代码 | 最终文件 | <10 秒 |
示例展示
5.1 生成的文件列表
📄 order_process_flowchart.md
内容:电商订单处理流程图
参与者:用户、系统
节点数:10+
流程图
↔️ login_sequence_diagram.md
内容:登录 API 序列图
参与者:用户、前端、后端、数据库
交互数:8
序列图
🔄 order_state_diagram.md
内容:订单状态图
状态数:10
转换数:9
状态图
📝 login_wireframe.txt
内容:登录页原型草图
UI 元素:8
布局:垂直
原型草图
5.2 查看方式
- VS Code + Mermaid 插件:安装"Markdown Preview Mermaid Support"插件,在 Markdown 文件中直接预览
- GitHub/GitLab:将 .md 文件推送到仓库,自动渲染 Mermaid 图表
- Mermaid Live Editor:访问 https://mermaid.live/,粘贴代码实时预览
- Notion:使用/code 块,选择 Mermaid 语言
- Confluence:安装 Mermaid 插件
使用指南
6.1 快速开始
🚀 安装依赖
# 安装 Anthropic SDK(如需 AI 增强功能) pip install anthropic # 设置 API Key(可选) export ANTHROPIC_API_KEY="sk-ant-api03-..."
📝 基本用法
from diagram_generator import DiagramGenerator
# 1. 创建生成器
generator = DiagramGenerator(
api_key="sk-ant-...", # 或从环境变量读取
enable_ai=True # 启用 AI 增强
)
# 2. 生成流程图
flowchart = generator.generate_flowchart_from_process(
process_name="订单处理流程",
description="从下单到发货的完整流程",
actors=["用户", "系统"],
steps=[
{"actor": "用户", "action": "下单", "type": "start"},
{"actor": "系统", "action": "验证库存", "type": "decision"},
{"actor": "系统", "action": "创建订单", "type": "database"}
],
orientation="TB"
)
# 3. 导出文件
generator.export_to_file(flowchart, "order_flowchart.md", "md")
6.2 最佳实践
| 实践 | 说明 | 效果 |
|---|---|---|
| 保持简洁 | 每个图表聚焦一个主题,避免过于复杂 | ⭐⭐⭐⭐⭐ |
| 使用 subgraph | 用 subgraph 分组相关节点,提高可读性 | ⭐⭐⭐⭐ |
| 统一样式 | 使用一致的配色方案和节点形状 | ⭐⭐⭐⭐ |
| 添加注释 | 使用 note 和 title 提供上下文信息 | ⭐⭐⭐⭐ |
| 版本控制 | 将 Mermaid 代码纳入 Git 管理 | ⭐⭐⭐⭐⭐ |