LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

前端流程图插件对比选型
freeflydom
2023年8月26日 8:57 本文热度 795
 

前言

前端领域有多种流程库可供选择，包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。这些库都提供了用于创建流程图、图形编辑和交互的功能。然而，它们在特性、易用性和生态系统方面存在一些差异。

流程图插件汇总

序号名称地址
1vue-flowgithub.com/bcakmakoglu…
2butterflygithub.com/alibaba/but…
3JointJSwww.jointjs.com/
4AntV G6antv-2018.alipay.com/zh-cn/g6/3.…
5jsPlumbgithub.com/jsplumb/jsp…
6Flowchart.jsgithub.com/adrai/flowc…

流程图插件分析

vue-flow

简介

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';

优缺点分析

优点：

  1. 轻松上手：内置缩放和平移功能、元素拖动、选择等等。

  2. 可定制：使用自定义节点、边缘和连接线并扩展Vue Flow的功能。

  3. 快速：链路被动更改，仅重新渲染适当的元素。

  4. 工具和组合：带有图形助手和状态可组合函数，用于高级用途。

  5. 附加组件：背景（内置模式、高度、宽度或颜色），小地图（右下角）、控件（左下角）。

缺点：

  1. 仓库迭代版本较少，2022年进入首次迭代。

  2. 国内使用人数少，没有相关技术博客介绍，通过官网学习。

butterfly

简介

Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎，具有使用自由、定制性高的优势，已支持上百张画布。号称 “杭州余杭区最自由的图编辑器引擎”。

使用

  • 安装

npm install butterfly-dag --save

  • 在 Vue3 中使用

<script 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 id="chart"></div>

</template>

优缺点分析

优点：

  1. 轻松上手：基于dom的设计模型大大方便了用户的入门门槛，提供自定义节点，锚点的模式大大降低了用户的定制性。

  2. 多技术栈支持：支持 jquery 基于 dom 的设计，也包含 butterfly-react、butterfly-vue 两种设计。

  3. 核心概念少而精：提供 画布（Canvas）、节点（Node）、线（Edge）等核心概念。

  4. 优秀的组件库支持：对于当前使用组件库来说，可以大量复用现有的组件。

缺点：

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

JointJS

简介

创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。

属于闭源收费项目，暂不考虑。

AntV G6

简介

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。G6可以实现很多d3才能实现的可视化图表。

使用

  • 安装

npm install --save @antv/g6 //安装

  • 在所需要的文件中引入

<template>

  /* 图的画布容器 */

  <div id="mountNode"></div>

</template>


<script 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>

优缺点分析

优点：

  1. 强大的可定制性：G6 提供丰富的图形表示和交互组件，可以通过自定义配置和样式来实现各种复杂的图表需求。

  2. 全面的图表类型支持：G6 支持多种常见图表类型，如关系图、流程图、树图等，可满足不同领域的数据可视化需求。

  3. 高性能：G6 在底层图渲染和交互方面做了优化，能够处理大规模数据的展示，并提供流畅的交互体验。

缺点：

  1. 上手难度较高：G6 的学习曲线相对较陡峭，需要对图形语法和相关概念有一定的理解和掌握。

  2. 文档相对不完善：相比其他成熟的图表库，G6 目前的文档相对较简单，部分功能和使用方法的描述可能不够详尽，需要进行更深入的了解与实践。

jsPlumb

简介

一个用于创建交互式、可拖拽的连接线和流程图的 Javascript 库。它在 Web 应用开发中广泛应用于构建流程图编辑器、拓扑图、组织结构图等可视化操作界面。

使用

<template>

  <div ref="container">

    <div ref="sourceElement">Source</div>

    <div ref="targetElement">Target</div>

  </div>

</template>


<script setup>

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>

优缺点分析

优点：

  1. 简单易用：jsPlumb 提供了直观的 API 和丰富的文档，比较容易上手和使用。

  2. 可拓展性：允许开发人员根据自己的需求进行定制和扩展，使其适应不同的应用场景。

  3. 强大的连接功能：jsPlumb 允许创建各种连接类型，包括直线、曲线和箭头等，满足了复杂交互需求的连接效果。 缺点：

  4. 文档更新不及时：有时候，jsPlumb 的官方文档并没有及时更新其最新版本的特性和用法。

  5. 性能考虑：在处理大量节点、连接线或复杂布局时，jsPlumb 的性能可能受到影响，需要进行优化。

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

优缺点

优点：

  1. 使用方便快捷，使用几行代码就可以生成一个简单的流程图。

  2. 可移植：在多平台上只需要写相同的代码就可以实现同样的效果。

缺点：

  1. 可定制化限制：对于拥有丰富需求的情况下，flowchartjs只能完成相对简单的需求，没有高级的定制化功能。

  2. 需要花费一定时间来学习他的语法和规则，但是flowchartjs的社区也相对不太活跃。

对比分析

  1. 功能和灵活性：

    • Butterfly、G6 和 JointJS 是功能较为丰富和灵活的库。它们提供了多种节点类型、连接线样式、布局算法等，并支持拖拽、缩放、动画等交互特性。

    • Vue-Flow 来源于 ReactFlow 基于 D3和vueuse等库，提供了 Vue 组件化的方式来创建流程图，并集成了一些常见功能。

    • jsPlumb 专注于提供强大的连接线功能，具有丰富的自定义选项和功能。

    • Flowchart.js 则相对基础，提供了构建简单流程图的基本功能。

  2. 技术栈和生态系统：

    • Vue-Flow 是基于 Vue.js 的流程图库，与 Vue.js 生态系统无缝集成。

    • Butterfly 是一个基于 Typescript 的框架，适用于现代 Web 开发。

    • JointJS、AntV G6 和 jsPlumb 可以与多种前端框架（如Vue、React、Angular等）结合使用。

    • AntV G6 是 AntV 团队开发的库，其背后有强大的社区和文档支持。

  3. 文档和学习曲线：

    • Butterfly、G6 和 AntV G6 都有完善的文档和示例，提供了丰富的使用指南和教程。

    • JointJS 和 jsPlumb 也有较好的文档和示例资源，但相对于前三者较少。

    • Flowchart.js 的文档相对较少。

  4. 兼容性：

    • Butterfly、JointJS 和 G6 库在现代浏览器中表现良好，并提供了兼容低版本浏览器


查看原文



该文章在 2023/8/26 8:57:15 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved