原文来源于:程序员成长指北;作者:WayneX
如有侵权,联系删除
前言
大家好,我是考拉🐨。
Snipaste_2023-07-04_15-49-12.png
前端领域有多种流程库可供选择,包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。这些库都提供了用于创建流程图、图形编辑和交互的功能。然而,它们在特性、易用性和生态系统方面存在一些差异。
流程图插件汇总
序号 | 名称 | 地址 |
---|---|---|
1 | vue-flow | github.com/bcakmakoglu…[1] |
2 | butterfly | github.com/alibaba/but…[2] |
3 | JointJS | www.jointjs.com/[3] |
4 | AntV G6 | antv-2018.alipay.com/zh-cn/g6/3.…[4] |
5 | jsPlumb | github.com/jsplumb/jsp…[5] |
6 | Flowchart.js | github.com/adrai/flowc…[6] |
流程图插件分析
vue-flow
简介
vue-flow
是 ReactFlow
的 Vue 版本,目前只支持 在Vue3中使用,对Vue2不兼容,目前国内使用较少。包含四个功能组件 core、background、controls、minimap,可按需使用。
使用
javascript
复制代码
Vue Flow 是Vue下流程绘制库。安装:
npm i --save @vue-flow/core 安装核心组件
npm i --save @vue-flow/background 安装背景组件
npm i --save @vue-flow/controls 安装控件(放大,缩小等)组件
npm i --save @vue-flow/minimap 安装缩略图组件
引入组件:
import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
引入样式:
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
优缺点分析
优点:
-
轻松上手:内置缩放和平移功能、元素拖动、选择等等。
-
可定制:使用自定义节点、边缘和连接线并扩展Vue Flow的功能。
-
快速:链路被动更改,仅重新渲染适当的元素。
-
工具和组合:带有图形助手和状态可组合函数,用于高级用途。
-
附加组件:背景(内置模式、高度、宽度或颜色),小地图(右下角)、控件(左下角)。
缺点:
-
仓库迭代版本较少,2022年进入首次迭代。
-
国内使用人数少,没有相关技术博客介绍,通过官网学习。
butterfly
简介
Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎,具有使用自由、定制性高的优势,已支持上百张画布。号称 “杭州余杭区最自由的图编辑器引擎”。
使用
-
安装
powershell
复制代码
//
npm install butterfly-dag --save
-
在 Vue3 中使用
vue
复制代码
<script lang="ts" setup>
import {TreeCanvas, Canvas} from 'butterfly-dag';
const root = document.getElementById('chart')
const canvas = new Canvas({
root: root,
disLinkable: true, // 可删除连线
linkable: true, // 可连线
draggable: true, // 可拖动
zoomable: true, // 可放大
moveable: true, // 可平移
theme: {
edge: {
shapeType: "AdvancedBezier",
arrow: true,
arrowPosition: 0.5, //箭头位置(0 ~ 1)
arrowOffset: 0.0, //箭头偏移
},
},
});
canvas.draw(mockData, () => {
//mockData为从mock中获取的数据
canvas.setGridMode(true, {
isAdsorb: false, // 是否自动吸附,默认关闭
theme: {
shapeType: "circle", // 展示的类型,支持line & circle
gap: 20, // 网格间隙
background: "rgba(0, 0, 0, 0.65)", // 网格背景颜色
circleRadiu: 1.5, // 圆点半径
circleColor: "rgba(255, 255, 255, 0.8)", // 圆点颜色
},
});
});
</script>
<template>
<div class="litegraph-canvas" id="chart"></div>
</template>
优缺点分析
优点:
-
轻松上手:基于dom的设计模型大大方便了用户的入门门槛,提供自定义节点,锚点的模式大大降低了用户的定制性。
-
多技术栈支持:支持 jquery 基于 dom 的设计,也包含 butterfly-react、butterfly-vue 两种设计。
-
核心概念少而精:提供 画布(Canvas)、节点(Node)、线(Edge)等核心概念。
-
优秀的组件库支持:对于当前使用组件库来说,可以大量复用现有的组件。
缺点:
-
butterfly 对 Vue的支持不是特别友好,这跟阿里的前端技术主栈为React有关,butterfly-vue库只支持 Vue2版本。在Vue3上使用需要对 butterfly-drag 进行封装。
JointJS
简介
创建静态图表或完全交互式图表工具,例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。
属于闭源收费项目,暂不考虑。
AntV G6
简介
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。G6可以实现很多d3才能实现的可视化图表。
使用
-
安装
js
复制代码
npm install --save @antv/g6 //安装
-
在所需要的文件中引入
ts
复制代码
<template>
/* 图的画布容器 */
<div id="mountNode"></div>
</template>
<script lang="ts" setup>
import G6 from '@antv/g6';
// 定义数据源
const data = {
// 点集
nodes: [
{
id: 'node1',
x: 100,
y: 200,
},
{
id: 'node2',
x: 300,
y: 200,
},
],
// 边集
edges: [
// 表示一条从 node1 节点连接到 node2 节点的边
{
source: 'node1',
target: 'node2',
},
],
};
// 创建 G6 图实例
const graph = new G6.Graph({
container: 'mountNode', // 指定图画布的容器 id
// 画布宽高
width: 800,
height: 500,
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();
</script>
优缺点分析
优点:
-
强大的可定制性:G6 提供丰富的图形表示和交互组件,可以通过自定义配置和样式来实现各种复杂的图表需求。
-
全面的图表类型支持:G6 支持多种常见图表类型,如关系图、流程图、树图等,可满足不同领域的数据可视化需求。
-
高性能:G6 在底层图渲染和交互方面做了优化,能够处理大规模数据的展示,并提供流畅的交互体验。
缺点:
-
上手难度较高:G6 的学习曲线相对较陡峭,需要对图形语法和相关概念有一定的理解和掌握。
-
文档相对不完善:相比其他成熟的图表库,G6 目前的文档相对较简单,部分功能和使用方法的描述可能不够详尽,需要进行更深入的了解与实践。
jsPlumb
简介
一个用于创建交互式、可拖拽的连接线和流程图的 JavaScript 库。它在 Web 应用开发中广泛应用于构建流程图编辑器、拓扑图、组织结构图等可视化操作界面。
使用
ts
复制代码
<template>
<div ref="container">
<div ref="sourceElement">Source</div>
<div ref="targetElement">Target</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { jsPlumb } from 'jsplumb';
const container = ref<HTMLElement | null>(null);
const sourceElement = ref<HTMLElement | null>(null);
const targetElement = ref<HTMLElement | null>(null);
onMounted(() => {
// 创建 jsPlumb 实例
const jsPlumbInstance = jsPlumb.getInstance();
// 初始化 jsPlumb 实例设置
if (container.value) {
jsPlumbInstance.setContainer(container.value);
}
// 创建连接线
if (sourceElement.value && targetElement.value) {
jsPlumbInstance.connect({
source: sourceElement.value,
target: targetElement.value,
});
}
});
</script>
优缺点分析
优点:
-
简单易用:jsPlumb 提供了直观的 API 和丰富的文档,比较容易上手和使用。
-
可拓展性:允许开发人员根据自己的需求进行定制和扩展,使其适应不同的应用场景。
-
强大的连接功能:jsPlumb 允许创建各种连接类型,包括直线、曲线和箭头等,满足了复杂交互需求的连接效果。 缺点:
-
文档更新不及时:有时候,jsPlumb 的官方文档并没有及时更新其最新版本的特性和用法。
-
性能考虑:在处理大量节点、连接线或复杂布局时,jsPlumb 的性能可能受到影响,需要进行优化。
Flowchart.js
简介
Flowchart.js 是一款开源的JavaScript流程图库,可以使用最短的语法来实现在页面上展示一个流程图,目前大部分都是用在各大主流 markdown 编辑器中,如掘金、csdn、语雀等等。
使用
js
复制代码
flowchat
start=>start: 开始
end=>end: 结束
input=>inputoutput: 我的输入
output=>inputoutput: 我的输出
operation=>operation: 我的操作
condition=>condition: 确认
start->input->operation->output->condition
condition(yes)->end
condition(no)->operation
优缺点
优点:
-
使用方便快捷,使用几行代码就可以生成一个简单的流程图。
-
可移植:在多平台上只需要写相同的代码就可以实现同样的效果。
缺点:
-
可定制化限制:对于拥有丰富需求的情况下,flowchartjs只能完成相对简单的需求,没有高级的定制化功能。
-
需要花费一定时间来学习他的语法和规则,但是flowchartjs的社区也相对不太活跃。
对比分析
-
功能和灵活性:
-
Butterfly、G6 和 JointJS 是功能较为丰富和灵活的库。它们提供了多种节点类型、连接线样式、布局算法等,并支持拖拽、缩放、动画等交互特性。
-
Vue-Flow 来源于 ReactFlow 基于 D3和vueuse等库,提供了 Vue 组件化的方式来创建流程图,并集成了一些常见功能。
-
jsPlumb 专注于提供强大的连接线功能,具有丰富的自定义选项和功能。
-
Flowchart.js 则相对基础,提供了构建简单流程图的基本功能。
-
-
技术栈和生态系统:
-
Vue-Flow 是基于 Vue.js 的流程图库,与 Vue.js 生态系统无缝集成。
-
Butterfly 是一个基于 TypeScript 的框架,适用于现代 Web 开发。
-
JointJS、AntV G6 和 jsPlumb 可以与多种前端框架(如Vue、React、Angular等)结合使用。
-
AntV G6 是 AntV 团队开发的库,其背后有强大的社区和文档支持。
-
-
文档和学习曲线:
-
Butterfly、G6 和 AntV G6 都有完善的文档和示例,提供了丰富的使用指南和教程。
-
JointJS 和 jsPlumb 也有较好的文档和示例资源,但相对于前三者较少。
-
Flowchart.js 的文档相对较少。
-
-
兼容性:
-
Butterfly、JointJS 和 G6 库在现代浏览器中表现良好,并提供了兼容低版本浏览器
-