聲明：該文章來自（開源之星）版權(quán)由原作者所有，K2OS渲染引擎提供網(wǎng)頁加速服務(wù)。

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

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

如何使用

首先通過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)建一個(gè)流程圖實(shí)例，并在畫布上渲染：

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

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

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

應(yīng)用場景

流程設(shè)計(jì)工具

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

下面是一個(gè)審批流程的例子。

組織架構(gòu)圖

LogicFlow可以用來繪制公司的組織架構(gòu)圖，展示公司內(nèi)部各部門及其人員的關(guān)系。

比賽晉級(jí)圖

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

在Vue中使用LogicFlow

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

最后，我來分享一下LogicFlow的架構(gòu)設(shè)計(jì)特點(diǎn)。

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

開源地址：

https://github.com/didi/LogicFlow

官方網(wǎng)站：

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

[超站]友情鏈接：

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