de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

该C4模型由西蒙·布朗开发的C4模型是一种强大的分层方法，用于可视化软件架构。它使用四个抽象层次，为不同受众（从商业利益相关者到开发人员）提供合适的细节程度。这使其非常适合创建清晰、可维护且面向受众的文档。

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

本全面指南基于著名的案例研究大银行股份有限公司的网上银行系统——一个虚构但真实的案例，展示了为个人客户构建在线银行平台以查看账户和进行支付的过程。该案例研究展示了如何逐步应用C4模型，使用PlantUML来实现“架构即代码”。它还集成了现代工具，如Visual Paradigm的AI驱动型C4 PlantUML工作室（于2025年底发布）以加速创建和维护。

C4模型概述

该模型包含四个层次：

  1. 第一层：系统上下文——整体视图：系统、用户和外部依赖关系。

  2. 第二层：容器——主要可部署单元（应用程序、服务、数据库）及高层次技术选择。

  3. 第三层：组件——容器内部的内部逻辑构建块。

  4. 第四层：代码——可选的低层次细节（例如类）；通常被跳过，以使用源代码引用代替。

额外的支持视图包括动态（运行时流程）和部署图。

应用C4模型：大银行股份有限公司网上银行系统案例研究

第一层：系统上下文图

目的：为商业利益相关者和非技术受众提供高层次概览，展示网上银行系统如何融入更广泛的环境，且不使用技术术语。

关键要素:

  • 人员：个人银行客户——拥有一个或多个个人银行账户的客户。

  • 软件系统: 互联网银行系统 — 允许客户查看账户信息并进行付款。

  • 外部系统:

    • 核心银行系统（现有大型机）— 处理客户数据、账户和交易。

    • 邮件系统（例如 AWS SES）— 发送确认和通知。

关系:

  • 客户使用互联网银行系统。

  • 互联网银行系统使用核心银行系统进行数据和交易处理。

  • 互联网银行系统通过邮件系统发送邮件。

这一层级使内容保持简洁，并明确说明了范围和集成关系。

PlantUML 示例（改编自案例研究）：

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title 互联网银行系统（第1级）系统上下文图
Person(客户, "个人银行客户", "拥有一个或多个个人银行账户的客户。")
System(互联网银行系统, "互联网银行系统", "允许客户查看账户并进行付款。")
System(核心银行系统, "核心银行系统", "现有大型机，负责处理客户数据、账户和交易。")
System_Ext(邮件系统, "邮件系统", "亚马逊云科技简单邮件服务（AWS SES），用于发送确认信息。")
Rel(客户, 互联网银行系统, "使用")
Rel(互联网银行系统, 核心银行系统, "使用")
Rel(互联网银行系统, 邮件系统, "通过邮件系统发送邮件")
@enduml

第2级：容器图

目的：深入展示主要构建模块（容器）和技术选择，面向架构师、开发人员和DevOps团队。

关键元素（在互联网银行系统边界内）：

  • 单页应用（SPA）— 使用 JavaScript + Angular，完整用户界面在网页浏览器中实现。

  • 移动应用— 基于 iOS/Android 的 React Native（或类似技术），功能有限。

  • API 应用 — Java + Spring Boot，JSON/HTTPS API 为前后端提供服务。

  • 数据库 — PostgreSQL，存储会话数据、偏好设置和缓存摘要（核心数据保留在主机系统中）。

外部系统 — 核心银行系统和邮件系统。

关系:

  • 客户通过 HTTPS 使用单页应用和移动应用。

  • 单页应用和移动应用调用 API 应用（JSON/HTTPS）。

  • API 应用读取/写入数据库（JDBC/SQL）。

  • API 应用与核心银行系统（JSON/HTTPS）和邮件系统（HTTPS）交互。

该图作为技术决策的“唯一真实来源”。

PlantUML 示例 （使用图标精灵）：

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()
title 互联网银行系统的 C4 容器图
Person(customer, "个人银行客户", "拥有一个或多个个人银行账户的客户。")
System_Boundary(internet_banking_system, "互联网银行系统") {
    Container(spa, "单页应用", "JavaScript + Angular", "完整的互联网银行用户界面", $sprite="angular")
    Container(mobile_app, "移动应用", "iOS/Android（React Native）", "功能有限", $sprite="react")
    Container(api_app, "API 应用", "Java + Spring Boot", "JSON/HTTPS API", $sprite="java")
    ContainerDb(database, "数据库", "PostgreSQL", "会话数据、偏好设置、缓存摘要", $sprite="postgresql")
}
System(core_banking_system, "核心银行系统", "现有的主机系统...")
System_Ext(email_system, "邮件系统", "AWS SES...")
Rel(customer, spa, "使用", "HTTPS")
Rel(customer, mobile_app, "使用", "HTTPS")
Rel(spa, api_app, "调用", "JSON/HTTPS")
Rel(mobile_app, api_app, "调用", "JSON/HTTPS")
Rel(api_app, database, "读取和写入", "JDBC/SQL")
Rel(api_app, core_banking_system, "查询/更新", "JSON/HTTPS")
Rel(api_app, email_system, "通过...发送邮件", "HTTPS")
@enduml

层级 3：组件图

目的：为开发团队详细说明关键容器（此处为 API 应用）的内部结构。

关键组件 （在 API 应用内部）：

  • 账户控制器（Spring MVC）—— 提供账户摘要和余额信息。

  • 认证控制器（Spring MVC）—— 登录、会话、令牌。

  • 重置密码控制器（Spring MVC）—— 通过邮件重置密码。

  • 安全组件（Spring Bean）—— 认证、JWT、哈希。

  • 账户管理组件（Spring Bean）—— 协调核心银行系统调用。

  • 邮件通知组件（Spring Bean）—— 发送邮件。

交互 — 控制器使用安全组件；账户管理使用核心银行系统；邮件组件使用数据库；前端调用控制器。

PlantUML 示例:

PlantUML Diagram

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
title 互联网银行系统 - API 应用的组件图
Container(spa, "单页应用", "javascript 和 angular", "...")
Container(ma, "移动应用", "...", "...")
ContainerDb(db, "数据库", "...", "...")
System_Ext(mbs, "主机银行系统", "...")
Container_Boundary(api, "API 应用") {
    Component(accounts, "账户控制器", "Spring MVC", "...")
    Component(auth, "认证控制器", "Spring MVC", "...")
    Component(reset, "重置密码控制器", "Spring MVC", "...")
    Component(security, "安全组件", "Spring Bean", "...")
    Component(accountmgmt, "账户管理组件", "Spring Bean", "...")
    Component(email, "邮件通知组件", "Spring Bean", "...")
    Rel(accounts, security, "使用")
    Rel(auth, security, "使用")
    Rel(reset, security, "使用")
    Rel(accountmgmt, mbs, "使用", "XML/HTTPS")
    Rel(email, db, "读取", "JDBC")
}
Rel(spa, accounts, "使用", "JSON/HTTPS")
Rel(spa, auth, "使用", "JSON/HTTPS")
Rel(spa, reset, "使用", "JSON/HTTPS")
Rel(ma, accounts, "使用", "JSON/HTTPS")
Rel(ma, auth, "使用", "JSON/HTTPS")
Rel(ma, reset, "使用", "JSON/HTTPS")
@enduml

层级 4：代码图（可选）

目的: 展示特定区域（例如认证）的类级别细节。

通常省略——直接指向源代码。

示例 — 认证的 UML 类图：

  • AuthenticationController 使用 JwtTokenProvider 和 UserRepository。

PlantUML 示例:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "使用"
AuthenticationController ..> UserRepository : "使用"
@enduml

支持视图

  • 动态图 （例如，“查看账户摘要”序列）：客户 → 单页应用 → API → 数据库/核心银行系统 → 响应。

  • 部署图: 将容器映射到基础设施（例如，API 使用 AWS EC2，数据库使用 RDS，主机系统部署在本地）。

利用 Visual Paradigm 的 AI 驱动工具

Visual Paradigm 的 AI 驱动的 C4 PlantUML Studio （2025 年底发布）彻底革新了这一流程：

  • 输入自然语言（例如，“为一个包含单页应用、移动应用、Spring Boot API、PostgreSQL 和主机系统集成的互联网银行系统创建一个 C4 模型”）。

  • AI 为所有层级生成 PlantUML 代码和图表。

  • 使用 AI 聊天机器人进行迭代（例如，“在认证组件中添加多因素认证”或“在 AWS 上生成部署视图”）。

  • 保持各层级之间的一致性，并支持“动态文档”。

  • 导出、版本化并集成到代码仓库中。

该工具提供的结构化、符合 C4 标准的输出，远比通用 AI 更可靠。

最佳实践

  1. 从工作坊开始 — 使用白板进行层级 1 的工作，以对齐利益相关者。

  2. 将架构视为代码 — 将 PlantUML 文件存储在您的代码仓库中，以便在代码变更时自动更新。

  3. 通过 AI 实现自动化 — 使用 Visual Paradigm 快速生成和优化图表。

  4. 面向受众 — 第 1 层省略技术细节；逐步添加。

  5. 保持轻量化 — 仅在第 3 层详细说明复杂容器；除非必要，否则跳过第 4 层。

  6. 持续演进文档 — 让图表成为“活文档”，防止出现过时的产物。

Big Bank plc 的案例研究仍然是 C4 模型在现实场景中有效性的经典范例，有助于提升清晰度、协作性以及可扩展的架构沟通。更多内容，请访问官方 C4 网站或 Visual Paradigm 的 AI 工具。