de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

引言

软件架构文档常常令人望而生畏。开发者要么创建过于复杂的图表,没人能理解,要么干脆完全跳过文档,导致团队迷失在代码的迷宫中。

引入C4模型——由西蒙·布朗创建的一种简单、分层的软件架构可视化方法。可以将其视为软件的谷歌地图:从全局视角开始,逐步放大,直到看到具体的街道和建筑。

VPasCode Editor: C4 Model - Hierarchical Drill-Down Software Architecture Framework

本教程将通过实际示例、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 建模的关键功能:

  1. AI 驱动的图表生成

    • 用通俗易懂的英语描述你的系统

    • AI 会建议合适的 C4 层级图表

    • 自动生成初始结构

  2. 智能布局引擎

    • 组件的自动排列

    • 智能连接线路由

    • 图表间保持一致的样式

  3. 代码工程

    • 反向工程代码生成图表(第 4 层)

    • 正向工程将图表生成代码骨架

    • 保持图表与代码库同步

  4. 协作功能

    • 实时团队协作

    • 版本控制集成

    • 导出为多种格式(PNG、PDF、SVG)

  5. C4 模型模板

    • 每个 C4 层级的预构建模板

    • 行业特定示例

    • 内置最佳实践指南

开始使用 Visual Paradigm:

  1. 下载社区版(免费)或企业版

  2. 安装从市场中安装 C4 模型插件

  3. 创建使用向导创建您的第一个图表

  4. 使用AI助手通过点击魔法棒图标

  5. 导出并与您的团队共享


🚀 初学者的最佳实践

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. 选择你当前的一个项目

  2. 在纸上或白板上草拟一个层级1的图表

  3. 将其转换为C4-PlantUML或Visual Paradigm格式

  4. 与非技术利益相关者分享,以获取反馈

  5. 按需逐步添加二级细节

愉快地绘图吧!🎨