日常软件开发中，总是能看到一些诠释项目软件结构的图表。

图表主要的主要作用是帮助项目上的人员能够理解正在构建的软件架构，建立一个共同的愿景。当我们开发一个新功能时，能够参考已经建立起来的架构，以后的开发过程中向原有的架构靠拢。图表的存在也可以让新人快速理解项目架构，也能够帮助向非开发人员解释项目架构。

但是常常在图表中会有一些不容易理解的点，例如不同的颜色，不同的线条，不同的线框，分别代表了什么意思。

所以用图表来可视化软件，需要注意下面这些：

• 清晰明确的表示图表中每一种颜色代表的意思。

• 清晰明确的表示不同的图表元素的意义，例如不同形状的元素、虚线、实线、各种线框等等。

• 清晰明确的表示图表元素之间的关系，不要遗漏了。

• 不要使用模糊或太过抽象的术语。

• 不要遗漏了技术选择。

• 层次不要太混乱。

• 不要包含太多的细节。

• 不要遗漏了语境或逻辑起点。

为了清晰明了的表达图表的含义，给图表添加一个简单的图例（解释颜色编码、线条样式、形状等）是很有用的办法，图例的主要意义就是让团队保持一致的标记，避免歧义。

简单模型 - 适用于面向对象语言编程的软件系统

image.png

面向对象语言编程的软件系统一般由多个容器构成，一个容器又由多个组件构成，一个组件由一个或多个类实现。

对于类/组件/容器/系统的解释：

• 类：在面向对象系统中，类是软件系统中的最小单元。
• 组件：组件是由至少一个类组成的逻辑群组。
• 容器：容器指的是能够在它内部执行组件或者驻留数据的东西，一般容器都是可执行文件，容器和容器之间的通信需要远程接口，例如SOAP网络服务、RESTful接口等等。
• 系统：系统是能够提供价值的最高抽象层次。

通过一个简单模型来了解系统以后，要如何在项目中更加精确的表示整个架构，就可以采用C4模型。

C4模型

C4 分别是上下文（Context）、容器（Container）、组件（Component）和代码（Code）层次的图表，可以用这些图表来描述不同级别的软件架构，每种图表都有着不同的受众。这个就有点像世界地图、国家地图、省地图、市区街道地图，逐层递进，展示里面的内容，而每种地图的关注点也不同。

语境图/上下文 (Context)

语境图（有些参考文章里面翻译的是上下文），它展示的是系统大局景观的广角视图，主要包括关键的系统依赖和参与者，关注的重点是人和系统。

在画语境图时，要明确的标出：

• 我们构建的软件系统是什么？
• 谁用这个系统？
• 如何融入已有的IT环境？

例子：
银行的个人客户使用互联网银行系统查看有关银行账户的信息并进行支付。互联网银行系统使用银行现有的大型机银行系统来执行此操作，并使用银行现有的电子邮件系统向客户发送电子邮件。
图中的颜色表示哪些软件系统已经存在（灰色）以及待构建的系统（蓝色）。【此例子来源于网络】

image.png

容器图(Container)

首先明确容器的概念，容器指的是组成软件系统的逻辑上的可执行文件或者过程。容器之间的通信一般是进程间的通信。

所以画一个容器的时候要包含：

• 名称：容器的逻辑名称（如“面向互联网的Web服务器”、“数据库”等）。
• 技术：容器的技术选择（如ApacheTomcat7等）。
• 职责：容器职责的高层次声明或清单。

之后就是画各个容器之间的通信：

• 容器之间交互的目的（如“读/写数据”、“发送报告“等）；
• 容器之间的通信方法（如Web服务、REST、Java远程方法调用、Java消息服务）；
• 容器之间的通信方式（如同步、异步、批量等）；
• 容器之间的协议和端口号（如HTTP、HTTPS、SOAP/HTTP、SMTP、FTP等）。

例子：
互联网银行系统（虚线框）由五个容器组成：服务器端 Web 应用程序、客户端单页面应用程序、移动应用程序、服务器端 API 应用程序和数据库。
Web 应用程序是一个 Java/Spring MVC Web 应用程序，它仅提供静态内容（HTML、CSS 和 JavaScript），包括组成单页应用程序的内容。
单页面应用程序是一个运行在客户网络浏览器中的 Angular 应用程序，提供所有的网上银行功能。
或者，客户可以使用跨平台 Xamarin 移动应用程序访问互联网银行的部分功能。单页应用程序和移动应用程序都调用 JSON/HTTPS API，这是由服务器端运行的另一个 Java/Spring MVC 应用程序提供的。
API 应用程序从数据库中获取用户信息（关系数据库模式）。API 应用程序还使用专有的 XML/HTTPS 接口与现有的大型机银行系统进行通信，以获取有关银行账户或交易的信息。如果需要向客户发送电子邮件，API 应用程序还会调用现有的电子邮件系统。【此例子来源于网络】

image.png

通过上面这个容器图可以让人了解高层次的技术选择，了解不同容器之间的交互，展示了之前的语境图和之后的组件图的连接，对软件开发者和支持/运营人员很有用。

组件图(Component)

组件图就是将单个容器放大，它可以让你清晰的看到容器的关键逻辑组件、组件之间的层级关系和依赖。
所以组件图要标明：

• 名称：组件的名称
• 技术：对组件的技术选择
• 职责：对组件职责的高层次的声明

例子：
下面是一个虚拟的网上银行系统的组件图示例，显示了 API 应用程序中的一些组件（而不是全部）。两个 Spring MVC REST 控制器为 JSON/HTTPS API 提供访问点，每个控制器随后使用其他组件访问数据库和大型机银行系统中的数据。【此例子来源于网络】

image.png

类图/代码(Code)

类图是一个可选的细节层次。如果想解释某个组件被怎样实现，可以画少量高层次UML类的图。一般是出于软件的复杂性，团队的规模和经验的考虑才画这个图。

总结

C4模型是比较容易理解、也比较容易使用的工具，可以通过C4模型来整理我们的架构，不论是一开始就设计的架构，还是回顾性总结的架构，都很适用。然后在画图过程中，一定要注意图表表达的含义没有歧义，达到团队内部的一致性非常重要。

阅读书籍：
[英]Simon Brown. 程序员必读之软件架构 (图灵程序设计丛书) .
例子参考 用于软件架构的 C4 模型