当前位置:首页 > draw.io教程

创建C4模型和图表

drawio6年前 (2020-07-29)draw.io教程8

C4建模方法用于以抽象而简洁的方式描述和定义架构。C4由Simon Brown设计,它是一种不同的软件开发建模方法,专注于四个“C”:上下文(人员)、容器、组件和代码。

draw.io 提供了一个 C4 图形库,其中包含创建所有这些图表所需的各种图形,以及用于绘制代码级别常用详细图表的丰富的 UML 图形库。标签通过元数据添加到这些图形中。

C4 模型图展现了构建任何通用软件或业务系统所需的三个设计层次。第一层图是对系统的高级抽象概述,每一层都更加细致,第四层通常用于描述实现细节。

C4 记谱法中使用的形状

与其他建模符号相比,C4 符号非常简单。建议在任何 C4 图中都包含图例,说明哪些形状用于表示每个元素。

  • 软件系统

  • 容器

  • 成分

  • 关系 - 使用 draw.io 中的标准连接器

draw.io 中的 C4 形状库

C4 形状库中提供了以下形状。

启用 C4 形状库

  1. 点击左侧面板中的“更多形状” 。

  2. 在“软件”部分选择C4形状库,然后单击“应用”

或者,您也可以使用以下链接,在我们免费的在线编辑器中立即创建一个新的 C4 图:https://app.diagrams.net/?libs =c4

提示:要显示超出软件范围的系统,请在格式面板中更改其样式。

编辑 C4 形状

  1. 将形状添加到绘图画布后,双击该形状即可打开其元数据。

  2. 请按文本框所示输入详细信息,然后单击“应用”

当您将鼠标悬停在 draw.io 编辑器或查看器中的每个形状上时,工具提示将显示此元数据。

C4系统上下文图

这张顶层图也是最抽象的。C4 系统上下文图展示了全局概览,用户如何与整个软件系统交互,以及您的软件如何与其他现有软件系统集成。这些图表非常适合用来展示软件项目的范围,以及范围之外的内容。

在 draw.io 编辑器中打开此示例上下文图。

C4集装箱示意图

C4容器图展示了软件中的高级技术选择,包括Web和桌面应用程序、移动应用程序、数据库、文件系统等主要元素。容器是系统中独立运行的软件组件,用于执行代码或存储数据。对于软件工程师和IT支持人员来说,此图是一份非常有用的设计文档。

C4系统容器示意图示例

在 draw.io 编辑器中打开此示例容器图。

C4组件图

C4 组件图比UML组件图更简单,它提供了系统中每个容器的更多细节,显示了它们由哪些元素或组件构成以及它们如何交互,有时还包含软件架构师和开发人员的实现细节。

在 draw.io 编辑器中打开此示例组件图。

C4 类图(UML)

在C4建模的最终阶段,会使用UML类图、实体关系图以及UML图集中的其他图表来表示实际的实现细节。通常,这些图表可以在开发环境中根据代码自动生成,或者使用Mermaid.js等系统(可以导入到draw.io中)快速地以文本形式描述。

在 draw.io 编辑器中打开此示例 UML 类图。

在 draw.io 中扩展您的 C4 模型

draw.io 中的几个功能使查看分层图(例如 C4 模型中使用的图)更加方便,并可使用补充图对其进行扩展。

  • 多页图表将所有相关的图表放在一个文件中。

  • 页面之间的链接:为每个系统、容器和组件形状添加链接,跳转到图表中的相应页面。

  • UML、基础设施和其他形状库:如果您想使用 UML 或网络图或支持图(例如威胁建模)更详细地了解实现级别,您可以使用 draw.io 中提供的许多其他形状库。

  • 使用智能标签和占位符对于高级绘图员,您可以定义占位符样式,自动将形状样式设置为在范围内或超出范围。