Mermaid/PlantUML 业务流程图与原型草图自动生成模块

模块概述

本模块是端到端研发自动化系统的核心可视化组件，能够根据自然语言需求或结构化数据，自动生成多种类型的技术图表和 UI 原型草图。支持从需求分析 → PRD 设计 → 技术方案 → API 开发 → 测试验证 → CI/CD 部署的全流程自动化图表生成。

🎯 核心能力

自然语言解析 → 自动图表生成
支持 12+ 种图表类型
Mermaid & PlantUML 双引擎
UI 原型草图自动生成
C4 架构建模支持
OpenClaw/Claude Code 集成

⚡ 技术特性

Python 3.12 原生实现
零依赖轻量级设计
实时预览与导出
模板化快速生成
人机协同工作流
RESTful API 接口

🔧 应用场景

需求分析与 PRD 设计
技术方案评审
API 接口协议设计
系统架构规划
测试用例可视化
CI/CD 流水线设计

支持的图表类型

流程图

时序图

类图

架构图

UI 原型

📊 流程图 (Flowchart)

用于展示业务流程、工作流程、决策树等。

flowchart LR A[用户需求] --> B[需求分析] B --> C[功能拆解] C --> D[技术方案设计] D --> E[API 设计] E --> F[开发实现] F --> G[测试验证] G --> H[部署上线] style A fill:#e1f5fe style B fill:#fff3e0 style C fill:#f3e5f5 style D fill:#e8f5e9 style E fill:#ffebee style F fill:#fff8e1 style G fill:#fce4ec style H fill:#e0f2f1

%%{init: {'theme': 'neutral'}}%%
flowchart LR
    A[用户需求] --> B[需求分析]
    B --> C[功能拆解]
    C --> D[技术方案设计]
    D --> E[API 设计]
    E --> F[开发实现]
    F --> G[测试验证]
    G --> H[部署上线]
                

⏱️ 时序图 (Sequence Diagram)

展示对象之间的交互顺序和时间关系。

sequenceDiagram participant User as 👤 用户 participant PM as 📋 产品经理 participant Dev as 💻 开发 participant Test as 🧪 测试 participant Ops as 🚀 运维 User->>PM: 提交需求 PM->>Dev: PRD 评审 Dev->>Dev: 技术方案设计 Dev->>Test: 接口协议 Test->>Ops: 测试报告 Ops->>User: 上线通知

%%{init: {'theme': 'forest'}}%%
sequenceDiagram
    participant User as 👤 用户
    participant PM as 📋 产品经理
    participant Dev as 💻 开发
    participant Test as 🧪 测试
    participant Ops as 🚀 运维
    
    User->>PM: 提交需求
    PM->>Dev: PRD 评审
    Dev->>Dev: 技术方案设计
    Dev->>Test: 接口协议
    Test->>Ops: 测试报告
    Ops->>User: 上线通知
                

🏗️ 类图 (Class Diagram)

展示系统的类结构和关系。

classDiagram class UserController { <> +getUser() +createUser() +updateUser() } class UserService { <> +validateUser() +saveUser() } class UserDAO { <> +findById() +insert() +update() } class User { <> +id: String +name: String +email: String } UserController --> UserService UserService --> UserDAO UserDAO --> User

🏛️ 架构图 (Architecture)

C4 模型系统架构设计图。

flowchart TB subgraph Client["🖥️ 客户端层"] Web[Web 应用] Mobile[移动应用] API_Client[API 客户端] end subgraph Gateway["🔌 网关层"] LB[负载均衡] API_GW[API Gateway] Auth[认证服务] end subgraph Services["⚙️ 服务层"] UserSvc[用户服务] OrderSvc[订单服务] PaySvc[支付服务] NotifSvc[通知服务] end subgraph Data["💾 数据层"] MySQL[(MySQL)] Redis[(Redis)] MQ[消息队列] end Client --> Gateway Gateway --> Services Services --> Data

📱 UI 原型草图

ASCII 艺术风格的界面原型。

╔══════════════════════════════════════════════════════════════════════════════╗ ║ 🚀 研发自动化平台 ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ [首页] [需求] [开发] [测试] [部署] [监控] ║ ╠══════════════════════════════════════════════════════════════════════════════╣ ║ ║ ║ ┌────────────────────────────┐ ┌────────────────────────────┐ ║ ║ │ 📋 需求管理 │ │ 💻 开发任务 │ ║ ║ │ │ │ │ ║ ║ │ • 需求收集 │ │ • 代码开发 │ ║ ║ │ • 需求分析 │ │ • 代码审查 │ ║ ║ │ • 优先级排序 │ │ • 单元测试 │ │ ║ ║ │ │ │ │ ║ ║ └────────────────────────────┘ └────────────────────────────┘ ║ ║ ║ ║ ┌────────────────────────────┐ ┌────────────────────────────┐ ║ ║ │ 🧪 测试用例 │ │ 🚀 部署管理 │ ║ ║ │ │ │ │ ║ ║ │ • 自动化测试 │ │ • CI/CD 流水线 │ ║ ║ │ • 性能测试 │ │ • 容器编排 │ ║ ║ │ • 安全扫描 │ │ • 灰度发布 │ ║ ║ │ │ │ │ ║ ║ └────────────────────────────┘ └────────────────────────────┘ ║ ║ ║ ║ [开始新任务 ▶] ║ ║ ║ ╚══════════════════════════════════════════════════════════════════════════════╝

端到端研发自动化工作流

1

需求输入 (Natural Language)

通过自然语言描述需求，系统自动解析并识别关键信息。

示例输入:

2

智能解析 (AI Parsing)

OpenClaw + Claude Code 联合解析，提取实体、关系和流程。

{
  "original_text": "电商订单管理系统",
  "detected_entities": ["订单", "支付", "物流"],
  "detected_types": ["flowchart", "sequence", "architecture"],
  "suggested_templates": ["api_design", "architecture_design"]
}

3

图表生成 (Diagram Generation)

根据解析结果，自动生成 Mermaid/PlantUML 图表代码。

4

人机协同 (Human-in-the-Loop)

支持人工审核、调整和确认，确保准确性。

5

输出交付 (Export & Deploy)

导出为标准格式，集成到文档系统或部署平台。

Python 代码示例

# 导入模块
from diagram_generator import (
    MermaidGenerator, 
    PlantUMLGenerator, 
    UIPrototypeGenerator,
    RDAutomationAdapter
)

# 示例 1: 生成流程图
mermaid_gen = MermaidGenerator()
flowchart = (mermaid_gen
    .set_config(title="研发流程", direction="LR")
    .add_node("req", "需求分析", "rect", {"fill": "#e1f5fe"})
    .add_node("dev", "开发实现", "rect", {"fill": "#ffebee"})
    .add_node("test", "测试验证", "rect", {"fill": "#e8f5e9"})
    .add_edge("req", "dev", "输出 PRD")
    .add_edge("dev", "test", "提测")
    .generate_flowchart())

print(flowchart)

# 示例 2: 生成 PlantUML C4 图
plantuml_gen = PlantUMLGenerator()
c4_context = plantuml_gen.generate_c4_context(
    systems=[
        {'id': 'user', 'type': 'person', 'label': '用户'},
        {'id': 'app', 'type': 'system', 'label': '应用系统'}
    ],
    relationships=[
        {'source': 'user', 'target': 'app', 'label': '使用'}
    ]
)

# 示例 3: 生成 UI 原型
ui_gen = UIPrototypeGenerator()
ui_gen.add_component('header', {'x': 10, 'y': 2, 'width': 60}, 
                    {'text': '研发平台'})
ui_gen.add_component('nav', {'x': 10, 'y': 5, 'width': 60},
                    {'items': ['首页', '需求', '开发']})
ascii_mockup = ui_gen.generate_ascii_mockup(80, 25)

# 示例 4: OpenClaw 适配器
adapter = RDAutomationAdapter()
parsed = adapter.parse_natural_language("创建用户登录流程")
result = adapter.generate_from_template("requirement_to_prd")
            

🎨 交互式图表生成器

快速模板

生成选项

图表类型:

主题:

🏗️ 技术架构

flowchart TB subgraph Input["📥 输入层"] NL[自然语言] JSON[JSON 配置] YAML[YAML 文件] end subgraph Core["⚙️ 核心引擎"] Parser[解析器] MermaidGen[Mermaid 生成器] PlantUMLGen[PlantUML 生成器] UIGen[UI 原型生成器] end subgraph Adapter["🔌 适配器层"] OpenClaw[OpenClaw API] Claude[Claude Code API] Template[模板引擎] end subgraph Output["📤 输出层"] SVG[SVG 图片] PNG[PNG 图片] MD[Markdown] PDF[PDF 文档] end Input --> Core Core --> Adapter Adapter --> Output

🚀 Mermaid/PlantUML 业务流程图与原型草图自动生成模块