qibmz

工作流可视化库

Vue Flow 和 Logic Flow 工作流图表库介绍.

什么是工作流可视化库

工作流可视化库是用于构建流程图、工作流编辑器和节点图等应用的前端组件库。它们提供了强大的图形编辑、节点连接、拖拽布局等功能，广泛应用于流程设计、数据流可视化、低代码平台等场景。

Vue Flow

Vue Flow 是基于 Vue 3 的流程图库，它是 React Flow 的 Vue 版本实现，提供了高度可定制的节点图编辑器。

核心特性

  • Vue 3 原生支持：完全基于 Vue 3 和 Composition API 构建
  • 高性能渲染：支持大量节点的流畅渲染和交互
  • 自定义节点：可以使用任何 Vue 组件作为节点
  • 丰富的交互：支持拖拽、缩放、平移、连线等操作
  • TypeScript 支持：完整的类型定义
  • 插件系统：可扩展的插件架构

安装使用

# 使用 pnpm 安装
pnpm add @vue-flow/core

# 可选插件
pnpm add @vue-flow/background @vue-flow/controls @vue-flow/minimap

基础示例

<script setup lang="ts">
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'

// 导入样式
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

const elements = ref([
  {
    id: '1',
    type: 'input',
    label: '开始节点',
    position: { x: 250, y: 5 }
  },
  {
    id: '2',
    label: '处理节点',
    position: { x: 100, y: 100 }
  },
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    animated: true
  }
])

const { onConnect, addEdges } = useVueFlow()

// 连接节点时的回调
onConnect((params) => {
  addEdges([params])
})
</script>

<template>
  <div style="height: 500px">
    <VueFlow v-model="elements">
      <Background />
      <Controls />
      <MiniMap />
    </VueFlow>
  </div>
</template>

自定义节点示例

<!-- CustomNode.vue -->
<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'

defineProps<{
  data: {
    label: string
  }
}>()
</script>

<template>
  <div class="custom-node">
    <Handle type="target" :position="Position.Top" />
    <div class="node-content">
      {{ data.label }}
    </div>
    <Handle type="source" :position="Position.Bottom" />
  </div>
</template>

<style scoped>
.custom-node {
  padding: 10px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>

适用场景

  • 工作流编辑器
  • 流程图设计工具
  • 数据流可视化
  • 状态机图表
  • 思维导图

Logic Flow

Logic Flow 是滴滴开源的流程图编辑框架，提供了一套完整的流程可视化解决方案，特别适合于业务流程管理。

核心特性

  • 框架无关：可以在 Vue、React 等任何框架中使用
  • 业务友好：专注于业务流程场景，提供丰富的业务节点
  • 高度可扩展：支持自定义节点、边、主题等
  • BPMN 支持：支持 BPMN 2.0 规范
  • 数据转换：支持多种数据格式导入导出
  • 完善的 API：提供丰富的 API 和事件系统

安装使用

# 核心库
pnpm add @logicflow/core

# 扩展包
pnpm add @logicflow/extension

基础示例

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'

const containerRef = ref<HTMLDivElement>()
let lf: LogicFlow

onMounted(() => {
  if (!containerRef.value) return

  // 初始化 LogicFlow
  lf = new LogicFlow({
    container: containerRef.value,
    grid: true,
    background: {
      color: '#f7f9ff'
    }
  })

  // 渲染数据
  lf.render({
    nodes: [
      {
        id: '1',
        type: 'rect',
        x: 100,
        y: 100,
        text: '开始'
      },
      {
        id: '2',
        type: 'circle',
        x: 300,
        y: 100,
        text: '审批'
      }
    ],
    edges: [
      {
        id: 'e1',
        type: 'polyline',
        sourceNodeId: '1',
        targetNodeId: '2'
      }
    ]
  })

  // 监听事件
  lf.on('node:click', ({ data }) => {
    console.log('节点被点击:', data)
  })
})
</script>

<template>
  <div ref="containerRef" style="height: 500px; width: 100%" />
</template>

自定义节点示例

import { RectNode, RectNodeModel } from '@logicflow/core'

class CustomNode extends RectNode {}

class CustomNodeModel extends RectNodeModel {
  initNodeData(data: any) {
    super.initNodeData(data)
    // 自定义节点样式
    this.width = 120
    this.height = 60
    this.radius = 8
  }

  getNodeStyle() {
    const style = super.getNodeStyle()
    style.stroke = '#667eea'
    style.fill = '#f0f3ff'
    style.strokeWidth = 2
    return style
  }
}

export default {
  type: 'custom-node',
  view: CustomNode,
  model: CustomNodeModel
}

在 Vue 中注册自定义节点

import CustomNode from './CustomNode'

lf.register(CustomNode)

// 使用自定义节点
lf.render({
  nodes: [
    {
      id: '1',
      type: 'custom-node',
      x: 100,
      y: 100,
      text: '自定义节点'
    }
  ]
})

适用场景

  • 审批流程设计
  • 业务流程管理（BPM）
  • BPMN 流程图
  • 低代码平台
  • 工作流引擎可视化

对比总结

特性Vue FlowLogic Flow
框架支持Vue 3 专用框架无关
学习曲线中等较平缓
性能优秀良好
自定义能力强（Vue 组件）强（类继承）
BPMN 支持需自行实现原生支持
社区活跃度高中等
TypeScript完整支持完整支持
适用场景通用流程图业务流程为主

选择建议

选择 Vue Flow 如果：

  • 你的项目使用 Vue 3
  • 需要高度自定义的节点和交互
  • 追求现代化的开发体验
  • 对性能要求较高

选择 Logic Flow 如果：

  • 需要 BPMN 支持
  • 专注于业务流程管理
  • 需要框架无关的解决方案
  • 需要更成熟的企业级特性

相关资源

Vue Flow

Logic Flow

许可证

  • Vue Flow 采用 MIT 许可证
  • Logic Flow 采用 Apache-2.0 许可证

uni-helper

专注于 uni-app 生态的工具集.

Built with qbimz • © 2026