LogicFlow是一款由滴滴客服技術團隊開源的流程圖編輯框架，它提供了一系列流程圖交互、編輯所必需的功能和簡單靈活的節(jié)點自定義、插件等拓展機制，支持前端研發(fā)自定義開發(fā)各種邏輯編排場景，如流程圖、ER圖、BPMN流程等，在工作審批配置、機器人邏輯編排、無代碼平臺流程配置等方面有較好的應用。

一些大廠，例如美團、京東、華為，在他們的項目中，也經(jīng)常會出現(xiàn)LogicFlow的身影。說實在，這個流程圖框架確實是挺好用的，在github上擁有超過9k個星星，npm下載量累計超過300k，小星給大家強烈推薦了！

如何使用

首先通過npm安裝：

#?npm $?npm?install?@logicflow/core?@logicflow/extension?--save #?yarn $?yarn?add?@logicflow/core?@logicflow/extension #?pnpm $?pnpm?add?@logicflow/core?@logicflow/extension

然后就創(chuàng)建一個流程圖實例，并在畫布上渲染：

<!--?LogicFlow?容器?DOM--> <div?id="container"></div>;

//?準備數(shù)據(jù) const?data?=?{ //?節(jié)點 nodes:?[ ????{ ??????id:?'21', ??????type:?'rect', ??????x:?100, ??????y:?200, ??????text:?'矩形節(jié)點', ????}, ????{ ??????id:?'50', ??????type:?'circle', ??????x:?300, ??????y:?400, ??????text:?'圓形節(jié)點', ????}, ??], //?邊 edges:?[ ????{ ??????type:?'polyline', ??????sourceNodeId:?'50', ??????targetNodeId:?'21', ????}, ??], }; //?渲染畫布 const?lf?=?new?LogicFlow({ container:?document.querySelector('#container'), width:?700, height:?600, }); lf.render(data);

基礎用法還是很簡單，接口很直觀，沒有彎彎繞繞的東西，這給開發(fā)者留下了不錯的第一印象。

應用場景

流程設計工具

在企業(yè)級應用中，LogicFlow可以用來設計工作流、業(yè)務流程等，幫助用戶可視化地創(chuàng)建和管理復雜的業(yè)務流程。

下面是一個審批流程的例子。

組織架構圖

LogicFlow可以用來繪制公司的組織架構圖，展示公司內部各部門及其人員的關系。

比賽晉級圖

LogicFlow可以輕松繪制各類比賽的人員晉級情況圖，并在上面預言一下今年世界賽小組賽晉級情況。

在Vue中使用LogicFlow

下面是一個在Vue中使用LogicFlow的完整例子，編輯功能比較完整，包括添加刪除節(jié)點、放大縮小畫布和導出圖片等基本功能。

最后，我來分享一下LogicFlow的架構設計特點。

• 面向對象的設計模式：LogicFlow內部做好封裝，用戶可以做繼承、重寫接口，這樣開發(fā)者可以對LogicFlow底層進行擴展。
• 靈活的方法設計：方法有固定類型的輸入和輸出，提供LogicFlow.use(fn)在原型上拓展方法。
• 觀察者模式：通過on方法供宿主訂閱各類內部事件。
• 數(shù)據(jù)定制：節(jié)點、線的自定義業(yè)務屬性以及流程圖導出的數(shù)據(jù)都可以定制。
• 插件化：支持節(jié)點和線的二次開發(fā)，可開發(fā)UI組件注冊到LogicFlow的組件畫布內。

開源地址：

https://github.com/didi/LogicFlow

官方網(wǎng)站：

https://site.logic-flow.cn/

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關注數(shù)據(jù)與安全，洞悉企業(yè)級服務市場：https://www.ijiandao.com/