5种核心架构图绘制实战：从C4模型到PlantUML的3步标准化流程

5种核心架构图绘制实战：从C4模型到PlantUML的3步标准化流程

架构图是技术团队沟通的"普通话"，但90%的开发者仍在用Visio手绘方框箭头。本文将揭示如何用C4模型+PlantUML实现架构图的工业化生产，提供可直接复用的代码模板和自动化工作流。

1. 架构图分类与C4模型解析

在开始画图之前，我们需要理解不同类型的架构图服务于不同的沟通场景。C4模型（Context, Containers, Components, Code）提供了一种分层表达架构的标准语言：

1.1 五种核心架构图定位

1.2 C4模型分层原理

@startuml C4-Layers !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml LAYER_WITH_LEGEND("C4模型分层", "Context->Containers->Components->Code") System_Boundary("c1", "系统上下文") { System(用户, "外部用户", "使用系统的角色") System(支付网关, "第三方服务", "外部支付系统") } System_Boundary("c2", "容器层") { Container(web, "Web应用", "Spring Boot", "用户交互入口") ContainerDb(db, "数据库", "PostgreSQL", "数据持久化") } Rel(用户, web, "提交订单", "HTTPS") Rel(web, 支付网关, "调用支付", "REST API") Rel(web, db, "读写数据", "JDBC") @enduml

提示：C4模型通过逐层放大实现架构表达的精确控制，每层解决特定抽象级别的问题

2. PlantUML标准化绘图实战

PlantUML作为文本化绘图工具，完美解决了架构图版本控制和团队协作的痛点。以下是五种架构图的代码化实现方案：

2.1 业务架构图模板

@startuml Business-Architecture left to right direction rectangle "电商平台" as platform { rectangle "用户服务" as user rectangle "订单服务" as order rectangle "支付服务" as payment rectangle "库存服务" as inventory } rectangle "外部系统" as external { rectangle "银行系统" as bank rectangle "物流系统" as logistics } user --> order : "创建" order --> payment : "发起" payment --> bank : "验证" order --> inventory : "扣减" inventory --> logistics : "通知" note top of platform **业务能力清单**： 1. 用户注册/登录 2. 商品浏览搜索 3. 购物车管理 4. 订单生命周期管理 5. 支付流程处理 end note @enduml

2.2 系统架构图模板

@startuml System-Architecture !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml Person(用户, "消费者", "通过移动端访问") System_Boundary("电商系统", "微服务架构") { Container(web, "Web网关", "Nginx", "流量入口") Container(api, "API网关", "Spring Cloud Gateway", "路由鉴权") Container(auth, "认证服务", "OAuth2", "身份管理") ContainerDb(order_db, "订单数据库", "MySQL", "ACID事务") } System(支付系统, "支付宝", "第三方支付") Rel(用户, web, "HTTPS请求") Rel(web, api, "负载均衡") Rel(api, auth, "JWT验证") Rel_R(支付系统, api, "异步回调") @enduml

2.3 前端架构图模板

@startuml Frontend-Architecture component "App Shell" as shell { [微前端容器] as container [路由管理器] as router } component "功能模块" as modules { [商品列表MF] as product [购物车MF] as cart [订单MF] as order } database "状态管理" as store { [Redux Store] as redux [LocalStorage] as local } shell --> modules : "动态加载" modules --> store : "读写状态" router --> modules : "路由匹配" note right **技术栈**： - 主框架：React 18 - 构建工具：Webpack 5 Module Federation - 样式方案：TailwindCSS end note @enduml

3. 三步标准化工作流

3.1 需求分析阶段

1. 确定视图类型：根据受众选择业务/系统/部署视图
2. 划定抽象层级：明确需要展示到C4的哪一层
3. 识别关键元素：列出必须呈现的组件和关系

3.2 绘图实施阶段

1. 环境准备：

   # 安装PlantUML VSCode插件 code --install-extension jebbs.plantuml # 或者使用Docker运行 docker run -d -p 8080:8080 plantuml/plantuml-server

2. 模板选择：

   ' 快速选择模板类型 !theme aws-orange !include <archimate/archimate> ' 或者使用C4预设 !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

3.3 评审优化阶段

使用架构守护工具进行自动化检查：

# 使用Structurizr CLI验证架构一致性 java -jar structurizr-cli.jar validate -w workspace.dsl

常见优化检查表：

• [ ] 所有箭头都有明确标签
• [ ] 不存在跨层级的直接依赖
• [ ] 技术栈版本信息准确
• [ ] 网络协议类型标注清晰
• [ ] 有适当的图例说明

4. 高级技巧与自动化

4.1 架构图版本控制

将PlantUML文件与代码一起管理：

# 典型项目结构 docs/ ├── architecture/ │ ├── business.puml │ ├── system.puml │ └── deployment.puml └── diagrams/ ├── context.png └── containers.png

4.2 自动化文档生成

结合Maven/Gradle插件实现构建时更新：

<!-- pom.xml配置示例 --> <plugin> <groupId>net.sourceforge.plantuml</groupId> <artifactId>plantuml-maven-plugin</artifactId> <version>1.1.1</version> <executions> <execution> <phase>prepare-package</phase> <goals> <goal>generate</goal> </goals> </execution> </executions> </plugin>

4.3 架构可视化仪表盘

使用Eclipse Sirius创建动态视图：

// 示例：动态架构模型 public class ArchitectureModel { @Label private String name; @Containment private List<Component> components; @Edge private List<Connection> connections; }

架构图的终极价值不在于美观，而在于能否准确传递设计意图。当团队开始用同一套语言描述系统时，80%的架构争议会自然消解。建议从今天开始，用本文模板创建你的第一个PlantUML架构图，体验文本化设计的魅力。