9k star！一款靈活的流程圖框架,，大廠都在用,！

芥子c1yw3tb42g 2025-01-22

展開全文

大家好，我是開源小星呀！

在我們的開發(fā)工作中,，經(jīng)常會有一些需要編輯或者展示流程圖的場景,，例如在業(yè)務(wù)系統(tǒng)中需要定義和展示不同工單類型的業(yè)務(wù)流程，在人力資源管理系統(tǒng)中需要定義人員入職,、離職,、調(diào)崗等人資管理流程。這些系統(tǒng)中需要用到的流程圖編輯和展示功能,，如果全部由自己開發(fā),，那么會費時費力，到最后可能還不好用,。

今天給大家介紹的這款開源流程圖編輯框架——LogicFlow,，也許可以幫你解決大部分的流程圖繪制問題。

項目介紹

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

一些大廠，例如美團,、京東,、華為，在他們的項目中,，也經(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);

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

應(yīng)用場景

流程設(shè)計工具

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

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

組織架構(gòu)圖

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

比賽晉級圖

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

在Vue中使用LogicFlow

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

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

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