作者：WayneX
https://juejin.cn/post/7251835247595110457
前端领域有多种流程库可供选择，包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。这些库都提供了用于创建流程图、图形编辑和交互的功能。然而，它们在特性、易用性和生态系统方面存在一些差异。
| 序号 | 名称 | 地址 |
|---|---|---|
| 1 | vue-flow | https://github.com/bcakmakoglu/vue-flow |
| 2 | butterfly | https://github.com/alibaba/butterfly |
| 3 | JointJS | https://www.jointjs.com/ |
| 4 | AntV G6 | http://antv-2018.alipay.com/zh-cn/g6/3.x/index.html |
| 5 | jsPlumb | https://github.com/jsplumb/jsplumb |
| 6 | Flowchart.js | https://github.com/jsplumb/jsplumb |
vue-flow是 ReactFlow 的 Vue 版本，目前只支持 在Vue3中使用，对Vue2不兼容，目前国内使用较少。包含四个功能组件 core、background、controls、minimap，可按需使用。
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';
优点：
缺点：
Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎，具有使用自由、定制性高的优势，已支持上百张画布。号称 “杭州余杭区最自由的图编辑器引擎”。
//
npm install butterfly-dag --save
<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>
优点：
缺点：
创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。
属于闭源收费项目，暂不考虑。
AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。G6可以实现很多d3才能实现的可视化图表。
npm install --save @antv/g6 //安装
<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>
优点：
缺点：
一个用于创建交互式、可拖拽的连接线和流程图的 JavaScript 库。它在 Web 应用开发中广泛应用于构建流程图编辑器、拓扑图、组织结构图等可视化操作界面。
<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>
优点：
Flowchart.js 是一款开源的JavaScript流程图库，可以使用最短的语法来实现在页面上展示一个流程图，目前大部分都是用在各大主流 markdown 编辑器中，如掘金、csdn、语雀等等。
flowchat
start=>start: 开始
end=>end: 结束
input=>inputoutput: 我的输入
output=>inputoutput: 我的输出
operation=>operation: 我的操作
condition=>condition: 确认
start->input->operation->output->condition
condition(yes)->end
condition(no)->operation
优点：
缺点：