创建交互式图并使用自定义链接切换图层

将复杂的图分成多个页面上的逻辑较小图或使用多个层时，可使复杂图更易于阅读和理解。

要了解有关复杂图的更多信息，可以使用图查看器底部的工具栏或图编辑器中的层对话框和页面选项卡，切换层的显示并切换到另一个图页面。

逐步浏览页面并与diagrams.net查看器中的图层进行交互

另外，您可以通过向图表中的形状和文本添加自定义链接来充当交互式图表，这些链接可用作直观的切换开关-无需使用工具栏即可与图表进行交互。

可以从图中添加交互层而受益的图包括网络或基础结构图，平面图和gitflow图。

在diagrams.net中了解有关使用图层的更多信息

使用自定义链接添加交互性
自定义链接是一小段JSON代码，其中包含您要进行交互的图元素的形状或层ID。

你可以open一个Web URL或自定义链接，toggle打开或关闭元素show，hide或highlight图元素，select元素，scroll以图中的特定元素，或者设置viewbox一个自定义链接。

例如，自定义链接中的以下JSON操作可切换图层的显示-如果可见，则将其隐藏，如果隐藏，则将其显示。

data:action/json,{“actions”:[{“toggle”:{“cells”:[“YwLYfkWT0Qeqm7Gh2uLp-177”]}}]}

了解有关自定义链接的更多信息

交互式gitflow图示例

在下面的示例中，交互式层toggle开关将添加到gitflow图中，使您可以单击以下标签并显示或隐藏其分支。

发布和发布修复
功能团队1及其开发分支
功能团队2及其开发分支
始终显示Master，Nightly和Hotfix分支，以及Development标签，并因此将其放置在背景层上。

在diagrams.net查看器中打开交互式gitflow示例

设置形状以用作拨动开关
当单击用作切换的形状并且该形状存在于要隐藏的图层或组中时，将无法再次单击它。

复制要用作切换的形状，然后将其粘贴到“背景”图层上。
将它们直接放置在其他层上的原始形状下，以便单击时图元素不会出现移动位置。
将要用作切换的形状的副本添加到图表中的背景层
复制图层ID
选择“视图”>“图层”，或者如果看不到，请按Ctrl+Shift+L/Cmd+Shift+L显示“图层”对话框。
选择一个层，然后在“层”对话框中单击“编辑数据” （三个垂直点）。
编辑图层的元数据以找到其图层ID
复制图层ID-数字和字母的长字符串。
复制图层ID，以便您可以建立自定义链接
提示：如果要切换形状而不是图层，请按Ctrl+M或Cmd+M编辑形状的元数据，然后复制其ID（短号）。

建立自定义链接
转到jgraph.github.io/drawio-tools/tools/link.html。
将图层ID粘贴到“单元格/图层”文本字段中。您可以在自定义链接中切换多个图层或形状-添加它们的所有形状/图层ID，并用空格分隔。
单击4.单击此处添加！在下面的较大文本字段中生成自定义链接。
单击复制到剪贴板以复制自定义链接。
粘贴形状和图层ID，生成自定义链接，然后使用此免费工具将其复制到剪贴板
将自定义链接添加到形状
返回diagrams.net编辑器，右键单击图中的形状，然后选择“编辑链接”，或者选择该形状并使用键盘快捷键Alt+Shift+L。
编辑形状的元数据以添加自定义链接
在第一个文本字段中输入自定义链接，然后单击Apply。
将自定义链接粘贴到第一个文本字段中，然后单击“应用”。
确保在“背景”图层上将相同的链接添加到匹配的形状，以便可以再次切换图层。
与您的图表互动
查看图编辑器时，可以通过三种方式与图进行交互：

单击“层”对话框中的复选框。
如果您切换的图层被锁定，则以与在查看器中与图进行交互相同的方式直接单击形状。
如果图层已解锁，则Action选择形状时，自定义链接将在带有标签的工具提示中显示。单击此链接可以显示或隐藏您的图层和形状。
将自定义链接粘贴到第一个文本字段中，然后单击“应用”。

在diagrams.net查看器中打开此交互式gitflow