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 接口开始（入口）

作用	说明
定义对外接口	每个流程有唯一 methodKey，与流程名称一致（如 运营助手-桑基图分析）
接收入参	requestTimeStart、requestTimeEnd 等从 HTTP Body 注入为工作流变量
鉴权	Authorization / FxAuthorization 走 HTTP 头，不进工作流变量

这一步不做业务计算，只负责接住请求、初始化变量、启动链路。

2. Http 请求（拉聚合数据）

作用	说明
调外部 HTTP	请求若依 Java 后台已封装好的统计接口
典型场景	桑基图数据、访问路径、转人工漏斗等（相当于把图表页用的 API 再调一遍）
输出	JSON 写入工作流上下文，供下游节点引用

可以理解为：先通过 HTTP 拿「已经算好的指标/结构数据」，减轻后面数据库和代码的压力。

3. 数据库（查明细 / 补数）

作用	说明
执行 SQL	节点里配 MyBatis 风格动态 SQL（#{}、<if>、<where> 等）
典型表	如 wx_applet_mc_event_log_page（页面埋点）、wx_applet_mc_event_log_action（行为/转人工）等
入参绑定	#{requestTimeStart}、#{requestTimeEnd} 来自上游变量
输出	查询结果 JSON 数组（每行一个对象）

和 Http 请求的关系：

• Http：调接口拿聚合结果（快、业务语义清晰）
• 数据库：直接查原始/明细数据（灵活、可自定义 SQL）

两份数据都会放进同一条工作流上下文，后面节点可以一起用。

4. 动态代码（加工数据）

作用	说明
执行脚本	支持 QLExpress / Groovy / JavaScript（画布上 codeNode）
典型工作	合并 Http + DB 结果、清洗字段、算转化率、拼图表配置、整理给模型的 prompt 素材
输出	写入 _result（如 _result['sankeyData'] = ...）

这是纯逻辑层：不访问外部网络，在内存里把前面节点的输出整形、聚合、拼装。

5. 模型调用（AI 分析）

作用	说明
调大模型 HTTP	OpenAI 兼容接口（如 DeepSeek chat/completions）
输入	上游动态代码整理好的统计数据 + 提示词模板
输出	模型生成的分析结论、建议、解读文字

模型不负责查库，只吃已经准备好的结构化数据 + 文案要求，产出「分析报告里的文字部分」。

---

6. 结束（出口）

作用	说明
汇总最终输出	通常前面还会有 HTML 模板 节点，把数据 + 模型文字渲染成完整 HTML
返回给前端	流式最后一帧 workflow_finished，lastNodeOutput.output = 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 install

4.2 一键启动

pnpm dev

终端出现如下输出后，在浏览器中打开：

Local: http://127.0.0.1:8009/

4.3 验证是否成功

1. 页面能正常加载画布

2. 从左侧拖拽一个「API 接口开始」或「大模型」节点到画布

3. 能够拖动、缩放画布（底部有缩放条）

4.4 可选：最小接入示例

如需参考「如何嵌入业务项目」，可另开终端运行：

pnpm dev:playground
# 浏览器打开 http://127.0.0.1:8010

4.5 开发说明

在 flowgame Monorepo 内开发时，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/ui

5.2 安装 FlowGame 依赖

⚠️ 注意 ：必须同时安装 @flowgame/core 与 @flowgame/vue，只安装后者会报错找不到 core。

pnpm add @flowgame/vue @flowgame/core @tinyflow-ai/ui @arco-design/web-vue vue

5.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.txt

6.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 是否按顺序引入了以下三份样式：

1. @arco-design/web-vue/dist/arco.css

2. @tinyflow-ai/ui/dist/index.css

3. @flowgame/vue/style.css

Q3：升级依赖后左侧没有新节点？

A ：删除业务项目的 node_modules/.vite 后重启：

rm -rf node_modules/.vite
pnpm dev

Q4：试运行 / 保存失败？

A：按顺序排查：

1. flowgame_python 是否已启动

2. .env 中 FLOWGAME_PORT=8008

3. 前端 Vite proxy 是否指向 8008

4. LLM 节点是否配置了 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，希望低成本接入

推荐学习路径：

1. 体验在线 Demo → flowgamedome.mgdeep.com

2. 本地 pnpm dev 跑通官方编辑器

3. 通过 pnpm dev:playground 对照最小示例

4. 在自己的 Vue 3 项目中嵌入 <FlowEditor />

5. 启动 flowgame_python 完成保存与试运行

如果本文对你有帮助，欢迎 点赞、收藏、关注，有问题请在评论区交流。