https://s3-us-west-2.amazonaws.com/secure.notion-static.com/869a4033-8c4f-4e26-a95a-da77af5b71b4/687474703a2f2f6c6f6769632d666c6f772e6f72672f6e65772d6c6f676f2e706e67
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5db42fb5-1a1c-4eb2-9791-116bb1928df6/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406c6f676963666c6f772f636f7265
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/08c03ead-d159-4348-9404-c91bce67305b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f406c6f676963666c6f772f636f7265
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1dcc3d5d-ce03-41e8-b4a5-6f5a96fe3152/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f406c6f676963666c6f772f636f7265
LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制,方便我们快速在业务系统内满足类流程图的需求。
高拓展性
兼容各种产品自定义的流程编辑需求,绝大部分模块以插件的形式实现,支持各模块自由插拔。
重执行
流程图能完备的表达业务逻辑,不受流程引擎限制。
专业
专注于业务流程图编辑的框架
# npm
$ npm install @logicflow/core @logicflow/extension --save
// 创建容器
<div id="container"></div>;
// 准备数据
const data = {
// 节点
nodes: [
{
id: 21,
type: 'rect',
x: 100,
y: 200,
text: {
value: '矩形节点',
x: 100,
y: 200,
},
},
{
id: 50,
type: 'circle',
x: 300,
y: 400,
text: {
value: '圆形节点',
x: 300,
y: 400,
},
},
],
// 边
edges: [
{
type: 'polyline',
sourceNodeId: 50,
targetNodeId: 21,
},
],
};
// 渲染画布
const lf = new LogicFlow({
container: document.querySelector('#container'),
width: 700,
height: 600,
});
lf.render(data);