C4 model技术架构图--context图

在设计系统架构图时，包括常见的技术架构图和业务架构图。
技术架构图架构图不止在前期设计系统时重要，在后期开发或者维护的时作为指导也同样重要。

一.关于C4 model

官方网址
属于技术架构图的一种格式，C4 分别表示上下文（Context）、容器（Container）、组件（Component）和代码（Code）。四个层次，分别对应不同的角度。

C4 model 架构图的系统拆分，其实与微服务拆分和DDD领域拆分的思想非常像。拆分的合理，才能保证系统的开发效率和维护效率。

二.上下文（Context）图

1.官方示例

代码

@startuml system-context-diagram
!include https://unpkg.com/plantuml-style-c4@latest/c4_context.puml

LAYOUT_WITH_LEGEND()
'LAYOUT_AS_SKETCH()

title 网上银行系统context图

Actor(customer, "个人银行客户", "拥有个人银行账户的银行客户。")
System(banking_system, "网上银行系统", "允许客户查看有关其银行帐户的信息，并进行付款。")

System_Ext(mail_system, "E-mail 系统", "内部电子邮件系统。")
System_Ext(mainframe, "大型机银行系统", "存储有关客户、帐户、交易等的所有核心银行信息。")

Rel(customer, banking_system, "使用")
Rel_Back(customer, mail_system, "发送电子邮件到")
Rel_Neighbor(banking_system, mail_system, "发送电子邮件", "SMTP")
Rel(banking_system, mainframe, "使用")

@enduml

2.函数说明

页面相关

LAYOUT_WITH_LEGEND()

此函数表示图例说明，添加后，会显示如下图例说明。

LAYOUT_AS_SKETCH()

添加此函数后，页面会变为草稿模式，如下。
注：草稿模式下，中文由于字体原因，无法展示。

title

图例的标题。

LAYOUT_TOP_DOWN

注意，这个函数，不带括号，表示整个图的排列为上下为主。

LAYOUT_LEFT_RIGHT

注意，这个函数，也不带括号，表示整个图的排列为左右为主。

模块相关

Actor(id, name , describe)

用户函数，表示为一个用户，有三个参数。
id：作为唯一标识，用于后续关系链接时使用。
name：名称。
describe：说明。

Actor_Ext(id, name , describe)

外部用户函数，表示为一个外部系统的用户，有三个参数。灰色
id：作为唯一标识，用于后续关系链接时使用。
name：名称。
describe：说明。

System(id, name , describe)

系统函数，表示为一个系统。
id：作为唯一标识，用于后续关系链接时使用。
name：名称。
describe：说明。

System_Ext(id, name , describe)

外部系统，表示为一个外部系统，一般是指需要对接的已有系统。灰色
id：作为唯一标识，用于后续关系链接时使用。
name：名称。
describe：说明。

关系相关

Rel(formId, toId, label1, label2)

依赖关系，表示一个系统（formId）对另一个系统（toId）的依赖关系（label）。
注：label1、label2都不是必填参数。

Rel_Neighbor(formId, toId, label1, label2)

如Rel，但是强调formId和toId为水平关系。

Rel_R(formId, toId, label1, label2)

如Rel，但是强调toId在formId的右边。

Rel_L(formId, toId, label1, label2)

如Rel，但是强调toId在formId的左边。

Rel_U(formId, toId, label1, label2)

如Rel，但是强调toId在formId的上边。

Rel_D(formId, toId, label1, label2)

如Rel，但是强调toId在formId的下边。

Rel_Back(formId, toId, label1, label2)

如Rel，但是关系是从toId指向formId。刚好相反。

Rel_Back_Neighbor(formId, toId, label1, label2)

如Rel_Neighbor，但是关系是从toId指向formId。刚好相反。

System_Boundary(id, label ){system1, system2…}

系统组，表示system1和system2为一个系统组。用虚框，把几个系统圈起来。
代码示例

System_Boundary(item1, "银行系统"){
    System(banking_system, "网上银行系统", "允许客户查看有关其银行帐户的信息，并进行付款。")
    System_Ext(mainframe, "大型机银行系统", "存储有关客户、帐户、交易等的所有核心银行信息。")
}

三.实用工具

1.IDEA插件

PlantUML