推荐一款轻量 Vue3 可视化工作流引擎：mflows 上手指南

一颗烂土豆
297 阅读6分钟

推荐一款轻量 Vue3 可视化工作流引擎：mflows 上手指南

icon.png 在现代前端开发中，工作流可视化需求越来越常见——从业务流程设计到自动化任务编排，一个灵活易用的工作流编辑器能极大提升开发效率。今天给大家推荐一款专为 Vue 3 打造的轻量工作流引擎：mflows，它开箱即用且支持高度自定义，非常适合快速集成到 Vue 3 项目中。

什么是 mflows？

mflows 是一款面向 Vue 3 的可视化工作流引擎与编辑器，核心特点是轻量、易扩展、开箱即用。它不仅提供了完整的流程编辑画布，还通过抽象的节点系统让自定义业务节点变得简单，同时支持 ESM 和 UMD 双格式，无论是模块化项目还是 CDN 引入都能轻松应对。

核心特性速览

如果你正在寻找一款工作流工具，mflows 的这些特性可能会打动你：

  •  Vue 3 原生适配：基于 Vue 3 + Vite 开发，完美兼容 Composition API 和单文件组件
  • 内置编辑器与主题：自带可拖拽的编辑画布，支持明暗主题切换，无需从零构建 UI
  •  灵活的节点系统：通过 BaseNode 抽象类，几行代码就能实现自定义业务节点
  • 双格式支持：同时提供 ESM 和 UMD 产物，支持 npm 安装或 CDN 直接引入
  •  无头运行能力：可脱离 UI 单独运行工作流（FlowRunner），适合后端或自动化场景
  •  完善的生态工具：包含依赖管理、变量管理、资源管理等辅助能力

快速上手：5 分钟跑通第一个工作流编辑器

1. 安装依赖

mflows 支持 npm、pnpm、yarn 等包管理工具，安装命令如下：

# npm
npm i mflows

# pnpm
pnpm add mflows

# yarn
yarn add mflows

注意：需要手动引入全局样式（必选）：

import 'mflows/style.css'

2. 最简单的用法

在 Vue 组件中直接引入 MFlowEditor 组件，就能得到一个可拖拽、可连接的工作流画布：

<template>
  <!-- 给编辑器设置高度即可渲染 -->
  <MFlowEditor style="height: 600px" />
</template>

<script setup lang="ts">
import { MFlowEditor } from 'mflows'
import 'mflows/style.css' // 必须引入样式
</script>

运行后，你会看到一个包含基础节点的编辑界面，支持拖拽节点、绘制连接线、删除元素等基础操作。

核心功能详解

1. 编辑器实例与 API 操作

通过 ref 获取编辑器实例后，可以调用丰富的 API 操作工作流：

<template>
  <MFlowEditor ref="editor" style="height: 600px" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { MFlowEditor, BaseNode } from 'mflows'

const editor = ref(null)

onMounted(() => {
  // 获取内部状态管理
  const store = editor.value.getStore()
  
  // 注册自定义节点（后面会详细讲）
  // editor.value.registerNode(...)
  
  // 切换主题（默认 dark）
  editor.value.switchTheme('light')
  
  // 添加节点
  store.addNode({
    id: 'node1',
    type: 'MyNode', // 节点类型（需提前注册）
    position: { x: 200, y: 120 },
    data: {}
  })
  
  // 导出工作流为 JSON
  const workflowJson = editor.value.exportWorkflow()
})
</script>

常用 API 包括节点/连线的增删改查、主题切换、工作流导入导出、撤销重做等，基本覆盖了工作流编辑的全场景。

2. 自定义业务节点（核心能力）

mflows 的一大亮点是极易扩展的节点系统。通过继承 BaseNode 抽象类，你可以快速实现业务专属节点。

一个简单的自定义节点示例：
import { BaseNode, registerNode } from 'mflows'

// 定义节点的配置类型和输出数据类型
class MyNode extends BaseNode<{ times: number }, { result: number }> {
  // 节点类型标识（必须唯一）
  static NodeType = 'MyNode'

  // 初始化节点的输入/输出端口
  protected async initialize() {
    this.inputPoints = [
      { id: 'execute', name: '执行', dataType: 'flow' }, // 流程触发端口
      { id: 'number', name: '数字', dataType: 'number' }  // 数据输入端口
    ]
    this.outputPoints = [
      { id: 'result', name: '结果', dataType: 'object' }, // 数据输出端口
      { id: 'next', name: '下一步', dataType: 'flow' }    // 流程输出端口
    ]
  }

  // 检查节点配置是否合法（如必填项校验）
  protected checkConfig() {
    return typeof this.settings.times === 'number'
  }

  // 处理数据逻辑（核心业务逻辑）
  protected async processConfigUpdate() {
    const inputValue = Number(this.nodeData?.value ?? 1)
    // 业务逻辑：输入值乘以配置的 times
    return { result: inputValue * (this.settings.times ?? 1) }
  }
}

// 注册节点到系统中
registerNode('MyNode', {
  name: '我的计算节点', // 显示名称
  logic: MyNode         // 节点逻辑类
})

注册后，这个节点会出现在编辑器的节点面板中，可拖拽使用，且会按照你定义的逻辑处理数据和流程。

3. 无头运行工作流（FlowRunner）

mflows 不仅能可视化编辑，还支持脱离 UI 单独运行工作流，适合后端自动化或批量处理场景：

import { runWorkflow } from 'mflows'

// 定义工作流节点和连线
const nodes = [
  { id: 'n1', type: 'InitialNode', data: {} }, // 起始节点
  { id: 'n2', type: 'MyNode', data: { times: 2 } } // 自定义节点
]
const edges = [
  { 
    id: 'e1', 
    source: 'n1',  // 源节点
    target: 'n2',  // 目标节点
    sourceHandle: 'next', // 源节点输出端口
    targetHandle: 'execute' // 目标节点输入端口
  }
]

// 运行工作流
const runner = await runWorkflow({ nodes, edges }, {
  // 监听节点事件
  onNodeEvent(id, type, event) {
    if (type === 'success' && id === 'n2') {
      console.log('计算结果：', event.value.result) // 输出计算结果
    }
  },
  entryIds: ['n1'] // 从 n1 节点开始执行
})

这种方式让工作流不仅能"看"，还能真正"跑"起来，实现从设计到执行的闭环。

4. 依赖、变量与资源管理

mflows 内置了实用的辅助工具，方便管理工作流运行时的依赖、变量和资源：

import { useMFlow } from 'mflows'

const { dependencies, variables, resources } = useMFlow()

// 1. 管理外部依赖（如引入 lodash）
await dependencies.addDependency({
  name: 'lodash',
  version: '4.17.21',
  type: 'umd',
  url: 'https://cdn.jsdelivr.net/npm/lodash/lodash.min.js'
})
await dependencies.loadDependency('lodash@4.17.21')
const _ = dependencies.getLoadedDependency('lodash@4.17.21')

// 2. 管理全局变量
variables.addGlobalVariable({
  key: 'apiBaseUrl',
  type: 'string',
  value: 'https://api.example.com'
})

// 3. 管理资源文件
const configResource = resources.createJsonResource('config.json')

实际应用场景

mflows 适合哪些场景？举几个例子：

  • • 业务流程设计器：如审批流程、工单流程的可视化配置
  • • 自动化任务编排：通过节点组合实现定时任务、数据同步等自动化逻辑
  • • 低代码平台：作为低代码平台的流程引擎核心，提供可视化编程能力
  • • 数据处理管道：定义数据清洗、转换、输出的流程节点，可视化数据处理链路

常见问题与解决

  1. 1. 样式不生效？
    确保在入口处引入样式：import 'mflows/style.css'（npm 方式）或通过 CDN 引入 CSS（UMD 方式）。
  2. 2. 节点不显示？
    检查节点是否已注册（registerNode），且 category 配置正确（需在分类面板中显示）。
  3. 3. 依赖 Vue 版本？
    要求 Vue 3.3+，且需要 element-plus 作为 peerDependency（仅编辑器 UI 依赖）。

总结

mflows 作为一款轻量的 Vue 3 工作流引擎，平衡了易用性和扩展性。无论是快速搭建一个简单的流程编辑器，还是深度定制业务专属节点，它都能满足需求。其无头运行能力和完善的辅助工具，也让工作流从"可视化设计"延伸到"实际执行"，形成完整闭环。

如果你正在 Vue 3 项目中需要工作流能力，不妨试试 mflows，官网文档（持续完善中）和示例代码能帮助你快速上手。

  • • 项目地址：可通过 npm 搜索 mflows 获取
  • • 许可协议：MIT（开源免费，可商用）
avatar
文章
阅读
粉丝