C4 模型：Container 图

简介 / Introduction

C4 模型是一种用层次化视图描述软件架构的方法，从 Context → Container → Component → Code 逐层深入。Container 图聚焦于系统边界内部的关键应用进程和数据存储，是架构设计文档的核心交付物。本文用 PlantUML（stdlib）和 Mermaid（C4 扩展）两种引擎分别绘制同一张 Container 图。

PlantUML 版

PlantUML 通过 !include <C4> 引入 C4 stdlib，使用 Container(...) 声明容器，ContainerDb 声明数据库，用 System_Boundary 划分系统边界：

!include <C4/C4_Container>
!include <C4/C4_Context>

Person(customer, "客户", "使用 Web 浏览器或移动 App")
System_Boundary(system, "电商系统") {
    Container(spa, "Web 前端", "Angular/SPA", "提供商品浏览、下单界面")
    Container(api, "API 服务", "Spring Boot", "处理业务逻辑")
    ContainerDb(db, "主数据库", "PostgreSQL", "存储订单、商品、用户数据")
    Container(cache, "缓存", "Redis", "热点数据缓存")
}
System_Ext(pay, "支付网关", "第三方支付系统")
System_Ext(mail, "邮件服务", "SMTP 邮件发送服务")

Rel(customer, spa, "浏览、下单", "HTTPS")
Rel(spa, api, "调用 REST API", "JSON/HTTPS")
Rel(api, db, "读写数据", "JDBC")
Rel(api, cache, "缓存读写", "Redis 协议")
Rel(api, pay, "发起支付", "HTTPS")
Rel(api, mail, "发送确认邮件", "SMTP")
ShowContainerLayou

Mermaid 版

Mermaid 的 C4 语法需要 c4码头 图类型（c4 或 c4dynamic），使用 Container/ContainerDb/System 等节点描述：

c4Context
    title C4 Container diagram for E-commerce System
    Container(spa, "Web 前端", "Angular/SPA", "提供商品浏览、下单界面")
    Container(api, "API 服务", "Spring Boot", "处理业务逻辑")
    ContainerDb(db, "主数据库", "PostgreSQL", "存储订单、商品、用户数据")
    Container(cache, "缓存", "Redis", "热点数据缓存")
    System_Boundary(system, "电商系统边界")
    System(pay, "支付网关")
    System(mail, "邮件服务")
    System(customer, "客户")

    Rel(customer, spa, "浏览、下单")
    Rel(spa, api, "调用 REST API")
    Rel(api, db, "读写数据")
    Rel(api, cache, "缓存读写")
    Rel(api, pay, "发起支付")
    Rel(api, mail, "发送确认邮件")

对比 / Side-by-side

特性	PlantUML	Mermaid
图类型声明	`!include <C4/C4_Container>` + 图类型	`c4Context`
容器节点	`Container(id, name, tech, desc)`	`Container(id, name, tech, desc)`
数据库节点	`ContainerDb(id, name, tech, desc)`	`ContainerDb(id, name, tech, desc)`
系统边界	`System_Boundary(name) { ... }`	`System_Boundary(name)`
外部系统	`System(name, desc)`	`System(name, desc)`
关系箭头	`Rel(source, target, label)`	`Rel(source, target, label)`
stdlib 需安装	是（`plantuml-stdlib`）	否（Mermaid 内置 C4）

小结 / Wrap-up

PlantUML 的 C4 stdlib 语义完整、功能丰富，适合需要严格遵守 C4 规范的正式架构文档，但需要后端安装 stdlib 文件。Mermaid 内置 C4 语法，无需额外依赖，适合快速原型和内网文档。两者均可导出 SVG，嵌入 Confluence、Notion 等协作工具时建议配合 xmlns:xlink 注入以保证图片正常显示。