推薦這幾個流程圖設計器web開發方案

時間 2021-06-19

標籤 html 前端 vue jquery git github web canvas 後端 api 欄目系統架構简体版

原文原文鏈接

前沿：一個流程圖設計器須要什麼？一個是圖的繪製能力、基於svg或者canvas來繪製各類形狀的節點（矩形、圓形、多邊形）以及線，一個是圖與圖之間的交互包括拖拽，節點之間的連線等，最後是畫布面板的便捷性，其中包括：好比ps中的網格功能、對其線、步驟回撤、畫布的可伸縮、快捷按鈕等等，那前端社區有啥開源解決方案，方便咱們快速開發一個屬於本身的流程圖設計器？

1.繪圖能力

提到繪圖能力，web主要有兩種實現方式：Canvas及Svg，咱們看看這兩種有什麼差別

	Canvas	SVG
操做對象	基於像素（動態點陣圖）	基於圖形元素
驅動	只能腳本驅動	支持腳步以及CSS
事件交互	用戶交互到像素點（x,y）	用戶交互到圖形元素
性能	適合小面積、大數量應用場景	適合大面積，小數量應用面積

基於流程圖的場景：節點不會太多，加上節點都是靜態圖，沒有太多動態渲染，那svg可能更適合，並且svg具有高保本，可是若是在大規模數據或圖元的狀況下請謹慎選擇，畢竟性能會差些html

🌲 推薦閱讀：前端

2.現有流程圖設計器

目前有不少現成的流程圖設計器，適合廣泛的應用場景

processon 推薦
億圖
Microsoft Visio

可是市場現成的流程圖設計器只支持廣泛的應用場景，如何基於咱們自己的業務產品線拓展就成爲一種問題？

舉個例子：前段時間涉及開發一款數據集成服務web應用，涉及到面板編排的模塊，須要配置數據轉換 adapter，好比定製一些節點作自定義數據轉換，自己就是一個流程圖設計器，因而我作了一些前期的調研，調研了一部分開源的流程設計器開發方案，咱們先看看一個普通的流程設計器長啥樣, 圖片來源 logicFlowvue

3.開源流程設計器web開發方案

3.1 Jsplumb

官方介紹：jsPlumb是一個比較強大的繪圖組件，它提供了一種方法，主要用於鏈接網頁上的元素。在現代瀏覽器中，它使用SVG或者Canvas技術官網連接

jsPlumb是比較早期的一個繪圖組件，歷史悠久，7年前就開源了，能夠用來開發流程圖設計器，可是它須要依賴jquery才能使用，由於其自己是基於DOM連線的一個庫，核心主要包括如下幾個模塊jquery

Souce: 源節點
Target: 目標節點
Anchor: 錨點
Endpoint: 端點
Connector: 鏈接
Overlays: 能夠理解爲在鏈接線上的文字或者箭頭之類的東西

下面是這幾個模塊串起來的實例git

若是你想在vue中使用也是能夠的，這裏不作具體介紹，感興趣的童鞋看推薦閱讀github

🌲 推薦閱讀：web

3.2.Antv G6

官方介紹：G6 是一個簡單、易用、完備的圖可視化引擎，它在高定製能力的基礎上，提供了一系列設計優雅、便於使用的圖可視化解決方案。能幫助開發者搭建屬於本身的圖可視化、圖分析、或圖編輯器應用。官網連接

G6是繪圖方面也是能夠選擇的，可使用 canvas 或 svg 渲染，默認是Canvas，在可視化及交互方面，G6是比較突出的，完虐jsplumb ，咱們知道本質上是antv旗下專一圖形可視化庫，着重點不同，核心是可視化canvas

🌲推薦閱讀後端

3.3 bpmn-js

官方介紹：一個BPMN 2.0渲染工具包和Web建模器。它是用 JavaScript 編寫的，將 BPMN 2.0 圖表嵌入到現代瀏覽器中，而且不須要服務器後端。這樣能夠輕鬆將其嵌入到任何 Web 應用程序中, 方便前端也能實現流程圖設計器官網連接

這裏先介紹下BPMN是什麼鬼api

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作一些嘗試，而後以文章的形式分享給你們

🌲 推薦閱讀：

logicflow vue demo

你好，我是🌲 樹醬，請你喝杯🍵 記得三連哦～

1.閱讀完記得點個贊哦，有👍 有動力

2.關注公衆號前端那些趣事，陪你聊聊前端的趣事

3.文章收錄在Github frontendThings 感謝Star✨

相關標籤/搜索