涉及官方页面有两个：
链接相关内容：Work with custom links (diagrams.net) 链接自动生成的编辑页面：Create Custom Link (jgraph.github.io)
1.概念梳理
①三个ID
具有ID定义的有三类：shape, page, layer
shape：（形状，或者翻译为“页面组件”更好）
右键单击组件，选择编辑数据，或选择形状，然后在 Windows 或 macOS 上使用键盘快捷方式。（在Windows系统中MCmd指的是左下角的Fn按键）
组件是啥：（画图过程中除去连接线之外的能写字的框框就是组件）
本人操作时的组件ID：
page：（页面）
确保没有选中任何页面中的组件，这时就是选中整个页面，同样点击快捷键
layer：（图层）
在顶端“查看”中选中“图层”，即可在操作页面边上单独显示，点击三个点就能看到图层ID
本人操作时的图层ID：
②cells和cellset
cells：组件集合，将多个组件打包一起操作（见：案例一）
cellset：（细胞集，要和区分开）
有三种组合： ①组件ID和图层ID的阵列： ②标签： ③组件ID和图层ID的组合和标签：
③tags
A.对组件插入标签
步骤一：找到“编辑数据”
快捷键：
步骤二：插入属性
经过测试：标签内容填入中文也能正常使用
B.隐藏/显示某标签下的所有组件
使用软件自带功能实现隐藏/显示某标签下的所有组件
隐藏和显示的效果展示：
📝其他相关：
通过编辑组件链接实现同样功能，见【案例三】
2.案例分析
①出现和隐藏组件集合
操作情景介绍：
官方在线实例，仅有以下四个组件： - 组件一：2 - 组件二：3 - 组件三：5 - 组件四：7
操作目标：：
首次点击组件二：显示组件三和组件四 再次点击组件二：隐藏组件三和组件四
对组件二编辑链接如下：
data:action/json,{"actions":[{"toggle": {"cells": ["5", "7"]}}]}
实现对组件5和组件7组成的组件集合的出现/隐藏操作：
官方实例链接：Flowchart Maker & Online Diagram Software
②跳转页面并标红显示指定组件
操作情景介绍：
第一页：6a731a19-8d31-9384-78a2-239565b7b9f0 - 组件一：WdN1Ksd8K1vhimKOKk36-1 第二页：inMrV686DGa-_m8voByF - 组件二：UMRVjk544k3288iqwkjJ-0 - 组件三：UMRVjk544k3288iqwkjJ-2 - 组件四：UMRVjk544k3288iqwkjJ-4
操作目标：：
点击组件一：跳转到第二页 + 组件三标红显示 点击组件二：组件三标红显示
对组件一编辑链接如下：
data:action/json,{"actions":[{"open": "data:page/id,inMrV686DGa-_m8voByF"},{"highlight":{"cells":["UMRVjk544k3288iqwkjJ-2"],"opacity":100, "color": "red"}}]}
效果展示：（两张截图分别是第一页和第二页的组件情况）
③隐藏/显示某标签下的所有组件
除了软件自带功能能实现之外，还可以通过在组件连接中键入代码的内容实现：
操作情景介绍：
第一页：6a731a19-8d31-9384-78a2-239565b7b9f0 - 组件一：WdN1Ksd8K1vhimKOKk36-1（隐藏标签：猫；显示标签：狗） 第二页：inMrV686DGa-_m8voByF - 组件二：UMRVjk544k3288iqwkjJ-0（隐藏标签：猫；显示标签：狗） * 组件三：UMRVjk544k3288iqwkjJ-2（标签：猫） * 组件四：UMRVjk544k3288iqwkjJ-4（标签：狗）
操作目标：
点击组件一：跳转到第二页 + 隐藏组件四 点击组件二：隐藏组件四
对组件一编辑链接如下：（需要现实现页面跳转）
data:action/json,{"actions":[{"open": "data:page/id,inMrV686DGa-_m8voByF"},{"show": {"tags": ["猫"]}},{"hide": {"tags": ["狗"]}}]}
对组件二编辑链接如下：（与标签指代的组件在同页面）
data:action/json,{"actions":[{"show": {"tags": ["猫"]}},{"hide": {"tags": ["狗"]}}]}
效果展示：
④跳转/选中到指定组件
这也是我原来需要的功能，因为它我不得不自己动手找资源，最终还是自已动手丰衣足食😂，后续会把笔记放到B站和CSDN博客，希望能方便一下他人😘。
操作情景介绍：
第一页：6a731a19-8d31-9384-78a2-239565b7b9f0 - 组件一：WdN1Ksd8K1vhimKOKk36-1 第二页：inMrV686DGa-_m8voByF - 组件二：UMRVjk544k3288iqwkjJ-0 * 组件三：UMRVjk544k3288iqwkjJ-2 * 组件四：UMRVjk544k3288iqwkjJ-4
操作目标：
点击组件一：跳转到第二页 + 跳转到组件四 点击组件二：跳转到组件四
对组件一编辑链接如下：（需要现实现页面跳转）
data:action/json,{"actions":[{"open": "data:page/id,inMrV686DGa-_m8voByF"},{"select":{"cells":["UMRVjk544k3288iqwkjJ-4"]}}]}
对组件二编辑链接如下：（与标签指代的组件在同页面）
data:action/json,{"actions":[{"select":{"cells":["UMRVjk544k3288iqwkjJ-4"]}}]}
效果展示：（故意将组件四划出视线，显示效果更明显！）
两个组件效果一致，就只展示一张截图。
❗ 注意事项：
①标签内容要用引号引住，如： ②link属性中的效果只能有一个，比如案例二和三中的功能不能同时在组件一中实现 ③期间一定要注意符号都要用英文，例如
3.操作总结
由于我是把一个个曹祖含义试出来的，所以将此部分写在实际案例后。
到目前为止已知含义的操作有：
1.open：跳转页面，格式为 {"open": "data:page/id,{目标页面的ID}"} 2.toggle：轮转/切换，即对link中指代的操作轮转进行执行和取消（未测试跨页情况下的效果），格式为： - 组件集合：{"toggle": {"cells": ["{组件ID}", "{组件ID}"]}} - 标签：{"toggle": {"tags": ["{目标标签值}"]}}（未测试，仅是猜想） 3.show/hide：显示/隐藏操作元素，格式为 - 显示某标签下的组件：{"show": {"tags": ["{目标标签值}"]}} - 显示组件或组件集合：{"show": {"cells": ["{组件ID}", "{组件ID}"]}} （隐藏操作同理） 4.highlight：高亮显示操作元素，格式为： - 高亮某标签下的组件：{"highlight": {"tags": ["{目标标签值}"]}} - 高亮组件或组件集合：{"highlight": {"cells": ["{组件ID}", "{组件ID}"]}} 可以在操作元素（cells或tags）同层后面设置高亮样式： - "opacity":100 —— 透明度为100% - "color": "red" -- 高亮颜色为红色 5.select：选中某个操作元素并显示在视线中（未测试是否支持同时选中多个组件），格式为： - 已知支持选中单个组件：{"select":{"cells":["{目标组件ID}"]}} 6.scroll：未知 7.viewbox：未知
4.常用快捷键汇总
快捷键一：Alt+Shift+L（打开“编辑链接”）
快捷键二：Ctrl+Fn+M（查看组件ID/页面ID）
快捷键三：Ctrl + M（打开“编辑数据”）
