前不久，刚做完流程图的技术调研，现在来记录一下，方便日后查看。需求背景是在下一迭代版本项目中需要实现工作流功能，实现编辑工作流、展示工作流基础功能外，还要基于每个节点进行相关的操作。

技术方案选择

由于之前也没有很多的相关工作流开发经验，所以在技术调研主要以科学上网方式为主，百度、掘金、简书、CSDN、知乎等等很多平台上去搜集相关的资料，去比较查看常见的实现方式，总结了以下几种看似可行的方案：

AntV G6 + vue

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。旗下有很多优秀的产品，如图：

那需要用到的就是G6可视化引擎。G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

基于antV G6+vue+ElementUI开发的效果图如下：

JsPlump

JsPlumb流程图设计器是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的古董浏览器，则使用VML技术。中文文档

它主要功能有：连接两个节点、可拖动节点、连接自定义配置等等。

基于JsPlump实现两个节点连接+vue-draggable实现拖拽：效果图如下

le5le-Topology

Topology是一款开源的基于canvas+typeScript的绘制引擎，可用于实现软件架构图、微服务部署结构图、流程图、活动图、类图、时序图、SCADA等，可以按照自己的想法实现任何想要的图形库。

官网地址+文档地址+免费在线使用地址

示例方案

总结：

最终选择了最后一种方案：Topology。理由：开发起来更高的灵活性、有交流群、友好的使用文档、使用简单、此项目更新频率很高(已成立公司专门负责维护)。

集成方案到项目中

采用的技术栈：vue2+vue-cli4+topology+ant-design-vue+vcolorpicker。

官网中示例功能点比较全，而设计的初衷又在于可以自定义并且更灵活的实现你想要的东西。vue版本的示例目前很粗糙，只是说告诉你怎么用，更详细的还需要花时间去阅读文档，根据自己需要去配置。因此我基于官网在线使用的示例将常用的功能抽离并实现在自己的项目中。

效果图：

此展示的只是一个demo版本，功能点：

拖拽添加工作流节点，
删除节点，
自定义节点样式、内容等设置，
自定义连线的样式、内容等，
导出png图片，
根据权限进行画布锁定，
导出JSON工作流数据，
获取JSON数据渲染展示工作流程图

项目代码地址：https://github.com/happydele/vue-topology

实现过程：

1.安装需要的依赖npm包到项目中

yarn add @topology/core // 绘图引擎
yarn add @topology/flow-diagram // 图形库-流程图（当前你也可以自定义图形库）
yarn add vcolorpicker // 颜色选择器
yarn add ant-design-vue // ant组件库

2.main.js注册组件

.vue页面中

3.自定义页面结构布局

初始化创建画布

注册左侧图形库，并定于结构数据

数据格式为：

由于核心库已经支持拖拽事件，我们实现左边拖拉拽的时候，只需要：1.在html上定义ondragstart函数；2.定义ondrag函数

4.核心画布的结构和功能逻辑

好了，大体的实现思路基本就是这样，更多的细节可能就在于每个操作背后的逻辑实现，所有的属性和方法都在文档中，多去查阅，多花时间研究。由于只是展示技术预研demo实现主要功能，所有还没来得及将每个模块单独封装，应用到项目的时候也会单独封装成components组件文件或者npm包，达到高复用、低耦合。