三维模型图设计步骤教程（C4模型绘制软件架构图）

最近被安利了绘制软件架构图的C4模型，才发现之前只是按照自己的经验进行架构图设计，有些架构图也只是由混乱的框和线组成而已，并没有成熟的方法做为指导。所以今天就跟大家一起学习下C4模型，如何指导我们高效地进行软件架构图设计。

C4模型是Simon Brown提出的一种软件架构的可视化模型，简单来说，就是如何描述软件架构，如何画架构图，而不是如何设计软件架构。C4模型反映软件架构师和开发人员如何思考和构建软件的抽象，一种在不同抽象层次上交流软件架构的简单方法。C4模型把系统分为四层，每层都代表着不同的视图架构，关注点也不同。

C4模型

1. 上下文：System Context，系统高层次的抽象，一个系统可由多个容器组成。
2. 容器：Container，容器代表组件执行或驻留的地方，它可以是web容器、应用服务器、客户端或数据库，例如Docker可以认为是这样的容器。
3. 组件：Component，一个组件可以认为是由一个或多个类代码组成的逻辑组。
4. 代码：Code，代码是软件系统最小的构建模块。

第①层是系统上下文图，它显示了构建的整个软件系统，以及系统与用户及其他软件系统之间的逻辑关系，可以说是一个系统的外观。如下图描述了一个虚构的互联网银行系统的系统上下文：

系统上下文

客户使用互联网银行系统查看银行账户信息并进行支付。互联网银行系统使用银行现有的大型计算机银行系统来执行此操作，并使用银行的电子邮件系统向客户发送电子邮件。图中灰色表示已经存在的软件系统，蓝色表示待建的系统。

第②层是容器，放大软件系统，显示组成该软件系统的容器（应用程序、微服务、数据存储等），它是可独立部署/独立运行的单元。容器图显示了软件体系结构的高层结构以及如何在其间分配职责，它还显示了主要的技术选择以及容器之间的通信方式，技术决策也是容器图的关键部分。

例如，互联网银行系统（虚线框）由五个容器组成：服务器端Web 应用程序、客户端单页面应用程序、移动应用程序、服务器端API 应用程序和数据库。

容器图

第③层是组件，即将单个容器放大，就会显示其中的组件，每个组件是什么，它们的职责以及技术/实现细节。下面是一个网上银行系统的组件图示例，显示了API应用程序中的一些组件。

组件图

第④层是代码，如果放大某个组件，就会显示组件是如何通过代码实现的。下面是网上银行系统的UML类图，显示了组成 MainframeBankingSystemFacade 组件的代码元素（接口和类）。

类图

有关C4模型的更多信息，大家可以参阅 https://c4model.com/

大家可能会问到，文章中的图都是用什么工具画的呀，有没有推荐？当然，作者本人之前就专门写了篇文章给大家介绍如何画图、用什么工具，可以点击《干货：程序员必备画图技能》。

[比心]欢迎关注，八零后程序员不定期分享技术干货！