Logic Flow 是一个**专注于流程图绘制的开源前端框架**，由腾讯开源，专门用于构建流程编辑器、工作流设计器、决策树编辑器等可视化工具。

持续前行
3 阅读4分钟

Logic Flow 介绍

Logic Flow 是一个专注于流程图绘制的开源前端框架，由腾讯开源，专门用于构建流程编辑器、工作流设计器、决策树编辑器等可视化工具。

1. 核心特性

1.1 基础能力

  • 拖拽式流程图编辑：支持节点拖拽、连线、调整大小
  • 多种节点类型：矩形、圆形、菱形、多边形等基础形状
  • 智能连线：自动吸附、避障、路径优化
  • 快捷键支持：复制、粘贴、撤销、重做等
  • 网格对齐：自动对齐到网格，保持布局整洁

1.2 高级功能

  • 自定义节点：支持完全自定义节点样式和交互
  • 自定义边：支持折线、曲线、贝塞尔曲线等
  • 插件系统：丰富的插件生态（侧边栏、工具栏、MiniMap等）
  • 数据驱动：基于Vue/React的响应式数据绑定
  • 序列化/反序列化：完整的数据导入导出能力

1.3 企业级特性

  • BPMN 2.0 支持：完整的工作流标准支持
  • 审批流设计：专门针对审批流程优化的功能
  • 多人协作：支持实时协同编辑
  • 版本控制：流程图版本管理和差异对比

2. 架构设计

2.1 核心架构

Logic Flow Core
├── Graph Model (数据模型)
├── View Render (视图渲染)
├── Event System (事件系统)
├── Command System (命令系统)
└── Plugin System (插件系统)

2.2 技术栈

  • 核心库：TypeScript + Canvas/SVG
  • 前端框架：支持 Vue 2/3、React
  • 构建工具：Webpack、Vite
  • 包管理：npm、yarn、pnpm

3. 快速开始

3.1 安装

# npm
npm install @logicflow/core

# yarn
yarn add @logicflow/core

# 如果需要Vue支持
npm install @logicflow/vue

3.2 基础使用

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

// 创建实例
const lf = new LogicFlow({
  container: document.getElementById('container'),
  grid: true,
  width: 800,
  height: 600
});

// 定义节点类型
lf.registerNode('custom-node', {
  // 自定义节点逻辑
});

// 渲染流程图
lf.render({
  nodes: [
    {
      id: 'node1',
      type: 'rect',
      x: 100,
      y: 100,
      text: '开始节点'
    },
    {
      id: 'node2',
      type: 'rect',
      x: 300,
      y: 100,
      text: '处理节点'
    }
  ],
  edges: [
    {
      id: 'edge1',
      type: 'polyline',
      sourceNodeId: 'node1',
      targetNodeId: 'node2'
    }
  ]
});

4. 核心概念

4.1 节点 (Node)

// 节点配置示例
const nodeConfig = {
  id: 'node1',
  type: 'rect', // 节点类型
  x: 100,       // X坐标
  y: 100,       // Y坐标
  text: '开始', // 节点文本
  properties: {  // 自定义属性
    isStart: true,
    assignee: 'admin'
  }
};

4.2 边 (Edge)

// 边配置示例
const edgeConfig = {
  id: 'edge1',
  type: 'polyline',    // 边类型
  sourceNodeId: 'node1', // 源节点
  targetNodeId: 'node2', // 目标节点
  text: '通过',        // 边文本
  pointsList: [        // 折线点列表
    { x: 200, y: 100 },
    { x: 300, y: 100 }
  ]
};

4.3 插件 (Plugin)

// 使用插件
import { Control } from '@logicflow/extension';

const lf = new LogicFlow({
  plugins: [Control]
});

// 插件配置
lf.setControlItems([
  'zoom-in',    // 放大
  'zoom-out',   // 缩小
  'reset',      // 重置
  'undo',       // 撤销
  'redo'        // 重做
]);

5. 实际应用示例

5.1 审批流设计器

<template>
  <div class="workflow-designer">
    <div class="toolbar">
      <button @click="addNode('start')">开始节点</button>
      <button @click="addNode('approval')">审批节点</button>
      <button @click="addNode('end')">结束节点</button>
      <button @click="save">保存</button>
    </div>
    
    <div class="canvas-container">
      <LogicFlow
        ref="lfRef"
        :config="lfConfig"
        @node:click="onNodeClick"
        @edge:click="onEdgeClick"
        @graph:change="onGraphChange"
      />
    </div>
    
    <div class="property-panel" v-if="selectedElement">
      <h3>属性面板</h3>
      <PropertyForm
        :element="selectedElement"
        @change="onPropertyChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { LogicFlow } from '@logicflow/vue'
import { Control, MiniMap } from '@logicflow/extension'
import PropertyForm from './PropertyForm.vue'

// Logic Flow配置
const lfConfig = reactive({
  grid: true,
  background: {
    color: '#fafafa'
  },
  keyboard: {
    enabled: true
  },
  style: {
    rect: {
      width: 100,
      height: 60,
      radius: 5
    }
  },
  plugins: [Control, MiniMap]
})

// 节点类型定义
const nodeTypes = {
  start: {
    type: 'circle',
    width: 60,
    height: 60,
    text: '开始',
    style: {
      fill: '#52c41a',
      stroke: '#389e0d'
    }
  },
  approval: {
    type: 'rect',
    width: 120,
    height: 60,
    text: '审批节点',
    style: {
      fill: '#1890ff',
      stroke: '#096dd9'
    }
  },
  end: {
    type: 'circle',
    width: 60,
    height: 60,
    text: '结束',
    style: {
      fill: '#f5222d',
      stroke: '#cf1322'
    }
  }
}

// 方法实现
const addNode = (type) => {
  const lf = lfRef.value.getLfInstance()
  const { x, y } = getCenterPosition()
  
  lf.addNode({
    type: type,
    x: x,
    y: y,
    text: nodeTypes[type].text,
    properties: {
      nodeType: type
    }
  })
}

const save = () => {
  const lf = lfRef.value.getLfInstance()
  const graphData = lf.getGraphData()
  console.log('保存流程图:', graphData)
  // 发送到后端保存
}
</script>

5.2 自定义节点

// 自定义审批节点
import { RectNode, RectNodeModel } from '@logicflow/core'

class ApprovalNode extends RectNode {
  // 自定义节点视图
}

class ApprovalNodeModel extends RectNodeModel {
  // 自定义节点模型
  initNodeData(data) {
    super.initNodeData(data)
    this.width = 120
    this.height = 60
    this.radius = 8
    this.text = {
      value: data.text || '审批节点',
      x: this.x,
      y: this.y
    }
  }
  
  getNodeStyle() {
    const style = super.getNodeStyle()
    return {
      ...style,
      fill: '#1890ff',
      stroke: '#096dd9',
      strokeWidth: 2
    }
  }
}

// 注册自定义节点
lf.registerNode('approval', ApprovalNode, ApprovalNodeModel)

6. 插件生态

6.1 官方插件

  • Control：工具栏控制
  • MiniMap：缩略图导航
  • Selection：多选操作
  • Dnd：拖拽面板
  • BpmnElement：BPMN元素支持
  • Snapshot：截图导出

6.2 社区插件

  • LogicFlow-Theme：主题系统
  • LogicFlow-Vue：Vue集成
  • LogicFlow-React：React集成
  • LogicFlow-Excel：Excel导入导出

7. 与其他产品的对比

特性Logic FlowX6G6mxGraph
学习曲线中等中等较陡陡峭
定制能力强强强中等
文档质量优秀优秀良好一般
社区活跃度高高高低
企业级支持腾讯开源蚂蚁开源蚂蚁开源商业
流程图专注是是否是

8. 最佳实践

8.1 性能优化

  • 使用虚拟渲染处理大量节点
  • 合理使用事件节流
  • 避免频繁的全量重渲染

8.2 代码组织

  • 按功能模块拆分自定义节点
  • 使用插件化架构
  • 统一样式管理

8.3 数据管理

  • 实现自动保存机制
  • 使用版本控制
  • 建立数据验证规则

9. 总结

Logic Flow 是一个成熟、稳定、功能丰富的流程图框架，特别适合：

  • 工作流设计系统
  • 审批流配置工具
  • 业务流程建模
  • 决策树可视化
  • 架构图绘制

如果你需要构建企业级的流程图应用，Logic Flow 是目前国内最推荐的解决方案之一，具有完整的文档、活跃的社区和可靠的技术支持。

avatar
文章
阅读
粉丝