共计 1476 个字符，预计需要花费 4 分钟才能阅读完成。
1. 引子
软件架构图是一种十分敌对的表达方式，能够用来表述你将如何构建一个软件系统（事后设计）或者现有的软件系统是如何工作的（回顾文档、常识分享）。
事实中存在一些问题：
- 很多软件架构图是由凌乱的框和线组成的，具体问题能够参见文章：软件架构图的艺术（次要是不可了解的符号和不明确的语义），含混不清的软件结构图容易导致误会。
- 麻利开发让很多团队进行、缩减他们的图表和文档工作（包含应用 UML），可能只在白板上绘制长期表，或者应用通用的图表工具（如：Visio）。
为了解决这些问题，提出了一个 C4 模型 的货色，C4 的含意如下：
- Context：上下文
- Container：容器
- Component：组件
- Code：代码
形成四个档次图表，通过这些图表来形容不同缩放级别的软件架构，每个图表实用于不同的受众。
应用 C4 模型来形容本人的软件架构时，能够通过不停的放大，把架构从宏观到细节具体地形容进去。就好比咱们看地图一样，总览（System Context）关注的是国家层面，而后到省（Container）的层面，由多个省来形成国家，再下一层，到市（Container）, 再到市是如何建设起来的（Code）。这四种不同的抽象层次的定义会让咱们更容易固定住咱们探讨的档次以及独特意识。
2. 怎么做
C4 模型应用容器（应用程序、数据存储、微服务等）、组件和代码来形容一个软件的动态构造。构造如下：
1. 零碎上下文
第一层是零碎上下文图，展现正在构建的软件系统，应用该零碎的用户，与该零碎有关联的其余软件系统。下图是一个互联网银行零碎的零碎上下文：
银行客户应用互联网银行零碎来查看本人的账户信息并进行领取，互联网银行应用已有的大型机银行零碎来执行此操作，并应用银行现有的电子邮件系统向客户发送电子邮件。图中：灰色示意软件系统曾经存在，蓝色示意待建设的软件系统。
2. 容器
第二层是容器层，将软件系统放大，显示组成该软件系统的容器（应用程序、数据存储、微服务等）。技术决策也是该图的要害局部。下图是互联网银行的容器图实例。显示了互联网银行零碎（虚线框）由 5 个容器组成：服务器端 web 应用程序、客户端单页面应用程序、挪动应用程序、服务器端 API 应用程序和数据库。
- Web App：是一个 Java/Spring MVC Web 应用程序，他提供动态内容（HTML、CSS、JavaScript）和组成单页面利用的内容。
- 单页面利用：是一个运行在客户浏览器中的 Angular 应用程序，提供网上银行的全副性能。
- 挪动 App：构建在 Xamarin 框架上的跨平台的应用程序，可能拜访网上银行的局部性能。
- API 应用程序：通过 JSON/HTTPS API 为挪动 App 和单页面利用提供服务，他所需的数据从关系型数据库中获取。API 应用程序还应用专用的 XML/HTTPS 接口与现有的大型机银行零碎进行通信，获取客户账户和交易信息。还会调用邮件服务给用户发送邮件。
3. 组件
第三层是组件图，将单个容器放大，显示的就是组件。这些组件反映到代码库中的实在形象。上面是一个虚构网上银行的组件示例图，显示了 API 应用程序中的一些组件（不是全副）。
4. 代码
如果的确想要或者真有必要，能够放大个别组件，显示该组件的实现形式，上面是一个网上银行的 UML 类图（局部），显示了组成 MainframeBankingSystemFacade 组件的代码元素（接口和类）。
这个 UML 图显示该组件由很多类组成，实现细节间接反映代码。不倡议创立这种具体水平的图表，这些图表能够间接从大多数的 IDE 主动生成。
参考资料
- C4 模型 – 可视化架构设计
- infoq- 用于软件架构的 C4 模型