📊 Diagram Generator

Mermaid/PlantUML 业务流程图 & 原型草图自动生成

从 PRD/用户故事/API 协议 → 自动可视化图表 | 支持 AI 增强 | 多格式导出

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 整体流程图

1. 输入文本
PRD/用户故事/API
2. 解析分析
提取关键信息
3. 选择模式
AI/规则引擎
4. 生成图表
Mermaid 代码
5. 导出文件
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 查看方式

👁️ 如何查看 Mermaid 图表
  • 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 管理 ⭐⭐⭐⭐⭐