前端流程图插件对比选型——6种流程图编辑器插件1. antV X6 简介 X6 是基于 HTML 和 SVG 的图编辑引

1. antV X6

简介

X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。 x6.antv.antgroup.com/tutorial/ge… X6相较于G6，更适用于图编辑类应用的需求，而G6更适用于图表绘制类的需求。

安装

通过 npm 或 yarn 命令安装 X6。

npm

$ npm install @antv/x6 --save

yarn

$ yarn add @antv/x6

使用

<div id="container"></div>

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  background: {
    color: '#F2F7FA',
  },
})

优缺点分析

优点：

极易定制：支持使用 SVG/HTML/React/Vue 定制节点样式和交互；
开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等；
数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑；
事件驱动：可以监听图表内发生的任何事件。
核心功能稳定，并且在持续更新

缺点：

文档对于初学者不友好

2.vue-flow

vue-flow是 ReactFlow 的 Vue 版本，目前只支持在Vue3中使用，对Vue2不兼容，目前国内使用较少。包含四个功能组件 core、background、controls、minimap，可按需使用。 vueflow.dev/

使用

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年进入首次迭代。
国内使用人数少，没有相关技术博客介绍，通过官网学习。

3. butterfly-dag

阿里开源流程图组件 ,React & Vue2 React-Butterfly & Vue-Butterfly

优缺点分析

优点：

轻松上手：基于dom的设计模型大大方便了用户的入门门槛，提供自定义节点，锚点的模式大大降低了用户的定制性。
多技术栈支持：支持 jquery 基于 dom 的设计，也包含 butterfly-react、butterfly-vue 两种设计。
核心概念少而精：提供画布（Canvas）、节点（Node）、线（Edge）等核心概念。
优秀的组件库支持：对于当前使用组件库来说，可以大量复用现有的组件

缺点：

butterfly 对 Vue的支持不是特别友好，这跟阿里的前端技术主栈为React有关，butterfly-vue库只支持 Vue2版本。在Vue3上使用需要对 butterfly-drag 进行封装。

4. jsPlumb

简介

一个用于创建交互式、可拖拽的连接线和流程图的 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>

优缺点分析

优点：

简单易用：jsPlumb 提供了直观的 API 和丰富的文档，比较容易上手和使用。
可拓展性：允许开发人员根据自己的需求进行定制和扩展，使其适应不同的应用场景。
强大的连接功能：jsPlumb 允许创建各种连接类型，包括直线、曲线和箭头等，满足了复杂交互需求的连接效果。 缺点：
文档更新不及时：有时候，jsPlumb 的官方文档并没有及时更新其最新版本的特性和用法。
性能考虑：在处理大量节点、连接线或复杂布局时，jsPlumb 的性能可能受到影响，需要进行优化。
拓展能力不足，自定义节点支持成本很高；只能全量引入，各系统无法按需引入

5. Flowchart.js

简介

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)->operationq

优缺点

优点：

使用方便快捷，使用几行代码就可以生成一个简单的流程图。
可移植：在多平台上只需要写相同的代码就可以实现同样的效果。

缺点：

可定制化限制：对于拥有丰富需求的情况下，flowchartjs只能完成相对简单的需求，没有高级的定制化功能。
需要花费一定时间来学习他的语法和规则，但是flowchartjs的社区也相对不太活跃。

6. LogicFlow

LogicFlow 脱胎于滴滴技术团队在客服业务下的实践，是由智能中台—体验平台研发的一款流程可视化的前端框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展能力，方便我们快速在业务系统内满足类流程图编辑器的需求。 github.com/didi/LogicF…

使用

// 安装LogicFlow核心库
npm install @logicflow/core --save
//LogicFlow组件
npm install @logicflow/extension --save

main.js

import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

<template>
  <div class="wrapper">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import {LogicFlow} from '@logicflow/core'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 流程图初始化
    init () {
      const data = {
        // 节点
        nodes: [
          {
            id: 50, // 节点id
            type: 'rect', // 节点类型：矩形
            x: 100, // x轴坐标
            y: 150, // y轴坐标
            text: '你好' // 节点文本
          },
          {
            id: 21, // 节点id
            type: 'circle', // 节点类型:圆形
            text: '第二',
            x: 300, // x轴坐标
            y: 150 // y轴坐标
          }
        ],
        // 边
        edges: [
          {
            type: 'line', // 内置连线方式：直线(line);直角折线(polyline);贝塞尔曲线(bezier)
            sourceNodeId: 50, // 原始节点id
            targetNodeId: 21 // 目标节点id
          }
        ]
      }
      // 初始化配置
      const lf = new LogicFlow({
        container: document.querySelector('#container'), // 容器
        // 画布配置
        // width: window.innerWidth, // 宽度
        height: window.innerHeight, // 高度
        background: {
          color: '#2b364a' // 背景颜色
        },
        grid: {
          type: 'mesh',
          size: 20
        },
        isSilentMode: true // 仅仅可以浏览，不可进行节点和文本编辑
      })
      // 开始渲染
      lf.render(data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrapper{
    position: relative;
    overflow: auto;
  }
  .container{
    width: 100%;
    height: 100vh;
    outline: none;
  }
</style>

优缺点

优点：

快速搭建流程图编辑器
组件定制化:图上支持在html层注册组件
支持注册自定义方法
专注于业务流程图编辑的框架

缺点：

官方文档打不开，网上使用的不多，
项目疑似半年以上不维护了

对比分析

1. 功能和灵活性：

logicFlow、X6、butterfly-dag 是功能和样式较为丰富的库，它们提供了多种节点类型、连接线、工具等，并且支持拖拽、缩放、动画等交互特性
vue-folw 基于D3 使用canvas ，提供vue组件化的方式来创建流程图
jsplumb 基本元素有：源对象（自定义）、目标对象（自定义）、锚点（预设）、连接线（样式）、端点、附件（预设箭头可自定义）
Flowchart.js 轻量级js文件，提供了构建简单流程图的基本功能

2.技术栈和生态系统：

vue-flow 基于vue，与vue生态无缝集成
butterfly，阿里开发 react支持较好
jsPlumb、antV X6、Flowchart.js 可以与多种前端框架结合使用
LogicFlow 官网上只有一个vue的demo

3.文档和学习曲线：

antV X6 文档和示例都比较完善
jsPlumb 文档和示例也较好，但相对前者不够完善
vue-folw 纯英文文档看起来费劲
Flowchart.js、butterfly 文档相对较少
LogicFlow 官网地址打不开，gitee上的文档不太完整

4.兼容性：

X6 支持现代浏览器（Chrome、Firefox 、Safari 较新版本），对 IE 11 的支持目前暂不完善
jsPlumb最后一个兼容IE8的版本为1.7.x，此后版本将只支持在现在浏览器中使用