简体中文 | English
LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制,方便我们快速在业务系统内满足类流程图的需求。
# npm
$ npm install @logicflow/core @logicflow/extension --save
# yarn
$ yarn add @logicflow/core @logicflow/extension
# pnpm
$ pnpm add @logicflow/core @logicflow/extension
<!-- LogicFlow 容器 DOM-->
<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);
# 安装项目依赖和初始化构建
$ pnpm install
# 进入到指定项目开发和调试
cd packages/core
pnpm run build:watch
# 启动 example 查看效果
cd examples/feature-examples
pnpm run start
如果希望参与到 LogicFlow 的开发中,请遵从我们的贡献指南。如果你贡献度足够活跃,你可以申请成为社区协作者。
该项目的代码和文档基于 Apache-2.0 License 开源协议。