logic-flow.js是一款开源的流程图编辑插件-BFW插件库

logic-flow.js是一款开源的流程图编辑插件

LogicFlow是一款基于JavaScript的流程图编辑框架，可以用来开发各种逻辑编排场景，例如流程图、ER图、BPMN流程等。该框架提供了一系列流程图相关的交互和编辑功能，同时支持简单灵活的节点自定义和插件等拓展机制，使开发者可以快速在业务系统内实现类似于流程图的需求。

LogicFlow基于SVG绘制各种形状的节点和线，提供了基础的节点和线，同时支持根据节点、线、图的各类鼠标事件做出反应，并提供了丰富的动画交互能力。此外，LogicFlow还提供了丰富的API，通过传参调用和监听事件的方式，与LogicFlow完成交互。流程图框架可以用于开发各种需要控制流程的编辑器，例如OA系统中的工作审批配置、机器人逻辑编排、无代码平台流程配置等，也可以用来开发智能机器人编辑执行动作时的编辑器。

logic-flow.js是一款开源的流程图编辑插件、

logic-flow.js是一款开源的流程图编辑插件

安装

通过 NPM：

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

cdn，通过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="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/logic-flow.js"></script>
<!--LogicFlow的插件支持单个引入，这里以菜单插件为例-->
<script src="https://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);

完整示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <!--LogicFlow core包css-->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/logicflow-core-index.css">

    <!--LogicFlow core包js-->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/logic-flow.js"></script>

    <style>
    </style>
</head>

<body>

    <div id="container"></div>;
    <script type="text/javascript">
        // 数据
        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);
    </script>
</body>

</html>

github地址：https://github.com/didi/LogicFlow

官方文档：https://docs.logic-flow.cn/docs/#/en/guide/start