前沿：一个流程图设计器须要什么？一个是图的绘制能力、基于svg或者canvas来绘制各种形态的节点（矩形、圆形、多边形）以及线，一个是图与图之间的交互包含拖拽，节点之间的连线等，最初是画布面板的便捷性，其中包含：比方ps中的网格性能、对其线、步骤回撤、画布的可伸缩、快捷按钮等等，那前端社区有啥开源解决方案，不便咱们疾速开发一个属于本人的流程图设计器？

1.绘图能力

提到绘图能力，web次要有两种实现形式：Canvas及Svg，咱们看看这两种有什么差别
CanvasSVG
操作对象基于像素（动静点阵图）基于图形元素
驱动只能脚本驱动反对脚步以及CSS
事件交互用户交互到像素点（x,y）用户交互到图形元素
性能适宜小面积、大数量利用场景适宜大面积，小数量利用面积

基于流程图的场景：节点不会太多，加上节点都是动态图，没有太多动静渲染，那svg可能更适宜，而且svg具备高保本，然而如果在大规模数据或图元的状况下请审慎抉择，毕竟性能会差些

举荐浏览：

  • SVG 与 HTML5 的 canvas 各有什么长处，哪个更有前途？
  • SVG入门—如何手写SVG

2.现有流程图设计器

目前有很多现成的流程图设计器，适宜广泛的利用场景
  • processon 举荐
  • 亿图
  • Microsoft Visio
然而市场现成的流程图设计器只反对广泛的利用场景，如何基于咱们自身的业务产品线拓展就成为一种问题？

举个例子：前段时间波及开发一款数据集成服务web利用，波及到面板编排的模块，须要配置数据转换 adapter，比方定制一些节点做自定义数据转换，自身就是一个流程图设计器，于是我做了一些后期的调研，调研了一部分开源的流程设计器开发计划，咱们先看看一个一般的流程设计器长啥样, 图片起源 logicFlow

3.开源流程设计器web开发计划

3.1 Jsplumb

官网介绍：jsPlumb是一个比拟弱小的绘图组件，它提供了一种办法，次要用于连贯网页上的元素。在古代浏览器中，它应用SVG或者Canvas技术 官网链接

jsPlumb是比拟晚期的一个绘图组件，历史悠久，7年前就开源了，能够用来开发流程图设计器，然而它须要依赖jquery能力应用，因为其自身是基于DOM连线的一个库，外围次要包含以下几个模块

  • Souce: 源节点
  • Target: 指标节点
  • Anchor: 锚点
  • Endpoint: 端点
  • Connector: 连贯
  • Overlays: 能够了解为在连接线上的文字或者箭头之类的货色

上面是这几个模块串起来的实例

如果你想在vue中应用也是能够的，这里不做具体介绍，感兴趣的童鞋看举荐浏览

举荐浏览：

  • jsplumb 中文基础教程
  • vue中应用jsplumb根本教程

3.2.Antv G6

官网介绍：G6 是一个简略、易用、齐备的图可视化引擎，它在高定制能力的根底上，提供了一系列设计优雅、便于应用的图可视化解决方案。能帮忙开发者搭建属于本人的图可视化、图剖析、或图编辑器利用。官网链接

G6是绘图方面也是能够抉择的，能够应用 canvas 或 svg 渲染，默认是Canvas，在可视化及交互方面，G6是比较突出的，完虐jsplumb ，咱们晓得实质上是antv旗下专一图形可视化库，着重点不一样，外围是可视化

举荐浏览

  • G6疾速上手
  • vue之G6上手 demo
  • G6语雀文档

3.3 bpmn-js

官网介绍：一个BPMN 2.0渲染工具包和Web建模器。它是用 JavaScript 编写的，将 BPMN 2.0 图表嵌入到古代浏览器中，并且不须要服务器后端。这样能够轻松将其嵌入到任何 Web 应用程序中, 不便前端也能实现流程图设计器 官网链接

这里先介绍下BPMN是什么鬼

BPMN（Business Process Modeling Notation）是一种流程建模的通用和规范语言，用来绘制业务流程图，以便更好地让各部门之间了解业务流程和互相关系，旨在促成业务流程的沟通和了解。

而BPMN 2.0 的外围次要包含以下几种根本建模元素

  • 流动（Activity）：是用来指代要实现的流动，通过由流程组合在一起而施展效用。
  • 事件（Event）：用来表明流程的生命周期中产生了什么事。
  • 网关（Gateway）：用来管制流程的流向。
  • 流向（Flow）：是连贯两个流程节点的连线。

咱们看看上面这个理论例子基于BPMN的业务流程图(销假流程)

bpmn-js 是依赖两个重要的库如下

  • diagram-js：负责绘制图形和连线，它提供了与这些图形元素进行交互的办法
  • bpmn-moddle: 使咱们可能读写 BPMN 2.0 架构兼容的 XML 文档，并拜访在图上绘制的图形和连线背地的 BPMN 相干信息。

在线编辑示例图

这里还要略微提一下Activiti, Activiti是一个开源的工作流引擎，它实现了BPMN 2.0标准，能够公布设计好的流程定义，并通过api进行流程调度，不过是超出前端领域，毕竟是一款基于 Java 的超疾速、超稳定的 BPMN2.0 流程引擎，也超出我的认知范畴

举荐浏览：

  • bpmn在线demo
  • 阿呆：全网最详bpmn.js教材-根底篇

3.4 LogicFLow

LogicFLow算是最新的流程设计器web计划，官网介绍：LogicFlow脱胎于滴滴技术团队在客服业务下的实际，是由滴滴智能中台体验平台研发的一款流程可视化的前端框架 官网链接

LogicFLow的定位，综合了业务拓展能力以及可视化交互能力

与第一节提到的jsplumb不同的是，logicflow思考到在基于DOM操作繁琐的前提，最资源耗费也比拟大，而抉择MVVM框架的理念，引入 Virtual DOM 来解决某些场景下的更新效率，也在肯定水平上补救「基于 Svg 渲染图形」可能造成的渲染性能问题。

而且LogicFlow 还满足上一节咱们提到的 BPMN2.0 标准的节点和连线

LogicFLow作为最新的流程设计器开源计划，github开源三个月以来取得1000，前期咱们会在LogicFLow做一些尝试，而后以文章的模式分享给大家

举荐浏览：

  • logicflow vue demo

你好，我是 树酱，请你喝杯 记得三连哦～

1.浏览完记得点个赞哦，有 有能源

2.关注公众号前端那些趣事，陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感激Star✨