共计 2519 个字符，预计需要花费 7 分钟才能阅读完成。
前沿：一个流程图设计器须要什么？一个是图的绘制能力、基于 svg 或者 canvas 来绘制各种形态的节点（矩形、圆形、多边形）以及线，一个是图与图之间的交互包含拖拽，节点之间的连线等，最初是画布面板的便捷性，其中包含：比方 ps 中的网格性能、对其线、步骤回撤、画布的可伸缩、快捷按钮等等，那前端社区有啥开源解决方案，不便咱们疾速开发一个属于本人的流程图设计器？
1. 绘图能力
提到绘图能力，web 次要有两种实现形式：Canvas 及 Svg，咱们看看这两种有什么差别
| Canvas | SVG | |
|---|---|---|
| 操作对象 | 基于像素（动静点阵图） | 基于图形元素 |
| 驱动 | 只能脚本驱动 | 反对脚步以及 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✨