使用代码产生标准的软件架构图之C4

news2025/4/4 3:47:49

在软件开发的流程中，软件架构图是重要的软件文档，软件架构图包含有多个层级，最常见的，有软件的整体架构和组件、类等图。

整体架构可能使用PPT或者一些绘图工具Visio来绘制
组件、类等图有UML的标准，也可以使用Visio 来绘制

但在实际的开发中，特别是敏捷开发中，对于软件架构图文档往往出现以下状况：

软件架构图混乱
敏捷开发的副作用让很多团队停止或缩减了图表

这一方面又有一部分原因是绘制或调整软件架构图比较麻烦，对开发者而言，最熟悉的是代码，于是慢慢就有了由代码产生图的方式和实现。于此同时，需要定义哪些软件架构图有就有人进行了整理，这也就是C4产生的背景。
此外，在使用IDE以及AI协助产生Code的基础上，使用Code产生架构图也就有了很大的优势。

C4 是什么？

C4模型（Context, Container, Component, Code 模型）是一种用于软件系统的图形表示的框架。C4模型由 Simon Brown 提出，主要用来解决软件架构文档的各种问题。

C4的内容是什么？

C4 就是4个C开头的单词，分别代表四种类型的图：

Context Diagram：背景图，系统如何融入环境（包括用户和其他系统）
Container Diagram：容器图，系统如何由容器（不是容器技术，应用程序 or 存储）组成
Compoment Diagram：组件图，展示特定容器的实现
Code Diagram：代码图，使用UML展示

这四种类型的图，分别代表了四个层次的视角:

Context: 显示系统与其环境之间的交互，如用户、系统和服务等。在这一层，系统被视为一个黑盒子。
Container: 揭示系统的高级架构风格，并描绘出主要的技术选型。在这一层，系统被分解成一些相互交互的容器，如 Web 服务器、桌面应用、数据库、移动应用、微服务等。
Component: 进一步细分容器为一系列的组件，并描述他们之间的交互。在这一层，将清楚地知道每个组件的职责，并能知道它们之间的通信与交互方式。
Code: 这是最底层的视角，对系统进行最详细的描述。它通常通过 UML 类图或者其他的代码级视图来展示。

每一层都为软件系统的某个方面提供了更多的细节。在很多情况下，你并不需要使用全部的四个级别；你可以根据需要选择适合自己的层数。C4模型的主要目标是帮助软件开发团队描述和理解复杂的软件架构，并且与利益相关人进行有效沟通。
在这里插入图片描述

第1层.Context Diagram 系统上下文图

Context Diagram ：显示构建的软件系统，以及系统与用户及其他软件系统之间的关系。

举例来看，以互联网银行系统的系统上下文为例，在环境中的关系是：
blob:https://www.kancloud.cn/fa954884-1027-4679-8e12-ba2ead87143b
图例对应的含义：

在这里插入图片描述

灰色方块：代表已经存在的系统
红色方块：待构建的系统

第2层. Container Diagram 容器图

将软件系统放大，显示组成该软件系统的容器（应用程序、数据存储、微服务等）。
技术决策也是该图的关键部分。

同样以互联网银行系统为例：
在这里插入图片描述

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

第3层： Compoment Diagram 组件图

组件图，将单个容器放大，以显示其中的组件。这些组件映射到代码库中的真实抽象（例如一组代码）
以虚拟的网上银行系统的组件图示例，显示了 API 应用程序中的一些组件（而不是全部）。

在这里插入图片描述

Spring MVC REST 控制器为JSON/HTTPS API 提供访问点，每个控制器随后使用其他组件访问数据库和大型机银行系统中的数据。

第4层： Code Diagram 代码图

这一层就很容易理解，就是UML。
虚拟的网上银行系统的UML 类图示例（部分），显示了组成MainframeBankingSystemFacade 组件的代码元素（接口和类）

在这里插入图片描述

C4的符号

C4 模型没有预定义任何特定的符号，上面的示例图中看到的是一个个简单的符号，适用于白板、纸张、便签、索引卡片和各种图表工具。
可以使用 UML 作为符号，并适当使用包、组件和原型。无论使用哪种符号，建议让每个元素都包含名称、元素类型（即“人”、“软件系统”，“容器”或“组件”）、技术选型（如果有的话），以及一些描述性文字。在图表中包含如此多的文本可能看起来很不寻常，但这些附加文本有助于消除软件架构图中通常会出现的不明确的表示。

在这里插入图片描述

如何代码产C4

产生C4 的工具也有不少，这里介绍两个：

Structurizr ：C4的官方提供了一个工具，是一个Java的war, 下载后可以在本地进行绘制。有免费版本，也有收费。但是目前没有IDE与其整合。
C4-PlantUML：基于PlantUML之上提供了C4绘制的代码语言， VS Code以及其他IDE都有相关的插件，在IDE中直接编写Code就可以实时看到图形。

此外，使用ChatGPT等AI也可以直接产生C4的Code。

关于 Structurizr

Structurizr 是一个动态交互的、模型驱动的软件架构图形化工具。这个工具旨在创造、分享和发布软件架构图。

Simon Brown, C4模型的创始人开发了Structurizr。

Structurizr 提供了一个在线版本，也提供了本地部署的版本（Structurizr Lite）让你可以在本地机器上运行。该工具可以创建交互式和动态的软件架构图，不同于静态的图像或是手绘图。在线地址： https://structurizr.com/dsl
在这里插入图片描述

Structurizr 的一些主要特性包括：

动态和交互的视图：与只能展示静态图像的工具不同，Structurizr 允许用户查看各种视图，通过点击和拖拽图形元素来探索软件架构。
DSLs 和 API：Structurizr 提供了一种领域特定语言 (DSL)，用于定义和描述软件架构模型。同时也提供了API让你使用你首选的编程语言来创建模型。
C4模型支持：Structurizr 支持 C4 模型，这是一种常用的、易理解的软件架构可视化方法。
集成和导出选项：Structurizr 可以导出到多种格式，包括 PlantUML、Web Sequence Diagrams 和 DOT (Graphviz)，并且支持与常见的技术和工具（如 Git, PlantUML 和 Mermaid）进行集成。