前言

这几天一直想做前端流程图的功能，就是咱们平常所说的 Flow。从网上找了几款也发现了几款比较好的第三方库

• LogicFlow
• Vue super flow
• easy-flow
• vfd

当然还有其它的我还没有发现，等我发现了再推荐给大家。今天咱们主要说一下: LogicFlow。为什么要说它呢。主要有以下两点：

• 除了: LogicFlow，上述几款都是基于 vue 开发的。功能是挺好的，不过就是有点局限性。LogicFlow 不区分平台。除了在vue中使用，也可以在 react 中使用
• 大厂出品，LogicFlow 是某滴开源，可靠性和稳定性比较高

文档地址

http://logic-flow.org/

基本用法

安装

npm install @logicflow/core --save

引入

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

使用

// 1 创建容器
<div id="container"></div>
// 2 准备数据
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,
    },
  ],
};
// 3 初始化并渲染
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  stopScrollGraph: true,
  stopZoomGraph: true,
  width: 500,
  height: 500,
  grid: {
    type: 'dot',
    size: 20,
  },
});
lf.render(data);

效果图：

作为一个有逼格的开发者，肯定不能仅仅满足于这样的功能

进阶

使用组件

import LogicFlow from '@logicflow/core';
import { Control, Menu, DndPanel } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css';

LogicFlow.use(Control); // 控制面板
LogicFlow.use(Menu); // 右键菜单
LogicFlow.use(DndPanel); // 拖拽面板

最终效果如下：

生成图片

import LogicFlow from '@logicflow/core';
import { Snapshot } from '@logicflow/extension';

LogicFlow.use(Snapshot);


const lf = new LogicFlow({
  container: document.querySelector('#graph'),
  width: 700,
  height: 600,
});
// 可以使用任意方式触发，然后将绘制的图形下载到本地磁盘上
document.getElementById('download').addEventListener('click', () => {
  lf.getSnapshot()
})

其它功能

LogicFlow 还有其它很强大的功能，这里就不一一展开了，具体的用法请移步到官方文档仔细阅读，相信能满足绝大部分日常的功能~~ 快去查看吧！！[大笑]