从宏观到代码:使用C4模型可视化软件架构的入门指南
引言
软件架构文档常常令人望而生畏。开发者要么创建过于复杂的图表,没人能理解,要么干脆完全跳过文档,导致团队迷失在代码的迷宫中。
引入C4模型——由西蒙·布朗创建的一种简单、分层的软件架构可视化方法。可以将其视为软件的谷歌地图:从全局视角开始,逐步放大,直到看到具体的街道和建筑。

本教程将通过实际示例、PlantUML代码片段以及使用现代工具(如Visual Paradigm)创建专业架构图的指导,带你了解C4模型的全部四个层级。
🎯 通过一个实际案例理解C4模型
让我们为以下内容构建文档:“PayQuick”——一个现代的在线支付平台,允许用户转账、支付账单和管理卡片。我们将为C4模型的每一层级创建图表。
🗺️ 第1层:系统上下文图
它展示了什么
系统在其环境中的3万英尺高空视角。
PayQuick示例
参与者:
-
个人客户
-
商户
-
银行系统
-
短信网关
关系:
-
客户转账
-
商户接收付款
-
系统与外部银行集成
-
系统发送短信通知
C4-PlantUML代码

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
title PayQuick - 系统上下文图
Person(customer, "个人客户", "使用应用程序转账和支付账单")
Person(merchant, "商户", "接收客户的付款")
System_Boundary(payquick, "PayQuick平台") {
System(payquick_system, "PayQuick", "允许客户进行付款和转账")
}
System_Ext(bank_system, "银行网络", "处理跨行转账", $tags="external")
System_Ext(sms_gateway, "Twilio短信", "发送交易通知", $tags="external")
System_Ext(email_service, "SendGrid", "发送电子邮件收据", $tags="external")
Rel(customer, payquick_system, "转账、支付账单、查看交易")
Rel(merchant, payquick_system, "接收付款、发出退款")
Rel(payquick_system, bank_system, "通过", "API")
Rel(payquick_system, sms_gateway, "通过", "HTTPS")
Rel(payquick_system, email_service, "通过", "SMTP")
LAYOUT_WITH_LEGEND()
@enduml
Visual Paradigm 小贴士
在 Visual Paradigm 中,使用 AI 助手 通过用自然语言描述您的系统来生成初始的系统上下文图: “为一个包含客户、商户和银行集成的支付平台创建系统上下文图。”
📦 第二层:容器图
它展示了什么
主要的技术选型及其交互方式。
PayQuick 示例
容器:
-
移动应用(iOS/Android)
-
Web 应用(React)
-
API 应用(Spring Boot)
-
数据库(PostgreSQL)
-
消息队列(RabbitMQ)
-
缓存(Redis)
C4-PlantUML 代码

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
title PayQuick - 容器图
Person(customer, "客户", "使用移动应用或网页界面")
Person(merchant, "商户", "使用网页控制台")
System_Boundary(payquick, "PayQuick 平台") {
Container(mobile_app, "移动应用", "React Native, TypeScript", "为客户提供用户界面")
Container(web_app, "Web 应用", "React, TypeScript", "提供管理员和商户控制台")
Container_Boundary(api, "API 应用") {
Container(api_gateway, "API 网关", "Node.js, Express", "处理路由、认证和限流")
Container(payment_service, "支付服务", "Spring Boot, Java", "处理支付和转账")
Container(notification_service, "通知服务", "Python, FastAPI", "发送短信和邮件通知")
}
ContainerDb(database, "数据库", "PostgreSQL", "存储用户账户、交易记录和余额")
ContainerDb(cache, "缓存", "Redis", "存储会话数据和频繁访问的记录")
ContainerQueue(queue, "消息队列", "RabbitMQ", "处理异步通知处理")
}
System_Ext(bank_api, "银行 API", "外部银行集成")
System_Ext(sms_provider, "Twilio 短信 API")
Rel(customer, mobile_app, "使用", "HTTPS")
Rel(merchant, web_app, "使用", "HTTPS")
Rel(mobile_app, api_gateway, "调用 API", "HTTPS/JSON")
Rel(web_app, api_gateway, "调用 API", "HTTPS/JSON")
Rel(api_gateway, payment_service, "将请求路由至", "gRPC")
Rel(api_gateway, notification_service, "将请求路由至", "gRPC")
Rel(payment_service, database, "读写数据", "JDBC")
Rel(payment_service, cache, "将频繁数据缓存至", "Redis 协议")
Rel(notification_service, queue, "发布事件至", "AMQP")
Rel(notification_service, sms_provider, "通过发送短信", "REST API")
Rel(payment_service, bank_api, "通过处理转账", "HTTPS")
@enduml
Visual Paradigm AI 功能
使用 智能连接器 结合 AI 建议,自动检测并根据容器的类型和职责建议它们之间的关系。
第三层:组件图
它展示了什么
单个容器的内部结构。
PayQuick 示例
让我们深入查看 支付服务容器以查看其组件:
组件:
-
支付控制器
-
交易管理器
-
欺诈检测服务
-
余额计算器
-
仓库层
C4-PlantUML 代码

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
title PayQuick - 支付服务组件图
!define C4ShapeInRow 4
!define C4BoundaryInRow 1
Container_Boundary(payment_service, "支付服务") {
Component(payment_controller, "支付控制器", "Spring REST 控制器", "处理传入的支付请求")
Component(transaction_manager, "交易管理器", "Spring 服务", "协调支付工作流")
Component(fraud_detector, "欺诈检测服务", "Spring 服务", "验证交易是否存在欺诈")
Component(balance_calculator, "余额计算器", "Spring 服务", "计算并更新账户余额")
Component(validation_service, "验证服务", "Spring 服务", "验证支付数据和业务规则")
ComponentDb(transaction_repo, "交易仓库", "Spring Data JPA", "存储交易记录")
ComponentDb(account_repo, "账户仓库", "Spring Data JPA", "管理账户数据")
ComponentDb(fraud_repo, "欺诈规则仓库", "Spring Data JPA", "存储欺诈检测规则")
Component(notification_client, "通知客户端", "Feign 客户端", "调用通知服务")
Component(bank_client, "银行客户端", "Feign 客户端", "与外部银行 API 集成")
}
Rel(payment_controller, transaction_manager, "将支付请求转发给")
Rel(transaction_manager, fraud_detector, "使用...验证交易")
Rel(transaction_manager, validation_service, "使用...验证数据")
Rel(transaction_manager, balance_calculator, "通过...更新余额")
Rel(transaction_manager, transaction_repo, "将交易保存到")
Rel(balance_calculator, account_repo, "读取/写入账户数据到")
Rel(fraud_detector, fraud_repo, "根据规则进行检查")
Rel(transaction_manager, notification_client, "通过...发送通知")
Rel(transaction_manager, bank_client, "通过...处理外部转账")
@enduml
Visual Paradigm 小技巧
使用组件图模板在 Visual Paradigm 中,可快速搭建组件结构。AI 可根据你的容器类型建议常见模式,如仓库、服务层和控制器。
💻 第 4 级:代码图(可选)
它展示的内容
实际的类、接口和方法。
示例:欺诈检测服务类

@startuml
title 欺诈检测服务 - 类图
class 欺诈检测服务 {
- 欺诈规则仓库 fraudRepo
- 交易仓库 txnRepo
+ checkFraud(txn: 交易): 欺诈结果
- evaluateRules(txn: 交易): List<规则>
- calculateRiskScore(txn: 交易): Double
- isVelocityExceeded(userId: String): Boolean
}
class 欺诈结果 {
+ isBlocked: boolean
+ riskScore: double
+ blockedRules: List<String>
+ getRiskLevel(): 风险等级
}
class 欺诈规则 {
+ id: Long
+ ruleName: String
+ threshold: Double
+ isEnabled: boolean
+ evaluate(txn: 交易): boolean
}
class 交易 {
+ id: String
+ amount: BigDecimal
+ userId: String
+ timestamp: DateTime
+ merchantId: String
}
欺诈检测服务 --> 欺诈结果 : 返回
欺诈检测服务 --> 欺诈规则 : 使用
欺诈检测服务 --> 交易 : 验证
欺诈结果 ..> 欺诈规则 : 包含
@enduml
注意:第 4 级图表最好通过以下工具从代码自动生成:
-
Visual Paradigm 的代码工程功能
-
IntelliJ IDEA 内置的图表生成器
-
Swagger/OpenAPI 用于 API 文档
🛠️ 推荐工具:Visual Paradigm + AI 功能
为什么选择 Visual Paradigm?
Visual Paradigm 是一款功能全面的建模工具,原生支持 C4 图表,并提供强大的 AI 辅助功能:
C4 建模的关键功能:
-
AI 驱动的图表生成
-
用通俗易懂的英语描述你的系统
-
AI 会建议合适的 C4 层级图表
-
自动生成初始结构
-
-
智能布局引擎
-
组件的自动排列
-
智能连接线路由
-
图表间保持一致的样式
-
-
代码工程
-
反向工程代码生成图表(第 4 层)
-
正向工程将图表生成代码骨架
-
保持图表与代码库同步
-
-
协作功能
-
实时团队协作
-
版本控制集成
-
导出为多种格式(PNG、PDF、SVG)
-
-
C4 模型模板
-
每个 C4 层级的预构建模板
-
行业特定示例
-
内置最佳实践指南
-
开始使用 Visual Paradigm:
-
下载社区版(免费)或企业版
-
安装从市场中安装 C4 模型插件
-
创建使用向导创建您的第一个图表
-
使用AI助手通过点击魔法棒图标
-
导出并与您的团队共享
🚀 初学者的最佳实践
1. 从简单开始,然后迭代
-
即使感觉过于基础,也从第1级开始
-
在深入之前获得利益相关者的认可
-
根据需要逐步添加细节
2. 保持图表最新
-
每次重大发布时更新第1-2级图表
-
尽可能自动化第4级的生成
-
归档过时的图表,不要删除它们
3. 清晰命名事物
使用以下格式:名称 [技术] – 描述
✅ 好:支付服务 [Spring Boot] - 处理支付交易
❌ 差:PaymentService或那个支付东西
4. 为您的受众选择合适的层级
| 受众 | 推荐层级 |
|---|---|
| 高管/客户 | 仅 Level 1 |
| 产品经理 | Level 1-2 |
| DevOps/基础设施 | Level 2-3 |
| 开发者 | Level 2-4 |
5. 使用一致的视觉语言
-
遵循 C4 颜色规范
-
为相似元素使用一致的形状
-
保持关系类型的箭头样式一致
📊 完整示例:跨层级映射用户旅程
让我们追踪一个 “转账” 功能在所有 C4 层级中的表现:
Level 1(上下文): 客户 → PayQuick → 银行网络

Level 2(容器): 移动应用 → API 网关 → 支付服务 → 数据库 → 银行 API

Level 3(组件): PaymentController → TransactionManager → 反欺诈检测 → 余额计算器 → 交易存储库

Level 4(代码): PaymentController.transfer() → TransactionManager.process() → FraudDetection.checkFraud()

这种分层方法有助于不同团队成员在适当的细节层次上理解系统。
🎓 结论
C4模型将软件架构从令人畏惧的抽象概念转变为实用且可导航的蓝图。通过从宏观视角开始,逐步深入细化,你可以创建出从CTO到初级开发人员都能受益的文档。
关键要点:
✅ 层级1 奠定基础——即使面对技术受众也绝不能跳过
✅ 层级2 揭示你的技术栈和部署策略
✅ 层级3 展示你如何在服务内组织代码
✅ 层级4 可选——尽可能实现自动化
✅ Visual Paradigm 以及具有AI功能的类似工具可使图表创建速度提升50%-70%
✅ 动态文档 比完美的文档更好——应迭代更新
记住:目标不是为了创造漂亮的图表而创造。而是为了促进沟通、缩短入职时间,并做出更优的架构决策。从今天开始绘制一个简单的系统上下文图,观察你的团队理解力和生产力不断提升。
你的下一步:
-
选择你当前的一个项目
-
在纸上或白板上草拟一个层级1的图表
-
将其转换为C4-PlantUML或Visual Paradigm格式
-
与非技术利益相关者分享,以获取反馈
-
按需逐步添加二级细节
愉快地绘图吧!🎨














