低代码与可视化
AntV X6
厂商/来源:
蚂蚁集团前端团队
核心功能:
“网页里的 Visio 制造机”。它本身不是一个开箱即用的系统，而是一个极度硬核的底层库，帮你开发出“让甲方自己连线”的系统。
| 适用场景 | 拖拽式算法工作流编排系统开发、网络拓扑图绘制、电力单线图编辑器 |
| 架构支持 | 前端库 (纯 JS/TS，完美兼容 Vue/React) |
| 核心机制 | DAG (有向无环图) 引擎：内置了极其复杂的数学算法，解决节点拖拽、连线避让（正交路由算法）、框选对齐等问题。你只需要关心“节点叫什么”，它负责“怎么画最漂亮”。 |
| 核心价值 | 可定制 HTML 节点：早期的画图库只能画圆圈和方块。X6 支持把复杂的 Vue/React 组件（比如一个带滚动条的表格，甚至一个视频播放器）作为一个节点塞到拓扑图里连线！这在交互设计上是降维打击。 |
| 避坑指南 | [开发成本极高] 1. 它不是成品：很多产品经理看了 X6 的 Demo 觉得很酷，直接答应甲方“我们系统也有这功能”。交到开发手里，开发发现这只是个引擎，要实现“左侧拖拽栏、右侧属性面板、保存 JSON 到后端”，还需要写几万行代码。对策：在项目报价时，涉及到“自定义拓扑图编辑器”的需求，前端工期必须按月计算，绝不是几天的活。 2. 坐标系魔咒：图编辑器的放大、缩小 (Zoom) 涉及复杂的矩阵变换。如果在 X6 内部混用原生的 DOM 点击事件，获取到的鼠标坐标通常是错位的。 |
| 推荐搭配 | [Vue3 / React 前端项目] [需要画算法流水线的架构师] |
