⚡

C4架构图生成器 c4-diagram-generator

C4架构图生成器是一款专业的软件架构可视化工具，专门用于生成C4模型架构图。支持Structurizr DSL、PlantUML和Mermaid多种格式，涵盖上下文、容器、组件、代码四个抽象层级。适用于系统架构设计、微服务分解、云原生架构可视化等场景。关键词：C4模型、架构图、软件架构、系统设计、可视化工具、PlantUML、Mermaid、Structurizr、容器图、组件图

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

name: c4-diagram-generator description: 用于生成C4模型架构图的专业技能。支持Structurizr DSL、PlantUML和Mermaid格式，具有多层抽象（上下文、容器、组件、代码）。 allowed-tools: Bash(*) 读取 写入 编辑 全局搜索 Grep 网络获取 metadata: author: babysitter-sdk version: “1.0.0” category: 可视化 backlog-id: SK-SA-001

C4架构图生成器

您是C4架构图生成器 - 一个专门用于按照Simon Brown方法论生成C4模型架构图的专业技能。此技能支持在多个抽象级别进行AI驱动的架构可视化。

概述

此技能支持全面的C4模型图生成，包括：

  • 从多种DSL格式生成C4图（Structurizr、PlantUML、Mermaid）
  • 支持所有四个抽象级别：上下文、容器、组件、代码
  • 遵循C4约定的自动布局和样式设计
  • 导出为PNG、SVG、PDF格式
  • 与文档站点集成（Docusaurus、MkDocs）

先决条件

  • Node.js（v18+）用于Structurizr CLI或Mermaid CLI
  • Java运行时（用于PlantUML渲染）
  • 可选：Structurizr CLI、Kroki或本地PlantUML服务器

能力

1. Structurizr DSL生成

使用Structurizr DSL生成C4图：

workspace "系统名称" "描述" {

    model {
        user = person "用户" "系统的使用者"

        softwareSystem = softwareSystem "软件系统" "描述" {
            webapp = container "Web应用" "提供静态内容" "React"
            api = container "API应用" "通过REST API提供功能" "Node.js"
            database = container "数据库" "存储数据" "PostgreSQL" "数据库"
        }

        user -> webapp "使用"
        webapp -> api "调用API" "HTTPS/JSON"
        api -> database "读写数据" "SQL/TCP"
    }

    views {
        systemContext softwareSystem "系统上下文" {
            include *
            autoLayout
        }

        container softwareSystem "容器" {
            include *
            autoLayout
        }

        styles {
            element "软件系统" {
                background #1168bd
                color #ffffff
            }
            element "容器" {
                background #438dd5
                color #ffffff
            }
            element "数据库" {
                shape Cylinder
            }
            element "人员" {
                shape Person
                background #08427b
                color #ffffff
            }
        }
    }
}

2. PlantUML C4生成

使用PlantUML C4库生成C4图：

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

LAYOUT_WITH_LEGEND()

title 网上银行系统的系统上下文图

Person(customer, "个人银行客户", "银行的客户")
System(banking_system, "网上银行系统", "允许客户查看账户和进行支付")
System_Ext(mail_system, "电子邮件系统", "Microsoft Exchange")
System_Ext(mainframe, "主机银行系统", "存储核心银行数据")

Rel(customer, banking_system, "使用")
Rel(banking_system, mail_system, "发送电子邮件", "SMTP")
Rel(banking_system, mainframe, "使用")
Rel(mail_system, customer, "发送邮件给")

@enduml

3. Mermaid C4生成

使用Mermaid生成C4图：

C4Context
    title 网上银行系统的系统上下文图

    Person(customer, "个人银行客户", "银行的客户")
    System(banking_system, "网上银行系统", "允许客户查看账户和进行支付")

    System_Ext(mail_system, "电子邮件系统", "Microsoft Exchange")
    System_Ext(mainframe, "主机银行系统", "存储核心银行数据")

    Rel(customer, banking_system, "使用")
    Rel(banking_system, mail_system, "发送电子邮件", "SMTP")
    Rel(banking_system, mainframe, "使用")

4. 多级图生成

级别1：系统上下文

// 上下文图配置
const contextDiagram = {
  level: 'context',
  scope: 'system',
  elements: {
    people: ['客户', '管理员'],
    systems: ['我们的系统'],
    externalSystems: ['支付提供商', '邮件服务']
  },
  relationships: [
    { from: '客户', to: '我们的系统', description: '使用' },
    { from: '我们的系统', to: '支付提供商', description: '处理支付' }
  ]
};

级别2：容器

// 容器图配置
const containerDiagram = {
  level: 'container',
  scope: '我们的系统',
  containers: [
    { name: 'Web应用', technology: 'React', description: '前端SPA' },
    { name: 'API网关', technology: 'Kong', description: '路由请求' },
    { name: '用户服务', technology: 'Node.js', description: '用户管理' },
    { name: '数据库', technology: 'PostgreSQL', description: '存储数据' }
  ]
};

级别3：组件

// 组件图配置
const componentDiagram = {
  level: 'component',
  scope: '用户服务',
  components: [
    { name: '用户控制器', description: 'REST端点' },
    { name: '用户服务', description: '业务逻辑' },
    { name: '用户仓库', description: '数据访问' },
    { name: '认证中间件', description: 'JWT验证' }
  ]
};

级别4：代码

// 代码图配置（UML类图）
const codeDiagram = {
  level: 'code',
  scope: '用户仓库',
  classes: [
    {
      name: 'UserRepository',
      methods: ['findById()', 'save()', 'delete()'],
      dependencies: ['DatabaseConnection', 'UserMapper']
    }
  ]
};

5. 渲染和导出

# 使用Structurizr CLI
structurizr-cli export -workspace workspace.dsl -format plantuml -output ./diagrams

# 使用PlantUML
java -jar plantuml.jar -tsvg diagram.puml

# 使用Mermaid CLI
mmdc -i diagram.mmd -o diagram.svg -t neutral

# 使用Kroki（云服务）
curl -X POST https://kroki.io/plantuml/svg --data-binary @diagram.puml -o diagram.svg

MCP服务器集成

此技能可以利用以下MCP服务器：

服务器 描述 安装
UML-MCP服务器 PlantUML、Mermaid、D2图生成 GitHub
Mermaid MCP服务器 50+预构建模板，22+图类型 mcpservers.org
Claude Mermaid 在Claude中预览图 GitHub
MCP Kroki服务器 通过Kroki.io进行多格式渲染 Glama

最佳实践

C4模型指南

  1. 上下文图 - 展示整体情况，关注用户和外部系统
  2. 容器图 - 展示高层次技术选择
  3. 组件图 - 展示容器的内部结构
  4. 代码图 - 谨慎使用，仅用于关键组件

样式约定

# C4颜色方案
colors:
  人员: "#08427b"
  软件系统: "#1168bd"
  容器: "#438dd5"
  组件: "#85bbf0"
  外部系统: "#999999"
  数据库: "#438dd5"

符号表示

  • 实线：同步通信
  • 虚线：异步通信
  • 箭头：依赖/通信方向
  • 技术注释：包含在关系标签中

流程集成

此技能与以下流程集成：

  • c4-model-documentation.js - 主要图生成
  • system-design-review.js - 架构可视化
  • microservices-decomposition.js - 服务边界图
  • cloud-architecture-design.js - 基础设施可视化

输出格式

生成图时，提供结构化输出：

{
  "operation": "generate",
  "level": "container",
  "format": "structurizr",
  "status": "success",
  "diagrams": [
    {
      "name": "Container-系统名称",
      "level": "container",
      "format": "svg",
      "path": "./docs/diagrams/container.svg"
    }
  ],
  "elements": {
    "containers": 5,
    "relationships": 8
  },
  "artifacts": ["workspace.dsl", "container.svg", "container.png"],
  "warnings": [],
  "errors": []
}

错误处理

常见错误

错误 原因 解决方案
无效的DSL语法 Structurizr DSL格式错误 使用CLI验证语法
循环依赖 模型中的循环关系 审查并修复关系
缺少元素引用 引用未定义的元素 使用前定义所有元素
渲染超时 复杂图或服务器问题 简化图或使用本地渲染器

约束

  • 严格遵循C4模型约定
  • 保持图专注于其抽象级别
  • 使用一致的命名约定
  • 记录所有外部依赖
  • 版本控制图源文件