LogicFlow介绍

LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。

更多资料请查看 LogicFlow 系列文章

特性

可视化模型：通过 LogicFlow 提供的直观可视化界面，用户可以轻松创建、编辑和管理复杂的逻辑流程图。
高可定制性：用户可以根据自己的需要定制节点、连接器和样式，创建符合特定用例的定制逻辑流程图。
自执行引擎：执行引擎支持浏览器端执行流程图逻辑，为无代码执行提供新思路。

快速上手

安装

命令安装

通过使用 npm、yarn、pnpm 进行安装。

bash 复制代码

npm install @logicflow/core --save

# 插件包（不使用插件时不需要引入）
npm install @logicflow/extension --save

或者

bash 复制代码

yarn add @logicflow/core

# 插件包（不使用插件时不需要引入）
yarn add @logicflow/extension

或者

bash 复制代码

pnpm add @logicflow/core

# 插件包（不使用插件时不需要引入）
pnpm add @logicflow/extension

通过CDN引入

由于LogicFlow本身会有一些预置样式，所以除了需要引入js包外还需要引入css包。

2.0版本之后的CDN包的引入方式

html 复制代码

<!-- 引入 core包和对应css -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@logicflow/core/lib/style/index.min.css" rel="stylesheet">

<!--  引入 extension包和对应css（不使用插件时不需要引入） -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/extension/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/extension/lib/style/index.min.css" />

2.0版本以前的CDN包的引入方式

html 复制代码

<!-- 引入 core包和对应css -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/logic-flow.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/style/index.css" rel="stylesheet">

<!--  引入 extension包和对应css（不使用插件时不需要引入） -->
<!-- 值得注意的是：2.0版本之前，插件的脚本包是分开导出的 -->
<!-- 因此引入某个组件，引用路径需要具体到包名，就像下文引入Menu插件这样👇🏻 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/lib/Menu.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/lib/style/index.css" />

默认情况下CDN引入的是最新版本的包，如需引入其他版本的包，可到此处查看具体包信息：core包、entension包，再根据自己的诉求在cdn路径中加上包版本。

开始使用

1. 在原生JS环境下使用

html 复制代码

<!-- 引入 core 包和对应 css-->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/core/dist/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@logicflow/core/lib/style/index.min.css" rel="stylesheet">

<!-- 创建画布容器 -->
<div id="container"></div>

<script>
// 引入继承节点，引入 core 包后，会自动挂载 window.Core 
// const { RectNode, RectNodeModel } = Core;

// 准备图数据
const data = {
  // 节点
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: 'rect node',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: 'circle node',
    },
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
}

// 创建画布实例，也可以 new Core.LogicFLow
const lf = new Core.default({
  container: document.querySelector('#container'),
  width: 700,
  height: 500,
  grid: true,
})

// 渲染画布实例
lf.render(data)
</script>

2. 在框架中使用

LogicFlow 本身是以 umd 打包为纯 JS 的包，所以无论是 vue 还是 react 都可以使用。

Tip

LogicFlow初始化时支持不传画布宽高，这种情况下默认取的是container参数传入的DOM节点的宽高。

为了保障画布能正常渲染，请在确保对应容器已存在且有宽高后再初始化LogicFlow实例。

在React中使用

react 复制代码

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/index.css';
import { useEffect, useRef } from 'react';

export default function App() {
  const refContainer = useRef(null);
  const data = {
    // 节点
    nodes: [
      {
        id: '21',
        type: 'rect',
        x: 300,
        y: 100,
        text: 'rect node',
      },
      {
        id: '50',
        type: 'circle',
        x: 500,
        y: 100,
        text: 'circle node',
      },
    ],
    // 边
    edges: [
      {
        type: 'polyline',
        sourceNodeId: '50',
        targetNodeId: '21',
      },
    ],
  };
  useEffect(() => {
    const lf = new LogicFlow({
      container: refContainer.current,
      grid: true,
      height: 200,
    });
    lf.render(data);
    lf.translateCenter();
  }, []);

  return <div className="App" ref={refContainer}></div>;
}

在Vue框架中使用

vue 复制代码

<template>
  <div class="container" ref="container"></div>
</template>

<script>
  import LogicFlow from "@logicflow/core";
  import "@logicflow/core/lib/style/index.css";
  // import "@logicflow/core/dist/style/index.css"; // 2.0版本前的引入方式

  export default {
    mounted() {
      this.lf = new LogicFlow({
        container: this.$refs.container,
        grid: true,
      });
      this.lf.render();
    },
  };
</script>

<style scoped>
  .container {
    width: 1000px;
    height: 500px;
  }
</style>

参考https://site.logic-flow.cn/tutorial/get-started