[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:diagram-editor-workbench":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 使用 relation-graph 构建图形编辑工作台\n\n## 这个示例构建了什么\n\n这个示例构建的是一个全屏图形编辑器，而不是一个只读图查看器。画布外围包裹了顶部工具栏、底部创建面板、浮动节点和连线工具栏、右键菜单、布局对话框、可选标尺、自定义背景层，以及一个小地图开关。\n\n用户可以基于模板创建新节点和连线，调整节点尺寸与样式，编辑连线几何形态和标记，对选中节点进行分组，把节点移动到容器节点中，切换布局策略，以及保存或重新打开本地版本。这里最重要的并不是某一个单独的控件，而是这个示例如何把 `relation-graph` 组合成一个文档式编辑界面，并让历史记录、混合连接目标和多种自定义节点渲染器协同工作。\n\n## 数据如何组织\n\n运行中的文档模型是显式定义的。`MyGraphDocJson` 存储四个顶层集合：`nodes`、`lines`、`fakeLines` 和 `myGroups`。这意味着编辑器不会把分组或混合目标连接当成临时 UI 状态处理，它们与普通节点和链接一样，都是同一份已保存文档的一部分。\n\n容器归属通过节点上的 `data.ownerContainerId",true,500,1782615411950]