1.概述
1.1 需求背景
（业务项目，脱敏，省略内容。。。）
1.2 关键难点功能分解
只列出一些对技术实现影响比较大和选型的点
- 编辑器画布
- 拖拉拽
- 属性面板
- 连线工具
- 外观内容
- 样式设置（位置&颜色字体）
- 撤销&还原操作
- 组件控件
- 支持自定义组件（建议图片）
- 画布组件支持点击指定超链接或按钮弹窗查看详情
- 预览拓扑绘制结果
2. 总体设计
2.1 界面设计
场景的各种可视化编辑器的界面结构都类似下图所示，本次拓扑编辑器也类似
2.2 编码设计
开发编辑器这种复杂功能，要设计好页面区块拆分、组件封装、数据通信等，将复杂问题简化，保证后期的可扩展性的同时，开发维护也简单。
2.2.1 代码结构设计
编辑器大致的代码目录结构举例
├── pages
│ ├── topology
│ │ ├── Header # 编辑器菜单栏
│ │ ├── Layout # 编辑器
│ │ │ ├── LeftAreaPanel # 左侧组件栏面板 （内部要细分区块组件）
│ │ │ ├── RightAreaPanel # 右侧属性栏面板 （内部要细分区块组件）
│ │ │ ├── Plugin # 编辑器核心或插件相关
│ │ │ ├── index.less
│ │ │ ├── index.tsx
│ │ ├── Preview # 拓扑图预览
│ │ ├── config # 拓扑编辑器相关配置 （这里不放在项目全局，目的是编辑器这块功能独立解耦，整个topology迁移出去都是完整的功能）
│ │ └── index.tsx # 拓扑编辑器主入口
Umi 的路由配置
{
path: '/topology',
name: 'Topology',
layout: false, // 去掉布局，可以全屏
icon: 'rh-icon-topology',
component: './topology',
},
3. 技术分析
经调研，目前了解到有两个技术方案实现成本相对较低：
3.1 Topology
Topology是一个集动态交互、丰富展示、数据管理等一体的全功能可视化引擎，为物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等智能可视化场景而生。
在做调研的时候，也查找资源，结合 Umi 实现了个demo效果：https://github.com/giscafer/topology-umi-demo， 可预览demo，点击 Topology 菜单
demo 依赖了指定版本的topology包
@topology/activity-diagram 0.3.0
@topology/chart-diagram 0.3.0
@topology/class-diagram 0.3.0
@topology/core 0.5.8
@topology/flow-diagram 0.3.0
@topology/sequence-diagram 0.3.0
3.2 X6 （推荐）
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。
- 🌱 极易定制：支持使用 SVG/HTML/React/Vue 定制节点样式和交互
- 🚀 开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
- 🧲 数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
- 💯 事件驱动：完备的事件系统，可以监听图表内发生的任何事件
文档： https://x6.antv.vision/zh/examples demo: https://gitee.com/martsforever-pot/react-x6-editor
总结
对比 Topology 和 X6 ，个人更推荐 X6，因为出自蚂蚁金服，节点可定制化和文档都比较清晰。社区支持度也相对于 Topology 活跃些。
- topology 免费版开源版本 v0.3.0，最新版本(>1.0）是商业付费。
- X6 是开源免费，最新版本