來源：TJ君

快速入門

最近因?yàn)橐谙到y(tǒng)里植入一個(gè)流程圖的靈活繪制功能。如果說自己寫一個(gè)，那必將是個(gè)龐大的工程，所以就在GitHub上調(diào)研了一番。最后發(fā)現(xiàn)了今天要給大家推薦的這個(gè)開源框架：LogicFlow

LogicFlow是一款流程圖編輯框架，它提供了必要的流程圖交互和編輯功能，同時(shí)還支持節(jié)點(diǎn)自定義和插件拓展。LogicFlow可以用于各種邏輯編排場景，例如流程圖、ER圖和BPMN流程。它在工作審批配置、機(jī)器人邏輯編排和無代碼平臺(tái)流程配置等方面都有廣泛應(yīng)用。

快速入門

LogicFlow的使用非常簡單，只需要兩步：

第一步、、、引入依賴

也可以使用npm引入，只需要：

npminstall@logicflow/core
npminstall@logicflow/extension

可以編寫一個(gè)簡單的案例

importLogicFlowfrom"@logicflow/core";
import"@logicflow/core/dist/style/index.css";

constlf=newLogicFlow({
container:document.querySelector("#container")
});

lf.render({
nodes:[
{
id:"node_id_1",
type:"rect",
x:100,
y:100,
text:{
x:100,
y:100,
value:"節(jié)點(diǎn)1"
},
properties:{}
},
{
id:"node_id_2",
type:"circle",
x:200,
y:300,
text:{
x:200,
y:300,
value:"節(jié)點(diǎn)2"
},
properties:{}
}
],
edges:[
{
id:"edge_id",
type:"polyline",
sourceNodeId:"node_id_1",
targetNodeId:"node_id_2",
text:{
x:139,
y:200,
value:"連線"
},
startPoint:{
x:110,
y:140
},
endPoint:{
x:200,
y:250
},
pointsList:[
{
x:100,
y:140
},
{
x:100,
y:200
},
{
x:200,
y:200
},
{
x:200,
y:250
}
],
properties:{}
}
]
});

這里不得不提一下，LogicFlow提供了一個(gè)工具，可以幫助大家所見即所得的繪圖，效果如下：

審核編輯：湯梓紅