C4 模型：Context 图

简介 / Introduction

C4 模型是一种用分层图表表达软件架构的方法，从 Context（上下文）→ Container（容器）→ Component（组件）→ Code（代码） 四个层次描述系统。Context 图是最宏观的一层，展示系统边界、系统间的交互以及外部参与者之间的关联。本文用同一个示例对比 PlantUML 和 Mermaid 绘制 C4 Context 图的语法。

PlantUML 版

PlantUML 通过标准库 C4 绘制 C4 模型图表。需确保后端已安装 plantuml-stdlib。

!include <C4>

title C4 Context 图 — 互联网银行系统

Person(customer, "个人客户", "使用网上银行的前端应用")
Person(employee, "银行员工", "使用内部管理系统")
System(banking_system, "互联网银行系统", "提供账户管理、转账等核心功能")
System(core_bank, "核心银行系统", "处理交易记账")
System(email_system, "邮件系统", "发送通知邮件")

Rel(customer, banking_system, "访问")
Rel(employee, banking_system, "操作")
Rel(banking_system, core_bank, "调用")
Rel(banking_system, email_system, "发送邮件")

渲染效果为一张系统上下文图：两个参与者（客户、员工）在外侧，三个系统（互联网银行系统、核心银行系统、邮件系统）居中，箭头标明数据流向。

Mermaid 版

Mermaid 从 v10 起支持 C4Context 图表语法，与 PlantUML 的 C4 库功能相近。

C4Context
    title C4 Context 图 — 互联网银行系统

    Person(customer, "个人客户", "使用网上银行的前端应用")
    Person(employee, "银行员工", "使用内部管理系统")
    System(banking_system, "互联网银行系统", "提供账户管理、转账等核心功能")
    System(core_bank, "核心银行系统", "处理交易记账")
    System(email_system, "邮件系统", "发送通知邮件")

    Rel(customer, banking_system, "访问")
    Rel(employee, banking_system, "操作")
    Rel(banking_system, core_bank, "调用")
    Rel(banking_system, email_system, "发送邮件")

对比 / Side-by-side

特性	PlantUML	Mermaid
库引用	`!include <C4>`	内置 `C4Context`
参与者和系统声明	`Person(id, "名称", "描述")`	同
关系语法	`Rel(从, 到, "标签")`	同
布局方向	自动（无需手动指定）	自动
自定义边界（Enterprise）	支持 `Enterprise_Boundary`	不支持
外部系统标注	`System_Ext`	`System`（同语法）

两者语法几乎一致，主要差异在于 PlantUML 需要引入标准库，而 Mermaid 已内置支持。PlantUML 的企业级扩展（Enterprise）提供更丰富的边界描绘能力，适合复杂组织架构。

小结 / Wrap-up

C4 Context 图是展示系统全局视野的最佳起点，无需深入实现细节即可让业务方理解系统间的协作关系。PlantUML 通过标准库提供完整功能，Mermaid 的内置语法覆盖大多数常用场景，选择取决于团队已有的工具链和对企业级特性的需求。