C4架构模型介绍

decemwind 收录于 Architecture

2022-08-03 约 5700 字预计阅读 12 分钟次阅读

C4架构模型介绍

简介

当你和一个软件工程师讨论一个软件系统的架构时, 通常情况下拿出的架构图就是一个乱七八糟, 到处都是框框和连线的图. 符号不一致, 命名混乱, 关系不清楚, 术语不统一等各种问题

在软件行业里, 我们有统一的语言比如UML, ArchiMate, SysML, 但是在实际情况中, 开发团队往往早就抛弃了这些东西而选择更简单的框框和连线图. 在敏捷开发中, 很多软件开发团队失去了这种可视化沟通的能力

代码地图

C4模型可以描述为代码的地图, 之所以叫地图, 是因为它是分层细化的, 跟Google Map一样可以任意的放大缩小来看整个系统

C4模型主要分为4层:

System Context: 提供一个地图的起点, 表示软件系统与真实世界周边的交互关系
Container: 进入到软件系统本身, 展示一个High-level的技术架构
Component: 进入到某一个具体的Container, 展示Container里面包含的各个组件
Code: 进入到一个具体的Component, 可以使用UML类图等表示, 展示组件怎么实现的

C4模型基于软件架构上不同的抽象层次. 简单的抽象和图标类型使C4模型非常容易学习使用. 不需要4种层次的图表都使用, 只需要选择对团队有价值的就可以了(通常来说System Context和Container图表就足够了)

抽象

C4模型将软件系统分为了Containers, Components, Code和People四种抽象类型

Person

person就是使用软件系统的一个用户(如参与者, 角色等)

Software System

Software System就是给用户提供价值的系统最高层级的抽象. 包括要构建的系统, 依赖/被依赖的系统等

Container

这里的Container不是Docker里的概念, 它代表的是一个应用application或者是数据存储data store. Container是支撑软件系统正常运行的基本组件. 在实际场景下, Container可能是:

服务端Web应用: 比如
- 在Tomcat上跑的JavaEEWeb应用
- 在IIS上跑的基于ASP.NET的MVC应用
- 在WEBrick上跑的Ruby on Rails应用
- Node.js应用
客户端Web应用: 在Web浏览器中跑的JS应用比如Angular, Backbone.JS, jQuery等
客户端桌面应用: 使用WPF开发的Windows桌面应用, 使用Objective-C开发的OS X桌面应用, 使用JavaFX开发跨平台桌面应用等
移动端应用: iOS app, Android app, Windows Phone app等
服务端Console应用: 一个独立应用(比如 public static void main), 一个批处理程序等
Serverless Fuction: 一个单独的Serverless Function(比如Amazon的Lambda, Azure的Function等)
数据库: 关系型数据库的schema或者database, 文档存储, 图数据等, 比如MySQL, SQL Server, Oracle, MongoDB, Riak, Cassandra, Neo4j等
Blob或内容存储: Blob存储比如Amazon的S3, Azure的Blob Storage等, 或者内容分发网络(CDN), 比如Akamai, Amazon CloudFront等
文件系统: 一个本地文件系统或者网络文件系统(比如SAN, NAS等)
Shell脚本: 比如使用Bash编写的一个shell脚本
等等

一个Container本质上是一个上下文或者边界, 在其中执行一些代码或者存储一些数据. 每一个Container都是可以单独部署/运行的容器, 或者是一个运行时环境, 通常来说(但不一定)在自己的进程空间中运行. 因此, 容器之间的通信通常采用进程间通信的形式

Component

Component这个词在软件开发行业里有各种不同的含义, 在这里, Component定义为封装定义良好的接口的实现, 它实现了一组相关联的功能. 如果之前使用过Java或者C#之类的语言, 可以简单的将Component是接口的实现类的集合. 诸如如何打包这些Component这种问题是独立正交的

重点需要关注的是: 一个Container中的所有的Components通常是执行在同一个进程空间里的. 在C4模型中, Component不是独立可部署的单元

核心图表

C4模型需要创建Context, Container, Component, Code(可选)四个视图, 这也是C4模型名字的由来

Level1: 系统上下文图

系统上下文图是了解一个软件系统很好的开始在中间画一个框表示你的系统, 周围画上交互的用户或者其他系统这里不需要有太多细节, 只是展示一个系统的蓝图. 重点关注在人(用户,角色等)和软件系统, 而不是技术,协议或者其他low-level的细节. 他是可以给非技术人员看的图

范围: 单一软件系统

主要元素: 范围内的软件系统

支持元素: 与软件系统直接交互的人(用户, 角色, 身份等)或者软件系统(外部依赖). 通常这些其他的软件系统在自己的软件系统范围之外, 对他们没有责任或者所有权

目标受众: 软件开发团队内外的所有人, 包括技术人员和非技术人员

是否推荐: 是

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


@startuml
!include <C4/C4_Context>
AddRelTag("mail", $lineStyle = DashedLine())
Person("customer", "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
System("bank", "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments")
System_Ext("email", "E-mail System", "The internal Microsoft Exchange e-mail system.")
System_Ext("main", "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Lay_D(customer, bank)
Lay_D(bank, main)
Lay_R(bank, email)
Rel("customer", "bank", "Views account balances, and make payments using")
Rel("bank", "main", "Gets account information from, and makes payments using")
Rel_R("bank", "email", "Sends e-mail using", $tags="mail")
Rel_U("email", "customer", "Sends e-mails to", $tags="mail")
@enduml

PlantUML表示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


!include <C4/C4_Context>
AddRelTag("mail", $lineStyle = DashedLine())
Person("customer", "Personal Banking Customer", "A customer of the bank, with personal bank accounts.")
System("bank", "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments")
System_Ext("email", "E-mail System", "The internal Microsoft Exchange e-mail system.")
System_Ext("main", "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Lay_D(customer, bank)
Lay_D(bank, main)
Lay_R(bank, email)
Rel("customer", "bank", "Views account balances, and make payments using")
Rel("bank", "main", "Gets account information from, and makes payments using")
Rel_R("bank", "email", "Sends e-mail using", $tags="mail")
Rel_U("email", "customer", "Sends e-mails to", $tags="mail")

Level 2: Container视图

Container是一个独立运行/部署的单元, 可能是执行代码或者存储数据 Container视图展示的是软件的高层架构, 体现整个软件系统的职责分配. 还可以体现软件的技术选型和容器间的通信技术. 对软件开发人员和支撑运营人员都有用

范围: 单一软件系统

主要元素: 软件系统内的Container

支持元素: 与容器直接交互的人或者软件系统

目标受众: 软件开发团队内外的技术人员; 包括软件架构师, 开发者和运营支撑人员

是否推荐: 是

注意: 不体现部署态的东西, 比如集群, 冗余, 备份等

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


@startuml
!include <C4/C4_Container>
Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts")
System_Boundary(bank, "Internet Banking System") {
	Container(web_app, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application")
	Container(sp_app, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser")
	Container(mobile_app, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
	ContainerDb(db, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, acccess logs, etc.")
	Container(api_app, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API")
	Lay_R(web_app, sp_app)
	Lay_R(sp_app, mobile_app)
	Lay_D(web_app, db)
	Lay_D(sp_app, api_app)
}
System_Ext(email, "E-mail System", "The internal Microsoft Exchange e-mail system.")
System_Ext(main, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Lay_R(mobile_app, email)
Lay_R(api_app, main)
Lay_D(customer, sp_app)
Lay_D(email, main)

Rel_D(customer, web_app, "Visit bigbank.com/ib using", "HTTPS")
Rel_D(customer, sp_app, "Views account balances, and make payments using")
Rel_D(customer, mobile_app, "Views account balances, and makes payments using")
Rel_R(web_app, sp_app, "Delivers to the customer's web browser")
Rel_D(sp_app, api_app, "Makes API calls to", "JSON/HTTPS")
Rel_D(mobile_app, api_app, "Makes API calls to", "JSON/HTTPS")
Rel_L(api_app, db, "Reads from and writes to", "JDBC")
Rel_R(api_app, main, "Makes API calls to", "XML/HTTPS")
Rel_U(api_app, email, "Sends e-mail using", "SMTP")
Rel_U(email, customer, "Sends e-mails to")
@enduml

PlantUML表示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


!include <C4/C4_Container>
Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts")
System_Boundary(bank, "Internet Banking System") {
	Container(web_app, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet banking single page application")
	Container(sp_app, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser")
	Container(mobile_app, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
	ContainerDb(db, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, acccess logs, etc.")
	Container(api_app, "API Application", "Java and Spring MVC", "Provides Internet banking functionality via a JSON/HTTPS API")
	Lay_R(web_app, sp_app)
	Lay_R(sp_app, mobile_app)
	Lay_D(web_app, db)
	Lay_D(sp_app, api_app)
}
System_Ext(email, "E-mail System", "The internal Microsoft Exchange e-mail system.")
System_Ext(main, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Lay_R(mobile_app, email)
Lay_R(api_app, main)
Lay_D(customer, sp_app)
Lay_D(email, main)

Rel_D(customer, web_app, "Visit bigbank.com/ib using", "HTTPS")
Rel_D(customer, sp_app, "Views account balances, and make payments using")
Rel_D(customer, mobile_app, "Views account balances, and makes payments using")
Rel_R(web_app, sp_app, "Delivers to the customer's web browser")
Rel_D(sp_app, api_app, "Makes API calls to", "JSON/HTTPS")
Rel_D(mobile_app, api_app, "Makes API calls to", "JSON/HTTPS")
Rel_L(api_app, db, "Reads from and writes to", "JDBC")
Rel_R(api_app, main, "Makes API calls to", "XML/HTTPS")
Rel_U(api_app, email, "Sends e-mail using", "SMTP")
Rel_U(email, customer, "Sends e-mails to")

Level 3: 组件视图

组件视图是显示Container是如何使用一组Components组合起来的仕途, 体现每一个Component的职责分工和技术实现细节

范围: 单一Container

主要元素: Container中的所有组件

支持元素: 当前软件系统中的所有Container, 加上与Container直接交互的人和系统

目标受众: 软件架构师与开发人员

是否推荐: 不建议所有团队都创建, 只有你觉得有必要有价值的时候再创建, 并考虑自动创建

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


@startuml
!include <C4/C4_Component>
AddRelTag("use", $lineStyle = DashedLine())
Container(sp_app, "Single-Page Application", "JavaScript and Angualr", "Provides all of the Internet banking functionality to customers via their web browser.")
Container(mobile_app, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
Container_Boundary(api_app, "API Application") {
	Component(sign, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System")
	Component(reset, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.")
	Component(accounts, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts")
	Component(security, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
	Component(mail, "E-mail Component", "Spring Bean", "Sends e-mails to users.")
	Component(facade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
}
ContainerDb(db, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(email, "E-mail System", "The internal Microsfot Exchange e-mail system.")
System_Ext(main, "Mainframe Banking System", "Stores all of the core banking information about customers,accounts,transactions,etc.")

Lay_D(sp_app, api_app)
Lay_R(sp_app, mobile_app)
Lay_D(mobile_app, accounts)
Lay_D(sp_app, sign)
Lay_R(sign, reset)
Lay_R(reset, accounts)
Lay_D(sign, security)
Lay_D(reset, mail)
Lay_D(accounts, facade)
Lay_D(security, db)
Lay_D(mail, email)
Lay_D(facade, main)

Rel(sp_app, sign, "Makes API calls to", "JSON/HTTPS", $tags="use")
Rel(sp_app, reset, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(sp_app, accounts, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(mobile_app, sign, "Makes API calls to", "JSON/HTTPS", $tags="use")
Rel(mobile_app, reset, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(mobile_app, accounts, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(sign, security, "Uses", $tags="use")
Rel(reset, security, "Uses", $tags="use")
Rel(reset, mail, "Uses", $tags="use")
Rel(accounts, facade, "Uses", $tags="use")
Rel(security, db, "Reads from and writes to", "JDBC", $tags="use")
Rel(mail, email, "Sends e-mail using", $tags="use")
Rel(facade, main, "Uses", "XML/HTTPS", $tags="use")
@enduml

PlantUML表示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


!include <C4/C4_Component>
AddRelTag("use", $lineStyle = DashedLine())
Container(sp_app, "Single-Page Application", "JavaScript and Angualr", "Provides all of the Internet banking functionality to customers via their web browser.")
Container(mobile_app, "Mobile App", "Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device.")
Container_Boundary(api_app, "API Application") {
	Component(sign, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System")
	Component(reset, "Reset Password Controller", "Spring MVC Rest Controller", "Allows users to reset their passwords with a single use URL.")
	Component(accounts, "Accounts Summary Controller", "Spring MVC Rest Controller", "Provides customers with a summary of their bank accounts")
	Component(security, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
	Component(mail, "E-mail Component", "Spring Bean", "Sends e-mails to users.")
	Component(facade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
}
ContainerDb(db, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(email, "E-mail System", "The internal Microsfot Exchange e-mail system.")
System_Ext(main, "Mainframe Banking System", "Stores all of the core banking information about customers,accounts,transactions,etc.")

Lay_D(sp_app, api_app)
Lay_R(sp_app, mobile_app)
Lay_D(mobile_app, accounts)
Lay_D(sp_app, sign)
Lay_R(sign, reset)
Lay_R(reset, accounts)
Lay_D(sign, security)
Lay_D(reset, mail)
Lay_D(accounts, facade)
Lay_D(security, db)
Lay_D(mail, email)
Lay_D(facade, main)

Rel(sp_app, sign, "Makes API calls to", "JSON/HTTPS", $tags="use")
Rel(sp_app, reset, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(sp_app, accounts, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(mobile_app, sign, "Makes API calls to", "JSON/HTTPS", $tags="use")
Rel(mobile_app, reset, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(mobile_app, accounts, "Make API calls to", "JSON/HTTPS", $tags="use")
Rel(sign, security, "Uses", $tags="use")
Rel(reset, security, "Uses", $tags="use")
Rel(reset, mail, "Uses", $tags="use")
Rel(accounts, facade, "Uses", $tags="use")
Rel(security, db, "Reads from and writes to", "JDBC", $tags="use")
Rel(mail, email, "Sends e-mail using", $tags="use")
Rel(facade, main, "Uses", "XML/HTTPS", $tags="use")

Level4: 代码

最后, 你可以使用代码图描述代码怎么实现; 可以使用UML的类图, ER图等这是可选的, 通常可以IDE自动生成, 你可以只体现你想体现的部分, 一般不建议具体到这种层次的细节, 除非是特别重要或者复杂的组件

范围: 单一组件

主要元素: 组件中的代码元素(类、接口、对象、函数、数据库表等)

目标受众: 软件架构师和开发人员

是否推荐: 不推荐, 对于长期维护文档, 大多数的IDE可以按需自动生成这种层次的细节

补充视图

系统全景图

C4模型提供一个软件系统的静态视图, 但在现实世界中, 软件系统不是孤立的. 你经常需要从一个公司的视角来看所有的IT系统一起配合工作的视图. 这种情况下, 可以在C4模型之上再创建一个整体的蓝图. 跟系统上下文视图一样, 整个全景图描述的是一个组织的边界, 内部外的用户和内外部的系统

范围: 整个企业

主要元素: 企业相关的人和软件系统

目标受众: 技术和非技术人员, 软件开发团队内外的人

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


@startuml
!include <C4/C4_Context>
AddRelTag(use, $lineStyle=DashedLine())
Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts")
Enterprise_Boundary(plc, "Big Bank plc") {
	System_Ext(atm, "ATM", "Allows customers to withdraw cash")
	System(bank, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
	System_Ext(email, "E-mail System", "The internal Microsoft Exchange e-mail system.")
	Person_Ext(service, "Customer Service Staff", "Customer service staff within the bank")
	System_Ext(main, "Mainframe banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
	Person_Ext(office, "Bank Office Staff", "Administration and support staff within the bank.")
}
Lay_R(customer, bank)
Lay_D(atm, bank)
Lay_R(atm, service)
Lay_D(bank, email)
Lay_R(bank, main)
Lay_R(email, office)
Rel_R(customer, service, "Asks questions to", "Telephone")
Rel_R(customer, atm, "Withdraws cash using")
Rel_R(customer, bank, "Views account balances, and makes payments using")
Rel_L(email, customer, "Sends e-mails to")
Rel_D(atm, main, "Uses")
Rel_D(service, main, "Uses")
Rel_R(bank, main, "Gets account information from, and makes payments using")
Rel_D(bank, email, "Sends e-mail using")
Rel_U(office, main, "Uses")
@enduml

PlantUML表示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


!include <C4/C4_Context>
AddRelTag(use, $lineStyle=DashedLine())
Person(customer, "Personal Banking Customer", "A customer of the bank, with personal bank accounts")
Enterprise_Boundary(plc, "Big Bank plc") {
	System_Ext(atm, "ATM", "Allows customers to withdraw cash")
	System(bank, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
	System_Ext(email, "E-mail System", "The internal Microsoft Exchange e-mail system.")
	Person_Ext(service, "Customer Service Staff", "Customer service staff within the bank")
	System_Ext(main, "Mainframe banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
	Person_Ext(office, "Bank Office Staff", "Administration and support staff within the bank.")
}
Lay_R(customer, bank)
Lay_D(atm, bank)
Lay_R(atm, service)
Lay_D(bank, email)
Lay_R(bank, main)
Lay_R(email, office)
Rel_R(customer, service, "Asks questions to", "Telephone")
Rel_R(customer, atm, "Withdraws cash using")
Rel_R(customer, bank, "Views account balances, and makes payments using")
Rel_L(email, customer, "Sends e-mails to")
Rel_D(atm, main, "Uses")
Rel_D(service, main, "Uses")
Rel_R(bank, main, "Gets account information from, and makes payments using")
Rel_D(bank, email, "Sends e-mail using")
Rel_U(office, main, "Uses")

动态图

动态图表现在一个Story, UseCase, Feature中, 静态模型中的元素在运行态的关系. 动态图基于UML通信图(也叫协作图). 跟UML的时序图表达的内容类似, 通信图可以将元素随意放置, 使用带编号的行为交互来表示交互顺序.

范围: 企业, 软件系统或者Container

主要的和支持的元素: 与范围相关; 企业(与系统全景图一样), 软件系统 (与上下文图或Container图相同), Container(与组件图相同)

目标受众: 软件开发团队内外的技术和非技术人员

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


@startuml
!include <C4/C4_Dynamic>
Container(sp_app, "Single-Page Application", "JavaScript And Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
ContainerDb(db, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container_Boundary(api_app, "API Application") {
	Component(sign, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
	Component(security, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
}

RelIndex_R(1, sp_app, sign, "Submits credentials to", "JSON/HTTPS")
RelIndex_D(2, sign, security, "Calls isAuthenticated() on")
RelIndex_L(3, security, db, "select * from users where username = ?", "JDBC")

Lay_D(sp_app, db)
Lay_R(sp_app, sign)
Lay_D(sign, security)
Lay_R(db, security)
@enduml

PlantUML表示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


!include <C4/C4_Dynamic>
Container(sp_app, "Single-Page Application", "JavaScript And Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
ContainerDb(db, "Database", "Oracle Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container_Boundary(api_app, "API Application") {
	Component(sign, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
	Component(security, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
}

RelIndex_R(1, sp_app, sign, "Submits credentials to", "JSON/HTTPS")
RelIndex_D(2, sign, security, "Calls isAuthenticated() on")
RelIndex_L(3, security, db, "select * from users where username = ?", "JDBC")

Lay_D(sp_app, db)
Lay_R(sp_app, sign)
Lay_D(sign, security)
Lay_R(db, security)

部署图

部署图讲静态模型中的软件系统、容器映射到基础设施中. 基于UML部署图, 简化了容器和部署节点之间的映射. 部署节点比如物理设备(如物理服务器或设备), 虚拟设备(如 IaaS, PaaS, VM), 容器设备(如Docker), 运行环境(如:数据库,Java EE/应用服务器, Microsoft IIS). 部署节点可以嵌套

你可能还需要一些基础设施节点比如:DNS, 负载均衡, 防火墙等

范围: 一个活多个软件系统

主要元素: 部署节点, 软件系统实例, Container实例

支持元素: 软件系统部署使用的基础设施节点

目标受众: 软件开发团队内外的技术人员; 包括软件架构师, 开发人员, 基础设施架构师, 运维支撑人员

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


!include <C4/C4_Deployment>
AddElementTag("fallback", $bgColor="#c0c0c0")
AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5")
WithoutPropertyHeader()

title Deployment Diagram for Internet Banking System - Live
Deployment_Node(plc, "Live", "Big Bank plc", "Big Bank plc data center"){
	AddProperty("Location", "London and Reading")
	Deployment_Node_L(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){
		AddProperty("Java Version", "8")
		AddProperty("Xmx", "512M")
		AddProperty("Xms", "1024M")
		Deployment_Node_L(apache, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){
			Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
		}
	}
	AddProperty("Location", "London")
	Deployment_Node_L(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS", "The primary database server."){
	Deployment_Node_L(oracle, "Oracle - Primary", "Oracle 12c", "The primary, live database server."){
	ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
	}
}
AddProperty("Location", "Reading")
Deployment_Node_R(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", "The secondary database server.", $tags="fallback") {
Deployment_Node_R(oracle2, "Oracle - Secondary", "Oracle 12c", "A secondary, standby database server, used for failover purposes only.", $tags="fallback") {
ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback")
}
}
AddProperty("Location", "London and Reading")
Deployment_Node_R(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS", "A web server residing in the web server farm, accessed via F5 BIG-IP LTMs."){
AddProperty("Java Version", "8")
AddProperty("Xmx", "512M")
AddProperty("Xms", "1024M")
Deployment_Node_R(apache2, "Apache Tomcat", "Apache Tomcat 8.x", "An open source Java EE web server."){
Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
}
}
}
Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}
Deployment_Node(comp, "Customer's computer", "Mircosoft Windows of Apple macOS"){
Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){
Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
}
}
Rel(mobile, api, "Makes API calls to", "json/HTTPS")
Rel(spa, api, "Makes API calls to", "json/HTTPS")
Rel_U(web, spa, "Delivers to the customer's web browser")
Rel(api, db, "Reads from and writes to", "JDBC")
Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback")
Rel_R(db, db2, "Replicates data to")
SHOW_LEGEND()

PlantUML实现:

https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/samples/C4_Deployment%20Diagram%20Sample%20-%20bigbankplc-details.puml

目录

C4架构模型介绍

C4架构模型介绍

简介

代码地图

抽象

Person

Software System

Container

Component

核心图表

Level1: 系统上下文图

Level 2: Container视图

Level 3: 组件视图

Level4: 代码

补充视图

系统全景图

动态图

部署图