前端工具库 【@logicflow/core】

前言

LogicFlow 是由滴滴体验平台技术研发的一款解决流程可视化的前端框架，提供了一系列流程图交互、编辑所必需的功能和简单灵活的节点自定义、插件等拓展机制，方便我们快速在业务系统内满足类流程图的需求。目前，LogicFlow 已经支持了客服业务下 IVR、工单流转、智能机器人等多个运营系统，在各系统不同的流程配置需求中得到了验证。

文档地址：https://07.logic-flow.cn/guide/start.html

优势

• 🛠 高拓展性

兼容各种产品自定义的流程编辑需求，绝大部分模块以插件的形式实现，支持各模块自由插拔。

• 🚀 重执行

流程图能完备的表达业务逻辑，不受流程引擎限制。

• 🎯 专业

专注于业务流程图编辑的框架

1. 安装

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

# yarn
$ yarn add @logicflow/core

2. 引用

import LogicFlow from '@logicflow/core';
import '@logicflow/core/dist/style/index.css';

3. 使用示例

import LogicFlow from '@logicflow/core';

//创建容器
<div id="container"></div>

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

// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  stopScrollGraph: true,
  stopZoomGraph: true,
  width: 500,
  height: 500,
  grid: {
    type: 'dot',
    size: 20,
  },
});

lf.render(data);