2024年08月29日 建站教程
LogicFlow是一个基于javascript的流程图编辑框架，提供了一系列与流程图相关的交互和编辑功能，还支持节点定制、插件等简单灵活的扩展机制，让开发人员快速实现业务系统中类似流程图的需求。
安装 LogicFlow
$ npm install @logicflow/core @logicflow/extension --save
或通过引入 <script> 标签的方式来安装
<!--LogicFlow core包css--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/style/index.css"/> <!--LogicFlow extension包css--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.css"/> <!--LogicFlow core包js--> <script src="/statichttps://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script> <!--LogicFlow的插件支持单个引入，这里以菜单插件为例--> <script src="/statichttps://cdn.jsdelivr.net/npm/@logicflow/extension/lib/Menu.js"></script>
简单示例代码
<div id="container"></div>;
// 数据
const data = {
// 节点
nodes: [
{
id: '21',
type: 'rect',
x: 100,
y: 200,
text: '矩形节点',
},
{
id: '50',
type: 'circle',
x: 300,
y: 400,
text: '圆形节点',
},
],
// 边
edges: [
{
type: 'polyline',
sourceNodeId: '50',
targetNodeId: '21',
},
],
};
// 渲染画布
const lf = new LogicFlow({
container: document.querySelector('#container'),
width: 700,
height: 600,
});
lf.render(data);
本文链接：http://so.lmcjl.com/news/11727/