【开源分享】Star 7.1k,自定义流程图框架:LogicFlow

2024-08-19

LogicFlow是一个流程图编辑框架，提供了流程图交互、编辑所必需的一系列功能，以及简单灵活的节点定制、插件等扩展机制，以便我们快速满足业务系统中类流程图的需求。

特征

高可扩展性兼容：各类产品定制的流程编辑需求，大部分模块以插件的形式实现，支持各模块自由插拔。
独立且完整流程图：可以充分表达业务逻辑，而不受流程引擎的限制。
专业：专注于业务流程编辑

用法

安装

# npm
$ npm install @logicflow/core @logicflow/extension --save

例子

// create container
<div id="container"></div>;

// prepare data
const data = {
  // node data
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: 'rect node',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: 'circle node',
    },
  ],
  // edge data
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
};
// render instance
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

lf.render(data);