简介
flow-graph-g6 简介
基于 G6 的流程编排组件核心库，可以快速搭建流程可视化系统。此核心库不提供业务相关的逻辑，所有数据都通过事件向外传递，可以根据不同的业务需求定制自己的业务逻辑。
考虑到可维护性问题，使用此库完全不用担心后续维护问题，所有可配置都可以复用，如果有极为特殊的逻辑满足不了，可以对其拆分重新组装。
特性
在 G6 的基础上，提供以下特性：
- 自定义多场景的 behavior，包括：addEdge, clickEdge, hoverEdge, clickCanvas, hoverNode, selectNode,
- 集成多种 node 显示状态，包括：default, selected, hover, highlight, failHighlight
- 提供自定义 node 样式能力
- 提供节点自动生成 port 能力
- 框架无关的事件系统，所有通信都通过事件来完成，向外暴露 11 种事件
- 封装 G6 常用功能，如：createNode，removeNode 等
常见框架对比
| 官网 | 样例 | 描述 | 渲染方式 | 上手成本 | 可拓展性 | |
|---|---|---|---|---|---|---|
| X6 | https://x6.antv.vision/zh | https://x6.antv.vision/apps/dag/ | AntV 旗下的图编辑引擎，方便快速搭建流程图、DAG 图、ER 图等图应用。 | svg | 专为图编辑器而生，上手比较方便 | 大多数功能都是配置生成， 遇到复杂逻辑可能无法支撑 |
| G6 | https://g6.antv.vision/zh | https://g6.antv.vision/zh/examples/gallery | AntV 旗下的图可视化引擎，能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。 | svg/canvas | 如果想要实现图编辑器，大部分功能需要手动实现，上手成本较大 | 由于所有底层逻辑都是自己实现，所以非常自由，可拓展性强 |
| LogicFlow | http://logic-flow.org/guide/start.html | http://logic-flow.org/usage/bpmn.html | 滴滴开源的流程图编辑器，定位在 Bpmn.js 和 X6 之间。核心提供了流程图的编辑器，并且通过拓展能力来支持 BPMN 等规范所需的流程节点和数据格式 | svg | 同 X6 | 同 X6 |
| Butterfly | https://github.com/alibaba/butterfly | https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis | 基于 JS 的数据驱动的节点式编排组件库 | canvas | 同 X6 | 节点数据不能通过 json 配置，需要通过 js 对象配置，依赖 js 运行时，通过后端传数据不能直接渲染 |
- 通过上面的对比可以看出，采用 G6 作为底层框架，不论是在性能还是在可扩展性上都比较优秀；
- G6 已经发展很多年，经历过很多版本升级，具有较高成熟性，文档相对来说也比较健全，在遇到复问题的时候容易排查；
- 这套代码已经在我们的 poker 系统中稳定运行了很久，经受了业务考验。