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

在 draw.io 中绘制依赖关系图

drawio5年前 (2021-07-09)draw.io教程10

作为一种有向图,依赖关系图可以可视化存在依赖组件的流程或情境,例如决策制定、进度安排、产品开发、IT 或电信基础设施、供应链和制造链等等。它们可以帮助您找到最佳顺序,并识别可能影响应用程序、基础设施或流程的关键路径或薄弱环节。

依赖关系图中使用的形状和连接线都很简单——一种形状表示节点(通常是圆形或椭圆形),连接线带有一个或两个箭头,用于指示依赖关系的方向。连接线可以带有标签,也可以没有标签。

专门的依赖关系图

PERT(计划评审技术)是一种用于基于任务的项目的依赖关系图,它包含每个活动的时间估算,通常标注在每个节点上。与关键路径法结合使用,它可以识别最长的依赖路径,并指示完成这些路径所需的时间。以下 draw.io 模板属于“业务”类别。 在我们的图表查看器中打开此 PERT 图。


依赖关系图常用于软件工程或 IT 领域,用于显示每个功能性代码或基础设施组件所依赖的内容。

调用图(多重图)是一种特殊的依赖关系图,它展示了过程的调用顺序——可以是静态的(代表所有可能的路径),也可以是动态的(代表一次执行)。许多开发环境和编译器都可以生成调用图,您可以利用这些图来识别并安全地移除无用代码,或者精确定位无限递归错误。

渲染依赖图是一种调度系统,它分析和优化视频数据的每一帧,以减少内存消耗并提高图形 API 的性能。

游戏设计师和作家使用谜题依赖图叙事依赖图导航图来规划冒险和解谜游戏以及撰写书籍,以确保他们的故事、谜题和世界不会过于线性,从而避免让读者感到无聊。

资源管理生产链游戏使用依赖关系图来约束研究和建造顺序,并允许AI“玩家”选择策略和分配资源。以下示例展示了名为《Satisfactory》的游戏的部分生产链,连接线上标明了生产速度。

提示:在构建故事或谜题的依赖关系图时,从结尾开始,然后倒推。

在 draw.io 中创建依赖关系图

  1. 转到diagram.new,选择您的存储位置,如果出现提示,则创建一个新的空白图表。

  2. 双击绘图画布,选择椭圆形状,将其添加到画布中。

  3. 单击节点上的四个方向箭头之一,然后选择一个形状,将其作为该节点的依赖项添加到画布中。

提示:如果您要为软件程序创建依赖关系图,随着方法、库或组件的增加,图会很快变得复杂。最好在开发初期就绘制此类图表。

要记录现有的复杂系统,可以插入系统的文本描述,并自动生成依赖关系图

依赖关系图模板

draw.io 模板库的“业务”部分提供了依赖关系图(PERT 图)模板。

  1. 在app.diagrams.net的 draw.io 在线编辑器中创建一个新图表,即可查看模板库。或者,点击“排列”>“插入”>“模板”打开模板库对话框。

  2. 在左侧选择“商务”类别。点击右侧模板右上角的放大镜图标,即可查看更大的预览图。

  3. 选择一个模板,然后单击“创建”“插入”将其添加到绘图画布中。

您还可以根据对自身情况的文字描述生成自定义智能模板。

  1. 点击“排列”>“插入”>“模板”,或者创建一个新图表,然后点击“生成”

  2. 输入文字描述,然后按Enter或单击“确定”。添加文字描述dependency graph可以限制智能生成器只能生成合适的图表类型。

  3. 点击放大镜图标可查看生成的图表的放大预览。

  4. 点击左上角的铅笔图标重新生成图表——可以有无数种变化。

  5. 单击“插入”“创建”将生成的模板添加到绘图画布中。

diagrams.net 网站依赖关系图

在GitHub 上此网站的存储库,您可以查看网站构建系统的依赖项,如清单文件中所示GemfileGemfile.lock在 GitHub 中,单击Insights > 依赖关系图)。

点击箭头>展开 GitHub 依赖关系图的相应部分。如果组件有多个依赖项,则会在不同的组件下多次列出。

通过视觉方式更容易理解这些依赖关系是如何相互关联的,尽管随着依赖关系层级的增加,图表可能会变得非常复杂。

下面的示例依赖关系图仅显示了用于构建此网站的三个级别的依赖关系。Gemfile

在 diagrams.net 查看器中打开此示例

你可知道?

GitHub 开源软件项目可能会在代码库中显示依赖关系图。GitHub 通过 Depdendabot 提供的依赖关系审查功能会利用这些依赖关系图来分析新的依赖项,并帮助您识别拉取请求中潜在的安全漏洞、不兼容的许可证以及维护风险。

自动生成的依赖关系图

有很多工具可以分析你的代码,并使用 Graphviz DOT 图形描述语言生成过程调用的文本描述。在 draw.io 中,你可以插入这段文本描述来自动生成依赖关系图。

在下面的示例中,使用了依赖关系的前三层来Gemfile自动生成依赖关系图。依赖关系图的文本描述列出了每个节点的所有出链,每行一条,如下所示:

www.diagrams.net-source->jekylljekyll->addressablejekyll->coloratorjekyll->em-websocket...
  1. 点击“排列”>“插入”>“高级”>“来自文本”。或者,点击+工具栏中的图标,然后选择“高级”>“来自文本”

  2. 从大文本框下方的列表中 选择“图表” 。

  3. 将文本粘贴到大文本框中,然后单击“插入”按钮生成图表。现在您可以设置节点和连接线的样式并重新排列它们。

在我们的图表查看器中打开此依赖关系图

Mermaid依赖关系图:您可以使用类似的方式,通过Mermaid语法插入依赖关系图。单击“排列”>“插入”>“Mermaid”打开Mermaid输入对话框。

从电子表格生成依赖关系图:您可以插入 CSV 文本以及格式信息,以根据 CSV 数据自动生成并设置依赖关系图的样式。单击“排列”>“插入”>“高级”>“CSV”以查看 CSV 数据和格式信息的示例。