本文旨在向读者展示一种简单易学、规则清晰、深受开发者青睐的软件架构可视化方法——C4模型，同时将亲自指导大家如何通过编写代码来制作出精美的C4架构图表。

01

前言

在今年的敏捷团队组建过程中，我成功运用Suite执行器实现了单元测试的自动化操作。除了Suite执行器，Juint还提供了哪些执行器呢？带着这样的疑问，我的探索之旅就此展开。

优秀的软件架构图表能够明确展现设计理念，助力开发团队对系统布局有直观把握，增强团队间的交流与协作，发现并解决潜在难题和限制，合理规划并实施系统功能的拓展与改进，进而提升开发效能与成果，保障系统设计得以顺利执行并达到预期目标。

本文将向各位展示一种便于掌握、规则清晰、深受开发者喜爱的软件架构可视化工具——C4模型，同时，我们将通过实际操作，逐步指导大家如何运用代码技巧绘制出精美的C4架构图表。

阅读本文之后，读者画的架构图将会是这样的：

注：该图例仅作绘图示例使用，不确保其完整性、可行性。

02

C4模型

理解这一过程，MCube 首先会根据模板的缓存状态来决定是否需要从网络上获取最新的模板。获取到模板后，它会执行模板的加载。在加载过程中，会将生成的内容转换成视图树的结构。转换完成后，会利用表达式引擎来解析表达式，并获取到正确的数值。同时，通过事件解析引擎，它会解析用户自定义的事件，并完成这些事件的绑定。在解析赋值和事件绑定工作完成后，MCube 将开始渲染视图。最终，目标页面会被展示在屏幕上。

2.1  C4模型整体介绍

C4代表了一种软件架构的可视化方法。所谓架构可视化，就是通过图形化的手段，将软件架构的设计以精确、明了、赏心悦目的形式展现出来。它并非旨在指导开发者如何进行架构设计，而是旨在帮助开发者将设计理念转化为简洁且直观的架构图表。

架构可视化的手段众多，其中流行的方法包括“4+1”视图模型和C4模型。这些模型旨在描绘架构的形态，一旦架构确定，不论采用何种模型进行展示，其核心内容应当保持一致，不存在哪种模型更优的问题。

C4模型作为一种简便易学的软件架构表示法，深受开发者喜爱。它并未限定必须采用特定的图形或建模语言进行绘制，因此用户能够非常自由地创作出架构图。

C4模型将整个系统自上而下划分为四个层次，依次为：系统视图、架构视图、设计视图和代码视图。每一层均在前一层的基础上进行了优化和拓展，逐层深入地阐述系统的结构，具体如图所示。

图2 XXX

2.2 

系统视图居于核心位置，作为软件架构图的基础，全面展现了整个系统的概貌。它着重呈现了系统的边界、与之关联的用户、辅助的支撑系统以及与其他系统的互动关系。在这一层级中，并未涉及具体的技术细节，如技术选择、通信协议、部署计划以及其他底层信息，因而非常适合向非技术背景的人员介绍系统概要。

作用：清晰地展示待构建的系统、用户以及现有的IT基础设施。

在描述该核心系统及其关联用户和辅助系统时，应严格限定在所讨论的核心系统及其直接相关联的用户群体和支撑性系统之内，不得包含与核心系统无关的其他系统。举例来说，若是在阐述打车系统，则不应将药店系统等无关系统纳入描述范围。同时，必须保证所描述的仅为一个单独的软件系统。

主要元素：内待描述的软件系统。

保障要素包括与核心软件系统紧密相连的个人或角色，如用户、参与者、特定角色等，以及那些位于我们软件系统界限之外的外部关联系统。

面向对象：涵盖软件开发团队所有成员，无论是技术背景还是非技术背景的人员。

推荐给大多数团队：是的。

该网上银行系统的系统上下文图展示了用户群体及其关联的其他软件系统。此系统即将被构建，银行的个人客户将通过它来查阅账户信息并执行支付操作。该系统本身依赖银行现有的巨型计算机银行系统执行相关操作，同时利用银行现有的电子邮件系统向客户发送邮件。

图例：

2.3 

（容器）视图是对 的放大，是对 细节的补充。

留意此处所指的容器，并非等同于常规的容器中介件。其定义的范畴涵盖了那些可以独立运行或独立部署的个体。通常而言，它涉及应用及其所依赖的中间件，比如服务器端的Web应用、单页应用、桌面应用、移动应用、数据库架构、文件系统，以及Redis、MQ等。

显示了软件架构的高级形状以及系统内各容器之间的职责分工。

本层内容不仅呈现了系统所采用的核心技术路线，而且还详细阐述了容器之间的通讯与互动机制。

功能在于呈现整个系统开发的范围限制，彰显了高级别的技术选择，揭示了系统内部模块间的职责与交流。

范围：单个软件系统，关注的系统内部的应用构成。

核心组成部分包括软件系统内的容器，诸如经过Boot打包的应用程序，MySQL数据库，Redis缓存系统以及消息队列等。

支持元素：直接使用容器的人员和外部依赖系统。

面向对象：软件技术领域的专业人士，涵盖但不限于软件架构师、开发工程师以及运维与支持团队成员。

推荐给大多数团队：是的。

请注意，该视图并未阐述部署的具体方案、集群配置、数据复制以及故障转移等关键细节。对于部署方面的信息，将借助视图进行相应的展示。

该系统，由五个主要模块构成，包括服务器端的Web应用程序、单页应用程序、移动应用程序、服务器端API应用程序以及数据库。

该容器图的示例图解呈现，其中主要展示了数据库、应用程序以及浏览器的图标。

2.4 

对单一容器进行扩大，便能观察到其内部的构成部分。（构成部分）该视图揭示了容器是由众多“构成部分”拼接而成的，具体到每个部分的功能、作用以及相应的技术实施细节。

作用：展示了可执行的容器内部构成与分工，可直接指导开发。

范围：单个容器。

主要组成部分：涉及容器内部的结构单元，这些元素通常包括Dubbo服务接口、 API接口以及数据访问对象（Dao）等。

支持元素：直接连接到容器的人员和外部依赖系统。

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

推荐给大多数团队：用于指导开发，当有需要时创建。

示例：

图例：

2.5 Code

放大组件视图，则得到出组件的Code视图（代码视图）。

在Code视图中，通常我们会运用UML类图、ER图等图形化表示方法。这种视图的详细程度是可以选择的，一般而言，它可以通过集成开发环境（IDE）等工具根据实际需求进行生成。然而，除非是针对最为关键或结构较为复杂的组件，否则并不推荐将如此详尽的视图应用于其他部分。

在注重敏捷开发的今天，一般不建议产出Code视图。

范围：单个组件。

主要涉及：特定区域内的构成模块中的编程单元intellij idea画uml图，诸如类别、接口、实体、操作函数、数据表格等。

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

建议广大团队参考：实际上，绝大多数集成开发环境均能根据需求自动生成此类详尽信息。

2.6 

C4模型呈现了一个软件系统的静态画面，无论是何种情况，其描述都集中在单一软件系统之上。然而，在现实情境中，软件系统并非孤立存在。为了全面描绘这些软件系统在企业、组织、部门等特定环境中与其他系统如何相互融合，C4模型引入了扩展视图，即系统景观图。

它们处于同一层次，均不触及技术执行层面，亦不涉及系统内部的具体细节。系统全景图本质上是一幅对特定软件系统缺乏关注性的系统环境图，其中包含的软件系统均适用于C4方法进行深入剖析。

适用范围：企业/组织/部门/等。

主要元素：与所选范围相关的人员和软件系统。

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

示例：

图例：

既然已经存在了，为何还要额外引入呢？这主要是因为它仅适用于单一应用，无法全面展现整个流程，若要全面展示，则必须借助其他工具。

以一个实例来说明，当A系统对B系统进行调用，而B系统又进一步调用C系统时，A系统的开发团队在绘制系统架构图时，只能将A系统和直接关联的B系统纳入图中，无法将C系统包含在内，因为他们对B与C之间的交互细节并不了解；在组织架构的更高层次上，管理者必须掌握所有系统的完整交互链条，因此A、B、C各系统团队的开发人员将各自负责的系统信息整合到同一架构图中，最终共同完成了这一任务。

A系统的图：

全部系统的图：

2.7 

动态图旨在演示静态模型中的各个元素在运行过程中的协同作用。此类图表能够使图表中的各个部分自由分布，并通过带有编号的箭头来标示其执行的具体顺序。

范围：特定功能、故事、用例等。

主要元素和支持元素，根据实际需求，可包括软件系统、容器或各类组件。

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

示例：

图例：

2.8 

部署图旨在阐述静态模型中的软件系统或容器实例在特定环境，如生产、测试、预发、开发等，下的具体部署策略。

C4的部署图参照了UML部署图的设计，不过为了更清晰地展示容器与部署节点间的对应关系，对其进行了适当的简化处理。

部署节点指的是软件系统或容器实例所运行的场所，这可以类比为物理基础设施（如物理服务器或设备）、虚拟化基础设施（如IaaS、PaaS、虚拟机）、容器化基础设施（如容器）、执行环境（如数据库服务器、Java EE web/应用服务器、IIS）等多种形式。部署的节点支持嵌套使用，同时亦能纳入基础设施节点，诸如DNS服务、负载均衡器以及防火墙等设施。

在部署图中，您可以根据需要自由选用Web、Azure等平台提供的图形符号，但务必保证所选图标均包含在图例之中，以免造成误解。

针对特定部署环境，限制对其中若干软件系统（如生产环境、暂存环境、开发环境等）的修改。

主要元素：部署节点、软件系统实例和容器实例。

支持元素：用于部署软件系统的基础设施节点。

面向对象：涵盖软件开发团队及其周边的技术人员群体；具体包括但不限于软件架构师、编程开发者、基础设施架构师以及运营与支持团队的工作人员。

示例：网上银行系统的开发环境部署图：

图例：

网上银行的生产环境部署图

图例：

2.9 C4模型规范以及

为确保C4模型架构图的清晰度，该模型制定了绘图标准，并配备了自查工具。

2.9.1 C4模型规范

2.9.2

绘制完C4模型图表后，可进行自我检验，确保其中不存在不规范元素。该图表已被制作成网页版，您可通过访问链接https://.com//来查看。

03

C4模型架构图代码绘制实战

理解，首先 MCube 会依据模板缓存状态判断是否需要网络获取最新模板，当获取到模板后进行模板加载，加载阶段会将产物转换为视图树的结构，转换完成后将通过表达式引擎解析表达式并取得正确的值，通过事件解析引擎解析用户自定义事件并完成事件的绑定，完成解析赋值以及事件绑定后进行视图的渲染intellij idea画uml图，最终将目标页面展示到屏幕。

3.1  文本绘图工具选型

关于C4模型的架构图的绘制，一般有两种方式：

使用绘图软件是其中一种方法，这些软件允许用户直接拖动图形元素和修改样式来生成图像，比如draw.io和PPT等。这类工具的一大优势在于其极高的灵活性，能够满足众多细致的需求；然而，它们在调整元素样式时往往较为复杂。

第二种工具是依托文本的绘图软件，通过特定的语法来描绘图像中的各个元素，最终能够根据这些文本描述自动生成图片。此类工具的便利之处在于绘图过程迅速，只需依照语法编写描述文档，便能生成图像，且元素的样式已预先调试完成；然而，其不足之处在于生成的样式可能并不完全符合个人审美，且调整起来较为不便。

本文着重讲解第二种，即基于文本的绘图工具。

基于文本的绘图工具有很多，例如：、、，分别有自己的语法。

工具

语法

使用方法

如有侵权请联系删除！