FlowGame 从零上手：开源 AI 工作流编排框架与 Vue 3 接入实战
导读：FlowGame 是一款轻量级、可私有化部署的 AI 工作流编排框架。本文将从零开始，带你完成「克隆仓库 → 启动编辑器 → Vue 3 嵌入 → Python 后端联调」全流程，适合希望在自有业务系统中集成可视化 AI 工作流的开发者
FlowGame — AI 工作流编排FlowGame — 开源 AI 工作流可视化编排平台，提供 @flowgame/vue 组件与 Python 执行引擎，支持自部署。http://flowgame.mgdeep.com/
一、FlowGame 是什么？
FlowGame是基于 Tinyflow 理念打造的开源AI 工作流编排框架，具备以下核心特性：
| 特性 | 说明 |
|---|---|
| 可视化编排 | 拖拽节点、连线、侧栏配置，所见即所得 |
| 轻量可嵌入 | 提供@flowgame/vue、@flowgame/core，可轻松接入现有 Vue 3 项目 |
| 私有化部署 | 数据不上云，流程与知识库可完全保留在内网 |
| 契约驱动 | 通过type + parameters / outputDefs扩展节点，实现前后端解耦 |
| 一站式方案 | 前端编排 + Python 执行引擎，简单配置即可试运行 |
在线体验：FlowGame 工作流编排
开源仓库：
前端 Monorepo：GitHub - lianyinging/flowgame: 🎮 An AI workflow editing framework focused on business customization. 专注于业务自定义的 AI 工作流编排框架，支持 LLM 调用、知识库检索、记忆读写、API 编排等场景。⚡ Vue 3 一行接入 · GitHub
Python 执行器：GitHub - lianyinging/flowgame_python: ⚡ FlowGame execution engine focused on business workflows. 专注于业务落地的工作流执行引擎，支持同步/流式试运行、Redis 流程存储、Qdrant 向量检索等场景。🐍 FastAPI · 🔗 配套 FlowGame 前端 · GitHub
开源协议：Apache License 2.0
使用示例
初始化页面：
首次进入 FlowGame 编辑器时，你会看到一个全屏可视化编排工作台。界面基于 Tinyflow 画布，整体为浅色主题，布局分为：左侧节点面板、中央画布、顶部浮动工具栏、右下角缩略图，以及按需弹出的右侧节点配置侧栏和业务弹窗。
创建流程：
流程概述：
这是一个内部数据做运营分析的流程
节点解释：
1. Api 接口开始（入口）
| 作用 | 说明 |
|---|---|
定义对外接口 | 每个流程有唯一 |
接收入参 |
|
鉴权 |
|
这一步不做业务计算，只负责接住请求、初始化变量、启动链路。
2. Http 请求（拉聚合数据）
| 作用 | 说明 |
|---|---|
调外部 HTTP | 请求若依 Java 后台已封装好的统计接口 |
典型场景 | 桑基图数据、访问路径、转人工漏斗等（相当于把图表页用的 API 再调一遍） |
输出 | JSON 写入工作流上下文，供下游节点引用 |
可以理解为：先通过 HTTP 拿「已经算好的指标/结构数据」，减轻后面数据库和代码的压力。
3. 数据库（查明细 / 补数）
| 作用 | 说明 |
|---|---|
执行 SQL | 节点里配 MyBatis 风格动态 SQL（ |
典型表 | 如 |
入参绑定 |
|
输出 | 查询结果 JSON 数组（每行一个对象） |
和 Http 请求的关系：
- Http：调接口拿聚合结果（快、业务语义清晰）
- 数据库：直接查原始/明细数据（灵活、可自定义 SQL）
两份数据都会放进同一条工作流上下文，后面节点可以一起用。
4. 动态代码（加工数据）
| 作用 | 说明 |
|---|---|
执行脚本 | 支持 QLExpress / Groovy / JavaScript（画布上 |
典型工作 | 合并 Http + DB 结果、清洗字段、算转化率、拼图表配置、整理给模型的 prompt 素材 |
输出 | 写入 |
这是纯逻辑层：不访问外部网络，在内存里把前面节点的输出整形、聚合、拼装。
5. 模型调用（AI 分析）
| 作用 | 说明 |
|---|---|
调大模型 HTTP | OpenAI 兼容接口（如 DeepSeek |
输入 | 上游动态代码整理好的统计数据 + 提示词模板 |
输出 | 模型生成的分析结论、建议、解读文字 |
模型不负责查库，只吃已经准备好的结构化数据 + 文案要求，产出「分析报告里的文字部分」。
6. 结束（出口）
| 作用 | 说明 |
|---|---|
汇总最终输出 | 通常前面还会有 HTML 模板 节点，把数据 + 模型文字渲染成完整 HTML |
返回给前端 | 流式最后一帧 |
前端处理 | 写入 localStorage 缓存，iframe 展示，按钮变为「已生成报告」 |
「结束」节点本身往往只做封装返回值；真正的报告 HTML 多半在 HTML 模板 节点已经生成好。
实际业务中使用：
二、整体架构
FlowGame 采用双仓库分工，职责清晰：
| 仓库 | 技术栈 | 职责 |
|---|---|---|
flowgame | Node 18+ · pnpm · Vue 3 | 可视化编辑器、@flowgame/vue组件、节点 UI |
flowgame_python | Python 3.10+ · FastAPI · Redis · Qdrant | 工作流解析执行、流程存储、知识库 RAG |
默认联调端口：
官方编辑器：
8009（pnpm dev）最小示例：
8010（pnpm dev:playground）Python API：
8008
前端 Vite 会将
/api代理到8008，与configureFlowGameClient({ baseURL: '/api' })配合使用。
三、环境准备
开始前，请确认本机已安装以下工具：
| 工具 | 版本要求 |
|---|---|
| Node.js | 18+ |
| pnpm | 8+（推荐） |
| Git | 任意较新版本 |
| Python | 3.10+（需要后端联调时） |
| Redis | 可选（用于流程持久化） |
| Qdrant | 可选（用于知识库 RAG） |
四、5 分钟启动官方编辑器
4.1 克隆并安装依赖
git clone https://github.com/lianyinging/flowgame.git cd flowgame pnpm install4.2 一键启动
pnpm dev终端出现如下输出后，在浏览器中打开：
Local: http://127.0.0.1:8009/4.3 验证是否成功
页面能正常加载画布
从左侧拖拽一个「API 接口开始」或「大模型」节点到画布
能够拖动、缩放画布（底部有缩放条）
4.4 可选：最小接入示例
如需参考「如何嵌入业务项目」，可另开终端运行：
pnpm dev:playground # 浏览器打开 http://127.0.0.1:80104.5 开发说明
在flowgameMonorepo 内开发时，Vite 会直接引用packages/core与packages/vue源码，修改后自动热更新，无需手动执行pnpm build
常用命令：
| 命令 | 说明 |
|---|---|
pnpm dev | 启动官方编辑器（8009） |
pnpm dev:playground | 启动最小接入示例（8010） |
pnpm build:packages | 构建 core + vue |
pnpm typecheck | 全仓库 TypeScript 检查 |
五、在 Vue 3 项目中接入 FlowGame
pnpm create vite my-flow-app --template vue-ts cd my-flow-app pnpm install pnpm add vue @arco-design/web-vue @tinyflow-ai/ui5.2 安装 FlowGame 依赖
⚠️注意：必须同时安装
@flowgame/core与@flowgame/vue，只安装后者会报错找不到 core。
pnpm add @flowgame/vue @flowgame/core @tinyflow-ai/ui @arco-design/web-vue vue5.3 配置main.ts
必须引入三份样式，并注册 Arco、配置 API 客户端：
import { createApp } from 'vue' import ArcoVue from '@arco-design/web-vue' import '@arco-design/web-vue/dist/arco.css' import '@tinyflow-ai/ui/dist/index.css' import '@flowgame/vue/style.css' import { configureFlowGameClient } from '@flowgame/core' import App from './App.vue' configureFlowGameClient({ baseURL: '/api', onError: (msg) => alert(msg) }) createApp(App).use(ArcoVue).mount('#app')若遗漏
@tinyflow-ai/ui或@flowgame/vue/style.css的 CSS，画布将无样式，节点图标可能异常放大。
5.4 配置App.vue
<script setup lang="ts"> import { FlowEditor } from '@flowgame/vue' </script> <template> <FlowEditor class="flow-editor-host" /> </template> <style> html, body, #app { margin: 0; height: 100%; overflow: hidden; } .flow-editor-host { display: block; width: 100%; height: 100%; } </style>5.5 配置 Vite 代理（联调后端）
如需保存流程、试运行、知识库等功能，在vite.config.ts中代理/api到 Python 后端：
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: 'http://127.0.0.1:8008', changeOrigin: true } } } })5.6 启动验证
# 终端 1：启动 flowgame_python（见下一节） # 终端 2： pnpm dev六、启动 Python 执行引擎（flowgame_python）
仅拖拽编辑画布不需要后端；以下功能依赖后端：
| 功能 | 是否需要后端 |
|---|---|
| 仅拖拽编辑画布 | 否 |
| 保存 / 加载流程（Redis） | 是 + Redis |
| 试运行 / 大模型节点 | 是 +DEEPSEEK_API_KEY |
| 知识库 RAG | 是 + Qdrant + Embedding |
6.1 安装依赖
git clone https://github.com/lianyinging/flowgame_python.git cd flowgame_python python3 -m venv .venv source .venv/bin/activate # Windows: .venv\Scripts\activate pip install -r requirements.txt6.2 配置.env
复制示例文件并按需修改（端口、Redis、模型 Key 等），确保包含：
FLOWGAME_PORT=8008大模型节点需配置 OpenAI 兼容接口，例如 DeepSeek：
DEEPSEEK_API_KEY=你的密钥6.3 启动服务
uvicorn app.main:app --host 0.0.0.0 --port 8008 --reload常用 API 路径：
| 接口 | 说明 |
|---|---|
POST /api/v1/flowGame/execute | 同步执行工作流 |
POST /api/v1/flowGame/execute/stream | 流式试运行 |
/api/v1/flowGame/redis | 流程 CRUD |
/api/v1/flowGame/qdrant/* | 知识库相关 |
七、内置节点一览
FlowGame 画布中常见的节点类型包括：
API 接口开始：HTTP 入口，接收参数并触发整条工作流
大模型：调用 DeepSeek 等 OpenAI 兼容接口
知识库 RAG：向量检索增强上下文
条件分支：按表达式分流
记忆节点：多轮对话上下文读写
HTML 面板：模板渲染与实时预览
在编辑器中拖拽连线即可组合成完整的 Agent / 客服 / 自动化流程。
八、常见问题（FAQ）
Q1：找不到@flowgame/core？
A：必须同时安装@flowgame/core和@flowgame/vue，不能只装其中一个。
Q2：画布无样式或节点图标巨大？
A：检查main.ts是否按顺序引入了以下三份样式：
@arco-design/web-vue/dist/arco.css@tinyflow-ai/ui/dist/index.css@flowgame/vue/style.css
Q3：升级依赖后左侧没有新节点？
A：删除业务项目的node_modules/.vite后重启：
rm -rf node_modules/.vite pnpm devQ4：试运行 / 保存失败？
A：按顺序排查：
flowgame_python是否已启动.env中FLOWGAME_PORT=8008前端 Vite
proxy是否指向8008LLM 节点是否配置了
DEEPSEEK_API_KEY
Q5：端口 8009 被占用？
A：关闭占用进程，或修改apps/editor/vite.config.ts中的server.port。
九、官网与文档
FlowGame 产品官网（React + Vite 静态站）提供中英文文档与在线演示入口，仓库结构如下：
| 路径 | 内容 |
|---|---|
/ | 首页：产品介绍、特性、架构 |
/docs | 安装、Vue 接入、Python 后端、FAQ |
官网支持 Docker 一键部署：
git clone <flowgame_index 仓库地址> cd flowgame_index cp .env.example .env docker compose up -d --build # 默认访问 http://服务器IP:8080十、总结
FlowGame 适用于以下场景：
企业需要在自有系统中嵌入可视化 AI 工作流编辑器
要求私有化部署，流程与数据不出内网
希望前后端解耦，通过 JSON 契约扩展自定义节点
团队已使用Vue 3，希望低成本接入
推荐学习路径：
体验在线 Demo → flowgamedome.mgdeep.com
本地
pnpm dev跑通官方编辑器通过
pnpm dev:playground对照最小示例在自己的 Vue 3 项目中嵌入
<FlowEditor />启动
flowgame_python完成保存与试运行
如果本文对你有帮助，欢迎点赞、收藏、关注，有问题请在评论区交流。