⚡

图表生成器Skill diagram-generation

图表生成器是一个多格式图表生成工具，能够从文本描述自动创建Mermaid、PlantUML、D2和Graphviz等多种格式的技术图表。支持流程图、序列图、架构图（C4模型）、数据模型、类图、状态图等可视化图表生成，并提供SVG、PNG、PDF等多种导出格式。适用于软件开发文档、技术架构设计、数据可视化、系统分析等场景，帮助开发者和技术文档编写者快速创建专业的技术图表。关键词：图表生成，Mermaid图表，PlantUML，架构图，流程图，数据可视化，技术文档，软件开发工具，自动图表生成，C4模型

架构设计 0 次安装 0 次浏览 更新于 2/26/2026

name: diagram-generation description: 从文本描述生成多格式图表。创建Mermaid、PlantUML、D2和Graphviz图表，包括流程图、序列图、架构图（C4模型）和数据模型。 allowed-tools: Read, Write, Edit, Bash, Glob, Grep backlog-id: SK-006 metadata: author: babysitter-sdk version: “1.0.0”

图表生成技能

从文本描述生成多格式图表。

能力

  • Mermaid图表生成（流程图、序列图、类图、ER图）
  • PlantUML图表创建和渲染
  • D2图表生成
  • Graphviz DOT语言支持
  • 架构图生成（C4模型）
  • Excalidraw集成（手绘风格）
  • 图表可访问性分析
  • SVG/PNG导出与优化

使用场景

在以下情况时调用此技能：

  • 创建架构图
  • 生成序列图
  • 构建数据模型可视化
  • 创建流程图和决策树
  • 以多种格式导出图表

输入参数

参数 类型 必填 描述
type 字符串 是 mermaid、plantuml、d2、graphviz、c4
diagramType 字符串 是 flowchart、sequence、class、er、architecture
source 字符串 否 图表源代码
inputPath 字符串 否 图表源文件路径
outputPath 字符串 是 输出文件路径
format 字符串 否 svg、png、pdf（默认：svg）
theme 字符串 否 样式主题

输入示例

{
  "type": "mermaid",
  "diagramType": "sequence",
  "source": "sequenceDiagram
  Client->>API: Request
  API-->>Client: Response",
  "outputPath": "docs/diagrams/api-flow.svg",
  "format": "svg"
}

Mermaid图表

流程图

flowchart TD
    A[开始] --> B{是否有效？}
    B -->|是| C[处理]
    B -->|否| D[错误]
    C --> E[结束]
    D --> E

序列图

sequenceDiagram
    participant U as 用户
    participant A as API网关
    participant S as 服务
    participant D as 数据库

    U->>A: POST /users
    A->>A: 验证令牌
    A->>S: 创建用户
    S->>D: INSERT用户
    D-->>S: 成功
    S-->>A: 用户已创建
    A-->>U: 201 已创建

类图

classDiagram
    class 用户 {
        +String id
        +String email
        +String name
        +create()
        +update()
        +delete()
    }

    class 订单 {
        +String id
        +Date createdAt
        +Status status
        +process()
        +cancel()
    }

    class 订单项 {
        +String productId
        +int quantity
        +float price
    }

    用户 "1" --> "*" 订单 : 下单
    订单 "1" --> "*" 订单项 : 包含

实体关系图

erDiagram
    用户 ||--o{ 订单 : 下单
    用户 {
        uuid id PK
        string email UK
        string name
        timestamp created_at
    }
    订单 ||--|{ 订单项 : 包含
    订单 {
        uuid id PK
        uuid user_id FK
        enum status
        timestamp created_at
    }
    订单项 {
        uuid id PK
        uuid order_id FK
        uuid product_id FK
        int quantity
    }
    产品 ||--o{ 订单项 : "被订购"
    产品 {
        uuid id PK
        string name
        decimal price
    }

状态图

stateDiagram-v2
    [*] --> 草稿
    草稿 --> 待审核: 提交
    待审核 --> 已批准: 批准
    待审核 --> 已拒绝: 拒绝
    已拒绝 --> 草稿: 修改
    已批准 --> 已发布: 发布
    已发布 --> [*]

C4模型图表

系统上下文图

@startuml C4_Context
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

Person(user, "用户", "系统客户")
System(system, "电商平台", "允许用户浏览和购买产品")
System_Ext(payment, "支付网关", "处理支付")
System_Ext(email, "邮件服务", "发送通知")

Rel(user, system, "使用", "HTTPS")
Rel(system, payment, "处理支付", "HTTPS")
Rel(system, email, "发送邮件", "SMTP")
@enduml

容器图

@startuml C4_Container
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(user, "用户")

System_Boundary(system, "电商平台") {
    Container(spa, "Web应用", "React", "用户界面")
    Container(api, "API网关", "Node.js", "REST API")
    Container(orders, "订单服务", "Go", "处理订单")
    Container(products, "产品服务", "Go", "产品目录")
    ContainerDb(db, "数据库", "PostgreSQL", "存储数据")
    ContainerQueue(queue, "消息队列", "RabbitMQ", "异步消息")
}

Rel(user, spa, "使用", "HTTPS")
Rel(spa, api, "调用", "HTTPS")
Rel(api, orders, "路由", "gRPC")
Rel(api, products, "路由", "gRPC")
Rel(orders, db, "读/写", "SQL")
Rel(orders, queue, "发布", "AMQP")
@enduml

D2图表

架构图

direction: right

users: 用户 {
  shape: person
}

frontend: 前端 {
  spa: React SPA
  mobile: 移动应用
}

backend: 后端服务 {
  gateway: API网关
  auth: 认证服务
  orders: 订单服务
  products: 产品服务
}

data: 数据层 {
  postgres: PostgreSQL {
    shape: cylinder
  }
  redis: Redis缓存 {
    shape: cylinder
  }
  s3: S3存储 {
    shape: cylinder
  }
}

users -> frontend.spa
users -> frontend.mobile
frontend -> backend.gateway
backend.gateway -> backend.auth
backend.gateway -> backend.orders
backend.gateway -> backend.products
backend.orders -> data.postgres
backend.auth -> data.redis
backend.products -> data.s3

Graphviz DOT

依赖关系图

digraph 依赖关系 {
    rankdir=LR;
    node [shape=box, style=filled, fillcolor=lightblue];

    "api-gateway" -> "auth-service";
    "api-gateway" -> "user-service";
    "api-gateway" -> "order-service";

    "order-service" -> "user-service";
    "order-service" -> "product-service";
    "order-service" -> "payment-service";

    "user-service" -> "database" [style=dashed];
    "order-service" -> "database" [style=dashed];
    "product-service" -> "database" [style=dashed];

    "database" [shape=cylinder, fillcolor=lightyellow];
}

配置

Mermaid配置

{
  "theme": "neutral",
  "themeVariables": {
    "primaryColor": "#4a90d9",
    "primaryTextColor": "#fff",
    "primaryBorderColor": "#2d5986",
    "lineColor": "#5c6370",
    "secondaryColor": "#f0f0f0",
    "tertiaryColor": "#e8e8e8"
  },
  "flowchart": {
    "curve": "basis",
    "padding": 20
  },
  "sequence": {
    "actorMargin": 50,
    "boxMargin": 10
  }
}

工作流程

  1. 解析源代码 - 加载图表定义
  2. 验证语法 - 检查错误
  3. 应用主题 - 配置样式
  4. 渲染图表 - 生成输出
  5. 优化 - 压缩SVG/PNG
  6. 导出 - 保存到输出路径

依赖项

{
  "devDependencies": {
    "@mermaid-js/mermaid-cli": "^10.0.0",
    "plantuml": "^0.1.0",
    "d2": "^0.6.0",
    "graphviz": "^0.0.9",
    "svgo": "^3.0.0"
  }
}

CLI命令

# Mermaid转SVG
npx mmdc -i diagram.mmd -o diagram.svg

# PlantUML转PNG
java -jar plantuml.jar diagram.puml

# D2转SVG
d2 diagram.d2 diagram.svg

# Graphviz转PNG
dot -Tpng diagram.dot -o diagram.png

# 优化SVG
npx svgo diagram.svg -o diagram.min.svg

最佳实践

  • 使用一致的方向（LR或TD）
  • 每个图表限制15-20个节点
  • 使用有意义的标签
  • 分组相关组件
  • 复杂图表包含图例
  • 优化可访问性（颜色对比度）
  • 版本控制图表源代码

参考

目标流程

  • arch-docs-c4.js
  • data-model-docs.js
  • api-reference-docs.js
  • adr-docs.js