LuckyFlow：用Vue3实现的一款AI可视化工作流编辑器
上期和大家分享我精心打磨的CRM系统——NO-CRM：
耗时一周，我把可视化+零代码+AI融入到了CRM系统，使用体验超酷！https://blog.ZEEKLOG.net/KlausLily/article/details/155347026
收到了很多粉丝的反馈，最近有粉丝反馈能不能出一个Vue版工作流设计的实战项目：
我调研了一下市面上的工作流开源或者商业方案，发现大部分都是 React 写的，所以我觉得确实可以出一期实战内容，设计一款基于 Vue3 版本的工作流引擎，让大家更好的开发AI工作流项目。
下面就是我实现的 Vue3 工作流的演示效果：
LuckyFlow 是一款基于 Vue 3 + TDesign 开发的可视化 AI 工作流设计器，支持拖拽式节点编排、多种 AI 模型集成、变量管理等功能。项目采用组件化架构设计，可打包为 SDK 集成到不同框架的系统中使用。
当前项目的实现我借鉴了我之前设计的React版工作流引擎 Flwomix/Flow。所以实现起来还算顺利，大概花了2天时间，就实现了Vue3版的工作流设计器。
✨ 核心功能
1. 可视化画布
- 基于 VueFlow 的流程图编辑器
- 支持节点拖拽、缩放、平移
- 自动连线与连线删除
- 网格背景与缩放控件
2. 丰富的节点类型
- 开始/结束节点流程控制
- 大模型节点调用 LLM 生成内容，支持温度、Token 等参数配置
- 知识库节点向量检索，支持相似度阈值配置
- 提示词模板可复用的提示词管理
- HTTP 请求节点调用外部 API
- 代码执行节点JavaScript/Python/TypeScript 代码运行
- 数据转换节点JSON 数据映射转换
- 延迟节点流程延迟控制
- 条件分支节点条件判断与分支
- 循环节点数组遍历与并发控制
3. 全局变量管理
- 输入变量、过程变量、输出变量分类
- 支持 string/number/boolean/array/object 类型
- 变量引用插入（
{{varName}}语法）
整体架构设计
┌─────────────────────────────────────────────────────────────┐ │ 应用集成层 │ │ (React App / Vue App / Vanilla JS / Other Frameworks) │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ LuckyFlow SDK API │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ 完整应用模式 │ │ 组件模式 │ │ 引擎模式 │ │ │ │ LuckyFlowApp │ │ Components │ │ Core Engine │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ UI 组件层 │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ NodePalette │ │WorkflowCanvas│ │ConfigPanel │ │ │ ├──────────────┤ ├──────────────┤ ├──────────────┤ │ │ │WorkflowNode │ │VariablePanel │ │ 其他组件 │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 核心层 (Core) │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ 类型定义 │ │ 工作流引擎 │ │ 模型适配器 │ │ │ │ types.ts │ │ engine.ts │ │ adapters/ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ └─────────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────────┐ │ 第三方依赖层 │ │ VueFlow │ TDesign │ Vue 3 │ 其他依赖 │ └─────────────────────────────────────────────────────────────┘ 设计原则
- 分层解耦Core 层不依赖 UI 层，可独立使用
- 类型安全完整的 TypeScript 类型定义
- 可扩展插件化节点、模型提供商架构
- 框架无关Core 层可用于任何框架
- 渐进增强支持三种集成模式，满足不同场景
所以对应的目录结构我也是按照架构设计来组织的，大家可以参考一下：
luckyflow/整个设计器实现了从节点定义，到节点拖拽，到节点的属性配置的全流程，大家可以基于这套方案开发公司内部的AI工作流产品。
下面是节点选中编辑的效果：
不同的节点能配置不同的属性。
🛠️ 技术栈
技术 | 版本 | 用途 |
|---|---|---|
Vue | 3.x | 前端框架 |
TypeScript | 5.x | 类型系统 |
TDesign Vue Next | 1.x | UI 组件库 |
VueFlow | 1.x | 流程图编辑器 |
Vite | 5.x | 构建工具 |
大家可以基于我列出的技术栈，自行实现.
设计它的初衷主要是目前市面上的工作流方案比较臃肿，可定制的空间比较少，二开成本较低，我设计的这套方案比较轻量，适合从零搭建AI工作流的团队，可以基于自身业务快速扩展和迭代，并且能轻松集成到内部系统。
当然本项目主要用于大家研究学习和参考，如果要做到商业化级别，大家还需要进行二次开发和产品化。
