🚀 Mermaid/PlantUML 业务流程图自动生成模块

基于 OpenClaw + Claude Code 的端到端研发自动化系统

从需求 → PRD 设计 → 技术方案 → API 开发 → AI Coding → 测试 → 部署全流程可视化

📋 模块概述

本模块是一个强大的Mermaid/PlantUML 业务流程图和原型草图自动生成系统, 专为端到端研发自动化流程设计。它支持多种图表类型生成,包括流程图、序列图、活动图、类图以及 UI 原型草图, 能够可视化展示从需求分析到生产部署的完整研发生命周期。

🎯 多图表类型支持

支持 Flowchart、Sequence Diagram、Activity Diagram、Class Diagram、Mindmap、Gantt 等多种图表类型

🤖 AI Agent 协作可视化

自动生成 PM Agent、架构师 Agent、开发 Agent、测试 Agent、DevOps Agent 等角色协作流程图

🎨 UI 原型草图生成

使用 PlantUML Salt 生成 Dashboard、PRD 编辑器、代码审查界面等 UI 原型

⚡ 实时渲染预览

集成 Mermaid.js 实现浏览器端实时渲染,支持交互式查看和导出

🏗️ 核心架构

系统架构图

flowchart LR subgraph Input["输入层"] A[需求文档] B[PRD 规格] C[技术方案] end subgraph Core["核心处理层"] D[MermaidGenerator] E[PlantUMLGenerator] F[RDWorkflowGenerator] end subgraph Output["输出层"] G[Flowchart SVG] H[Sequence Diagram] I[Prototype Sketch] end subgraph Integration["集成层"] J[OpenClaw] K[Claude Code] L[Jenkins CI/CD] end A & B & C --> Core Core --> Output Output --> Integration

核心类说明

类名 功能描述 主要方法
MermaidGenerator 生成 Mermaid 语法图表 add_node(), add_edge(), add_subgraph(), generate()
PlantUMLGenerator 生成 PlantUML 语法图表 generate_sequence_diagram(), generate_class_diagram()
RDWorkflowGenerator 研发工作流专用生成器 generate_end_to_end_workflow(), generate_agent_workflow()
Node 图表节点数据模型 -
Edge 图表边/连接数据模型 -

端到端研发流程

1
需求分析
2
PRD 设计
3
技术方案
4
API 协议
5
AI Coding
6
单元测试
7
集成测试
8
CI/CD
9
Docker
10
K8S 部署
11
UI 自动化
12
生产上线

🤖 研发 Agent 角色

系统包含多个专业化 Agent,协同完成研发全流程:

📊
PM Agent
需求分析与 PRD 设计
🟢 Active
🏗️
架构师 Agent
技术方案设计与评审
🟢 Active
⚙️
后端 Agent
后端服务开发
🟡 Busy
🎨
前端 Agent
前端界面开发
🟢 Active
🔌
API Agent
接口协议设计
🟢 Active
💻
Coding Agent
AI 代码生成 (Claude Code/OpenClaw)
🟢 Active
测试 Agent
单元测试与集成测试
🟢 Active
🚀
DevOps Agent
CI/CD 与容器化部署
🟢 Active
🔍
QA Agent
UI 自动化测试验收
🟢 Active

📊 流程图示例

端到端研发流程图 (Mermaid)

flowchart LR subgraph design_phase[设计阶段] direction TB req((需求分析\nRequirements)) prd[PRD 设计\nProduct Design] backend_design[[后端技术方案\nBackend Design]] frontend_design[[前端技术方案\nFrontend Design]] api_design[/-API 接口协议\nAPI Protocol-/] end subgraph dev_phase[开发阶段] direction TB ai_coding[(AI Coding\n代码生成)] unit_test{{单元测试\nUnit Test}} integration_test{{集成测试\nIntegration Test}} end subgraph deploy_phase[部署阶段] direction TB ci_cd([CI/Jenkins\n持续集成]) docker[(Docker\n容器化)] k8s[(K8S/KubeSphere\n编排部署)] ui_auto_test{{UI 自动化测试\nUI Automation}} deploy(((生产部署\nProduction))) end req ==>|需求评审 | prd prd ==>|技术评审 | backend_design prd ==>|技术评审 | frontend_design backend_design ==>|接口定义 | api_design frontend_design ==>|接口确认 | api_design api_design ==>|代码生成 | ai_coding ai_coding ==>|自动测试 | unit_test unit_test ==>|测试通过 | integration_test integration_test ==>|构建触发 | ci_cd ci_cd ==>|镜像构建 | docker docker ==>|部署配置 | k8s k8s ==>|环境就绪 | ui_auto_test ui_auto_test ==>|验收通过 | deploy classDef designClass fill:#e1f5fe,stroke:#0277bd,stroke-width:2px; classDef devClass fill:#fff3e0,stroke:#ef6c00,stroke-width:2px; classDef deployClass fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px; class req,prd,backend_design,frontend_design,api_design designClass class ai_coding,unit_test,integration_test devClass class ci_cd,docker,k8s,ui_auto_test,deploy deployClass

Agent 协作序列图 (Mermaid)

sequenceDiagram autonumber participant User as 用户 participant PM_Agent as PM Agent
(需求分析) participant Arch_Agent as 架构师 Agent
(方案设计) participant Code_Agent as Coding Agent
(Claude Code/OpenClaw) participant Test_Agent as 测试 Agent participant DevOps_Agent as DevOps Agent User->>PM_Agent: 提交需求描述 PM_Agent->>PM_Agent: 需求分析与拆解 PM_Agent-->>User: 输出 PRD 文档 User->>Arch_Agent: 评审 PRD Arch_Agent->>Arch_Agent: 技术方案设计 Arch_Agent-->>User: 输出技术方案文档 loop 迭代开发 Arch_Agent->>Code_Agent: 任务分配 Code_Agent->>Code_Agent: AI 代码生成 Code_Agent->>Test_Agent: 提交代码 Test_Agent->>Test_Agent: 单元测试 alt 测试通过 Test_Agent-->>Code_Agent: ✅ 通过 else 测试失败 Test_Agent-->>Code_Agent: ❌ 修复建议 Code_Agent->>Code_Agent: 代码修复 end end Code_Agent->>DevOps_Agent: 代码合并 DevOps_Agent->>DevOps_Agent: CI/CD 流水线 DevOps_Agent-->>User: 🎉 验收报告

🌿 PlantUML 示例

端到端研发流程 (PlantUML Activity Diagram)

@startuml
skinparam backgroundColor #F5F5F5
skinparam sequenceMessageAlign center
skinparam participantStyle rectangle
skinparam shadowing false

title 端到端研发自动化流程
footer Generated by Diagram Generator Module

rectangle "需求分析" as req
rectangle "PRD 设计" as prd
rectangle "后端技术方案" as backend
rectangle "前端技术方案" as frontend
rectangle "API 接口协议" as api
database "AI Coding" as coding
rectangle "单元测试" as unit
rectangle "集成测试" as integration
rectangle "CI/Jenkins" as ci
database "Docker" as docker
database "K8S/KubeSphere" as k8s
rectangle "UI 自动化测试" as ui
circle "生产部署" as deploy

req --> prd : 需求评审
prd --> backend : 技术评审
prd --> frontend : 技术评审
backend --> api : 接口定义
frontend --> api : 接口确认
api --> coding : 代码生成
coding --> unit : 自动测试
unit --> integration : 测试通过
integration --> ci : 构建触发
ci --> docker : 镜像构建
docker --> k8s : 部署配置
k8s --> ui : 环境就绪
ui --> deploy : 验收通过

note right of coding
  AI 辅助编码
  支持人机协同
end note

note left of ci
  自动化 CI/CD
  Jenkins Pipeline
end note
@enduml

🎨 UI 原型草图 (PlantUML Salt)

📊 Dashboard 监控中心
@startsalt
{+
  {* "Dashboard | 研发自动化系统监控中心"}
  
  {T
    +{"📊" "项目概览"}
    +{"🚀" "进行中的任务": 12}
    +{"✅" "已完成": 156}
    +{"⚠️" "待处理": 5}
  }
  
  {#FFF3E0
    {* "🔄 当前流程状态"}
    {T
      +{"需求分析": "进行中"}
      +{"PRD 设计": "待开始"}
      +{"技术开发": "等待中"}
      +{"测试验证": "等待中"}
      +{"部署上线": "等待中"}
    }
  }
  
  {"📈" "CI/CD Pipeline 状态"
    {T
      +{"Build": "✅ Success (2m 34s)"}
      +{"Test": "✅ Passed (45 tests)"}
      +{"Deploy": "🔄 Running..."}
    }
  }
  
  {& "🤖 AI Agents 协作状态"
    {T
      +{"PM Agent": "🟢 Active"}
      +{"架构师 Agent": "🟢 Active"}
      +{"后端 Agent": "🟡 Busy"}
      +{"前端 Agent": "🟢 Active"}
      +{"测试 Agent": "🔴 Error"}
      +{"DevOps Agent": "🟢 Active"}
    }
  }
}
@endsalt
📝 PRD 编辑器
@startsalt
{+
  {* "PRD 编辑器 | 产品需求文档"}
  
  {T
    +{"📁" "项目结构"}
    ++{"📄" "1. 产品概述"}
    ++{"📄" "2. 功能需求"}
    +++{"📄" "2.1 用户管理"}
    +++{"📄" "2.2 订单系统"}
    ++{"📄" "3. 非功能需求"}
    ++{"📄" "4. 接口规范"}
  }
  
  {
    {* "📝 编辑区域"}
    {"## 2.1 用户管理\n\n### 功能描述\n- 用户注册与登录\n- 权限管理\n- 个人信息维护"}
  }
  
  {^ "🤖 AI 辅助功能"
    [✨ 智能补全] [🔍 需求检查] 
    [📊 生成流程图] [🤖 生成测试用例]
  }
  
  {<"center"
    [💾 保存] [📤 导出] [👥 评审] [🚀 生成任务]
  }
}
@endsalt
🔍 代码审查界面
@startsalt
{+
  {* "代码审查 | Code Review"}
  
  {T
    +{"📂" "src/api/" }
    ++{"📄" "user_controller.py"}
    ++{"📄" "auth_service.py"}
  }
  
  {
    {#F0F0F0
      {* "📄 user_controller.py - Diff View"}
      {C
        {- "def get_user(user_id):"}
        {+ "def get_user(user_id: int) -> UserDTO:"}
        {+ "    \"\"\"获取用户信息\"\"\""}
        {  "    user = db.query(User).filter("}
        {  "        User.id == user_id"}
        {  "    ).first()"}
        {- "    return user"}
        {+ "    if not user:"}
        {+ "        raise UserNotFoundException(user_id)"}
        {+ "    return UserDTO.from_model(user)"}
      }
    }
  }
  
  {^ "💬 审查意见"
    {"👤 架构师 Agent": "建议添加类型注解"}
    {"👤 测试 Agent": "需要补充单元测试"}
    {"👤 安全 Agent": "注意 SQL 注入风险"}
  }
  
  {<"center"
    [❌ 拒绝] [💬 评论] [✅ 批准合并]
  }
}
@endsalt

💻 API 使用示例

Python 代码示例

from diagram_generator import RDWorkflowGenerator

# 创建工作流生成器
generator = RDWorkflowGenerator()

# 生成端到端研发流程图
workflow = generator.generate_end_to_end_workflow()
print("Mermaid 格式:")
print(workflow["mermaid"])
print("\nPlantUML 格式:")
print(workflow["plantuml"])

# 生成 Agent 协作序列图
agents = generator.generate_agent_workflow()
print("\nAgent 协作图:")
print(agents["mermaid"])

# 生成 UI 原型草图
dashboard = generator.generate_prototype_sketch("dashboard")
pr_editor = generator.generate_prototype_sketch("pr_editor")
code_review = generator.generate_prototype_sketch("code_review")

自定义流程图示例

from diagram_generator import MermaidGenerator, DiagramType, NodeShape

# 创建 Mermaid 生成器
gen = MermaidGenerator(DiagramType.FLOWCHART)
gen.set_direction("LR")

# 添加节点
gen.add_node("start", "开始", shape=NodeShape.ROUND)
gen.add_node("process", "处理数据")
gen.add_node("decision", "是否成功?", shape=NodeShape.RHOMBUS)
gen.add_node("end", "结束", shape=NodeShape.DOUBLE_CIRCLE)

# 添加边
gen.add_edge("start", "process", "初始化")
gen.add_edge("process", "decision", "执行")
gen.add_edge("decision", "end", "是", arrow_type="-->")
gen.add_edge("decision", "process", "否,重试", arrow_type="-->")

# 添加样式类
gen.add_class("highlight", fill="#ffeb3b", stroke="#f57f17")
gen.apply_class(["decision"], "highlight")

# 生成图表
print(gen.generate())

✅ 测试结果

单元测试结果

Tests run: 16

Failures: 0

Errors: 0

Success: ✅ True

所有测试用例通过,模块功能正常!

测试覆盖范围

⚡ 技术特性

🎯 链式调用 API

流畅的链式调用设计,支持方法 chaining,代码更简洁优雅

🎨 丰富的节点形状

支持 30+ 种 Mermaid 节点形状,包括圆形、菱形、圆柱形、六边形等

🌈 灵活的样式系统

支持 classDef 定义样式类,可复用样式,支持内联样式定制

🔗 多样化的连接箭头

支持实线、虚线、粗线、圆圈箭头、交叉箭头等多种箭头类型

📦 Subgraph 分组

支持子图分组,可将相关节点组织在一起,增强可读性

🖱️ 交互功能

支持 click 事件绑定,可添加超链接和 JavaScript 回调

📁 产物文件列表

文件名 类型 描述
diagram_generator.py Python 模块 核心图表生成器模块,包含 MermaidGenerator、PlantUMLGenerator、RDWorkflowGenerator 等类
test_diagram_generator.py 测试文件 完整的单元测试套件,包含 16 个测试用例
diagram_generator_report.html HTML 报告 交互式技术报告文档(本文件)