从0到1实现流程图应用01-开篇

2,251 阅读3分钟

开始

一个图可以简单的解释一个复杂的思想,同样,一个流程图可以清晰的可视化展示组织、工作流等复杂层次结构。在后面的一系列文章中,将会从 0 到 1 完成一个流程图应用的开发。如果对你的工作有帮助或者你对图编辑引擎感兴趣,请静下心来读完这一系列文章,相信会有惊喜。

技术选型

提到绘图能力,web主要有两种实现方式:Canvas 和 SVG,我们看看这两种有什么差异:

方案图形定制能力上手难度性能
Canvas定制图形比较复杂较高大数据量场景性能突出
SVG基于 DOM,图形定制能力强较低大数据量场景性能较差

再来看看前端社区开源解决方案:

jTopo

简介:jTopo 是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包

官网:www.jtopo.com/

优点:国产,文档简单,性能优越

缺点:没有开放源代码,2015 年已经停止更新,在 Vue/React/Angular 等现代框架中使用成本高

Vis.js

简介:Vis.js 是基于 HTML5 Canvas 开发的动态可视化库。该库被设计为易于使用,处理大量的动态数据

官网:visjs.org/

优点:开源免费,性能优越,功能比较丰富

缺点:英文文档,上手成本较高,节点定制能力较弱å

LogicFlow

简介:专注流程可视化的前端解决方案

官网:logic-flow.org/

优点:具备流程图应用的常用功能,扩展性强

缺点:内置连线功能较弱,定制复杂节点比较麻烦

Jsplumb

简介:jsPlumb 是一个比较强大的绘图组件

官网:jsplumbtoolkit.com/

优点:功能丰富,支持各种自定义操作

缺点:分收费版和社区版,社区版功能较弱

Joint

简介:JointJS 是一个开源前端框架,支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版,提供了一些更强的插件

官网:www.jointjs.com/

优点:功能十分完善,上手比较容易

缺点:布局能力较弱,节点定制能力一般

AntV G6

简介:G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力

官网:g6.antv.vision/zh/

优点:功能完备,扩展性强,性能好,支持大量布局算法

缺点:节点定制能力一般

AntV X6

简介:X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用

官网:x6.antv.vision/zh

优点:节点极易定制,支持 React/Vue 节点,上手成本低,支持大量布局算法

缺点:基于 SVG,性能一般

最后

图形定制能力强、上手成本低是我们需要重点考虑的地方,另外一方面流程图场景,不需要渲染大量的节点,所以 X6 更适合来完成我们的流程图应用。

  1. 下篇文章:从0到1实现流程图02-画布篇
  2. 源码:传送门
  3. 记得给 X6 仓库加星