流程图编辑框架LogicFlow快速入门

来源：TJ君

快速入门

最近因为要在系统里植入一个流程图的灵活绘制功能。如果说自己写一个，那必将是个庞大的工程，所以就在GitHub上调研了一番。最后发现了今天要给大家推荐的这个开源框架：LogicFlow

LogicFlow是一款流程图编辑框架，它提供了必要的流程图交互和编辑功能，同时还支持节点自定义和插件拓展。LogicFlow可以用于各种逻辑编排场景，例如流程图、ER图和BPMN流程。它在工作审批配置、机器人逻辑编排和无代码平台流程配置等方面都有广泛应用。

快速入门

LogicFlow的使用非常简单，只需要两步：

第一步、、、引入依赖

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

npminstall@logicflow/core
npminstall@logicflow/extension

可以编写一个简单的案例

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:"节点1"
},
properties:{}
},
{
id:"node_id_2",
type:"circle",
x:200,
y:300,
text:{
x:200,
y:300,
value:"节点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提供了一个工具，可以帮助大家所见即所得的绘图，效果如下：

审核编辑：汤梓红