轉發原文地址：https://segmentfault.com/a/1190000039701868
前沿：一個流程圖設計器需要什么？一個是圖的繪制能力、基於svg或者canvas來繪制各種形狀的節點（矩形、圓形、多邊形）以及線，一個是圖與圖之間的交互包括拖拽，節點之間的連線等，最后是畫布面板的便捷性，其中包括：比如ps中的網格功能、對其線、步驟回撤、畫布的可伸縮、快捷按鈕等等，那前端社區有啥開源解決方案，方便我們快速開發一個屬於自己的流程圖設計器？
1.繪圖能力
提到繪圖能力，web主要有兩種實現方式：Canvas及Svg，我們看看這兩種有什么差異
| Canvas | SVG | |
|---|---|---|
| 操作對象 | 基於像素（動態點陣圖） | 基於圖形元素 |
| 驅動 | 只能腳本驅動 | 支持腳步以及CSS |
| 事件交互 | 用戶交互到像素點（x,y） | 用戶交互到圖形元素 |
| 性能 | 適合小面積、大數量應用場景 | 適合大面積，小數量應用面積 |
基於流程圖的場景：節點不會太多，加上節點都是靜態圖，沒有太多動態渲染，那svg可能更適合，而且svg具備高保本，但是如果在大規模數據或圖元的情況下請謹慎選擇，畢竟性能會差些
🌲 推薦閱讀：
2.現有流程圖設計器
目前有很多現成的流程圖設計器，適合普遍的應用場景
但是市場現成的流程圖設計器只支持普遍的應用場景，如何基於我們本身的業務產品線拓展就成為一種問題？
舉個例子：前段時間涉及開發一款數據集成服務web應用，涉及到面板編排的模塊，需要配置數據轉換 adapter，比如定制一些節點做自定義數據轉換，本身就是一個流程圖設計器，於是我做了一些前期的調研，調研了一部分開源的流程設計器開發方案，我們先看看一個普通的流程設計器長啥樣, 圖片來源 logicFlow
3.開源流程設計器web開發方案
3.1 Jsplumb
官方介紹：jsPlumb是一個比較強大的繪圖組件，它提供了一種方法，主要用於連接網頁上的元素。在現代瀏覽器中，它使用SVG或者Canvas技術 官網鏈接
jsPlumb是比較早期的一個繪圖組件，歷史悠久，7年前就開源了，可以用來開發流程圖設計器，但是它需要依賴jquery才能使用，因為其本身是基於DOM連線的一個庫，核心主要包括以下幾個模塊
- Souce: 源節點
- Target: 目標節點
- Anchor: 錨點
- Endpoint: 端點
- Connector: 連接
- Overlays: 可以理解為在連接線上的文字或者箭頭之類的東西
下面是這幾個模塊串起來的實例
如果你想在vue中使用也是可以的，這里不做具體介紹，感興趣的童鞋看推薦閱讀
🌲 推薦閱讀：
3.2.Antv G6
官方介紹：G6 是一個簡單、易用、完備的圖可視化引擎，它在高定制能力的基礎上，提供了一系列設計優雅、便於使用的圖可視化解決方案。能幫助開發者搭建屬於自己的圖可視化、圖分析、或圖編輯器應用。 官網鏈接
G6是繪圖方面也是可以選擇的，可以使用 canvas 或 svg 渲染，默認是Canvas，在可視化及交互方面，G6是比較突出的，完虐jsplumb ，我們知道本質上是antv旗下專注圖形可視化庫，着重點不一樣，核心是可視化
🌲推薦閱讀
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 流程引擎，也超出我的認知范圍📖
🌲 推薦閱讀：
3.4 LogicFLow
LogicFLow算是最新的流程設計器web方案，官方介紹：LogicFlow脫胎於滴滴技術團隊在客服業務下的實踐，是由滴滴智能中台體驗平台研發的一款流程可視化的前端框架 官網鏈接
LogicFLow的定位，綜合了業務拓展能力以及可視化交互能力
與第一節提到的jsplumb不同的是，logicflow考慮到在基於DOM操作繁瑣的前提，最資源消耗也比較大，而選擇MVVM框架的理念，引入 Virtual DOM 來解決某些場景下的更新效率，也在一定程度上彌補「基於 Svg 渲染圖形」可能造成的渲染性能問題。
而且LogicFlow 還滿足上一節我們提到的 BPMN2.0 規范的節點和連線
LogicFLow作為最新的流程設計器開源方案，github開源三個月以來獲得1000🌟，后期我們會在LogicFLow做一些嘗試，然后以文章的形式分享給大家
🌲 推薦閱讀：