2021年1月27日

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

  当Draw.io将一个复杂的图形在多页上分成逻辑上更小的图形或使用多层时,它可以使复杂的图形更容易阅读和理解。

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

  此外,您可以通过向图表中的形状和文本添加自定义链接来充当交互式图表,这可以用作直观的切换开关-您可以在不使用工具栏的情况下与图表交互。

  向图中添加交互层可以带来好处的图包括网络或基础设施图、规划图和gitflow图。

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

  添加自定义链接的交互性。

  自定义链接是一小段JSON代码,包含您想要与之交互的图形元素的形状或层标识。

  您可以打开网页URL或自定义链接,打开或关闭元素显示,隐藏或突出显示图形元素,选择元素,滚动图形中的特定元素,或在视图框中设置自定义链接。

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

  数据:action/json,{“actions”:[{“toggle”:{“cells”:[“ywlyfkwt0qeqm7gh2ulp-177”]}]}

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

  交互式gitflow图示例。

  在下面的例子中,交互式图层切换开关将被添加到gitflow图形中,允许您单击下面的选项卡并显示或隐藏它们的分支。

  发布和发布修复。

  职能团队1及其开发部门。

  职能团队2及其开发部门。

  “主”、“夜间”和“修复”分支以及“开发”选项卡始终显示,因此它们被放置在背景层上。

  在diagrams.net浏览器中打开交互式gitflow示例。

  将形状设置为切换开关。

  当您单击用作切换的形状并且该形状存在于要隐藏的层或组中时,您不能再次单击它。

  复制要用作切换的形状,然后将其粘贴到背景层。

  将它们直接放在其他层上的原始形状下,这样当您单击时,图表元素将不会移动。

  复制图层ID。

  选择“视图”>“层”,或者如果您看不到它,请按Ctrl+Shift+L/Cmd+Shift+L显示“层”对话框。

  选择一个图层,然后在图层对话框中单击编辑数据(三个垂直点)。

  复制图层标识——一个由数字和字母组成的长字符串。

  提示:如果要切换形状而不是图层,请按Ctrl+M或Cmd+M编辑形状的元数据,然后复制它们的id(短符号)。

  创建自定义链接。

  去jgraph.github.io/drawio-tools/tools/link.html.

  将层标识粘贴到单元格/层文本字段中。您可以在自定义链接中切换多个层或形状-添加它们的所有形状/层id,并用空格分隔它们。

  点击4.点击此处添加!在下面较大的文本字段中生成自定义链接。

  单击复制到剪贴板复制自定义链接。

  向形状添加自定义链接。

  回到diagrams.net编辑器,右键单击图中的形状并选择编辑链接,或者选择该形状并使用键盘快捷键Alt+Shift+L..

  在第一个文本字段中输入自定义链接,然后单击应用。

  请确保将相同的链接添加到背景图层上的匹配形状,以便您可以再次切换图层。

  与您的图表互动。

  查看图表编辑器时,您可以通过三种方式与图表进行交互:

  单击“层”对话框中的复选框。

  如果您切换到的图层被锁定,请以与查看器中的图表交互相同的方式直接单击该形状。

  如果图层未锁定,当操作选择形状时,自定义链接将显示在标记的工具提示中。单击此链接可显示或隐藏您的图层和形状。