C4 model technical architecture diagram--context diagram

In the design of the system architecture diagram, including common 技术架构图and 业务架构图.
Technical architecture diagram The architecture diagram is not only important when designing the system in the early stage, but also as a guide when developing or maintaining it in the later stage.

1. About C4 model

Official website
in a format belonging to the technical architecture diagram, C4, respectively 上下文（Context）, 容器（Container）, 组件（Component）and 代码（Code）. The four levels correspond to different angles.

C4 model system architecture diagram of the split, and in fact, 微服务拆分and DDD领域拆分thought very much like. Only reasonable split can ensure the system 开发效率和维护效率.

2. Context diagram

1. Official example

Code

@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. Function description

Page related

LAYOUT_WITH_LEGEND()

This function indicates 图例说明that after adding, it will be displayed as follows 图例说明.

LAYOUT_AS_SKETCH()

After adding this function, the page will change to draft mode, as shown below.
Note: In draft mode, Chinese cannot be displayed due to font reasons.

title

The title of the legend.

LAYOUT_TOP_DOWN

Note that this function, without parentheses, indicates the arrangement of the entire graph 上下为主.

LAYOUT_LEFT_RIGHT

Note that this function, without parentheses, represents the arrangement of the entire graph 左右为主.

Module related

Actor(id, name , describe)

User function, expressed as a user, has three parameters.
id: As a unique identifier, used for subsequent relationship links.
name: name.
describe: description.

Actor_Ext(id, name , describe)

External user function, expressed as a user of an external system, has three parameters. Gray
id: as a unique identifier, used for subsequent relationship links.
name: name.
describe: description.

System(id, name , describe)

System function, expressed as a system.
id: As a unique identifier, used for subsequent relationship links.
name: name.
describe: description.

System_Ext(id, name , describe)

External system, expressed as an external system, generally refers to an existing system that needs to be connected. Gray
id: as a unique identifier, used for subsequent relationship links.
name: name.
describe: description.

Relationship-related

Rel(formId, toId, label1, label2)

Dependency, which represents the dependency (label) of one system (formId) on another system (toId).
Note: label1 and label2 are both 不是必填参数.

Rel_Neighbor(formId, toId, label1, label2)

Such as Rel, but stressed formIdand toIdis 水平关系.

Rel_R(formId, toId, label1, label2)

Such as Rel, but stressed toIdat formIdthe 右边.

Rel_L(formId, toId, label1, label2)

Such as Rel, but stressed toIdat formIdthe 左边.

Rel_U(formId, toId, label1, label2)

Such as Rel, but stressed toIdat formIdthe 上边.

Rel_D(formId, toId, label1, label2)

Such as Rel, but stressed toIdat formIdthe 下边.

Rel_Back(formId, toId, label1, label2)

Such as Rel, but the relationship is from toIdpoint to point formId. Just the opposite.

Rel_Back_Neighbor(formId, toId, label1, label2)

Such as Rel_Neighbor, but the relationship is from the toIdpoint formId. Just the opposite.

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

System group, which means the system1sum system2is a system group. Use virtual boxes to enclose several systems.
Code example

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

3. Practical tools

1. IDEA plugin

PlantUML