FlowGame 从零上手：开源 AI 工作流编排框架与 Vue 3 接入实战

lianyinghhh

578人浏览 · 2026-06-05 16:59:30

lianyinghhh · 2026-06-05 16:59:30 发布

导读：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.知识库

从 FlowGame 知识库（Qdrant 向量库）中检索与 keyword 相关的文档片段，供下游大模型或模板节点作为 RAG 上下文。需先在编辑器「业务工具 → 知识库配置」中创建知识库并导入文档。

配置项	说明
知识库	选择已创建的 Collection（侧栏知识库设置区下拉）
keyword（输入参数）	检索关键字；可引用上游 userMessage 等变量
limit（输入参数）	返回条数，默认 10，最大 100

输出字段	说明
documents	命中文档数组（含 title、content、score 等）
content	首条命中文档的正文（String）
title / answer / question	首条文档的标题或 Q&A 字段
documentId / knowledgeId	文档与知识库标识

启动 flowgame_python，并确保 Qdrant（6333）与 Embedding 可用。
在画布左侧「业务工具 → 知识库配置」创建知识库，上传 PDF / Markdown / Q&A。
拖入「知识库 Plus」，在知识库设置中选择 Collection。
将 keyword 设为「引用」，绑定上游用户问题；limit 可按需调整。
将本节点连到「模型调用」之前或并行；在 Prompt 中引用 knowledgeNodePlus.content 或 documents。

7. 记忆写入

将本轮对话或业务数据写入 Redis 列表，作为会话记忆供后续「记忆读取」节点使用。支持多组 contextKey + memoryValue；Redis 键为 flow_game:flow_context:{MD5(上下文引用值)}。

配置项	说明
contextKey（输入参数）	上下文引用，如 userId、sessionId 或 Api 开始字段；过长自动 MD5
memoryValue（输入参数）	要写入的内容，通常引用模型 output 或用户输入
列表最大条数	超过后 LTRIM 保留最新 N 条，0 表示不裁剪
过期时间（秒）	Redis 键 TTL，0 表示不过期
添加记忆组	画布/侧栏可增 contextKey2、memoryValue2 等多组写入

输出字段	说明
success	是否至少有一组写入成功
writtenCount	成功写入的组数
listLength	最后一组写入后列表长度
writes	每组写入详情（Array）
errorMessage	失败原因汇总

确保 Redis 已启动且 flowgame_python 可连接（REDIS_HOST / REDIS_PORT）。
拖入「记忆写入」，放在模型调用或业务处理之后。
contextKey 引用同一用户的稳定标识（如 userId）；memoryValue 引用本轮要记忆的文本。
按需设置列表最大条数与过期时间；多会话场景用「添加记忆组」分别写入。
下游「记忆读取」须使用相同的 contextKey 引用规则才能读到数据。

8. 记忆提取

从 Redis 读取由「记忆写入」保存的会话列表。画布左侧名称为「记忆提取」，与记忆写入共用 contextKey 规则。读取结果供 Prompt 拼接或业务逻辑使用。

配置项	说明
contextKey（输入参数）	与记忆写入相同的上下文引用（如 userId）
readLimit（输入参数）	从列表尾部读取的最大条数，0 表示全部
默认读取条数	节点表单默认值，可被输入参数 readLimit 覆盖

输出字段	说明
items	记忆条目数组（按时间顺序）
count	本次读取条数
redisKey	实际使用的 Redis 键
errorMessage	Redis 不可用或 contextKey 无效时的错误

拖入「记忆读取」（记忆提取），放在模型调用之前。
contextKey 与记忆写入保持一致，引用同一 userId / sessionId。
readLimit 控制带入 Prompt 的历史轮数（如 10 条最近对话）。
在模型调用的 userPrompt 中引用 items，或在动态代码中格式化为 messages。
若 items 为空，表示该用户尚无历史记忆，可按新会话处理。

9. 结束（出口）

作用	说明
汇总最终输出	通常前面还会有 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 验证是否成功

页面能正常加载画布
从左侧拖拽一个「API 接口开始」或「大模型」节点到画布
能够拖动、缩放画布（底部有缩放条）

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

@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 dev

Q4：试运行 / 保存失败？

A：按顺序排查：

flowgame_python 是否已启动
.env 中 FLOWGAME_PORT=8008
前端 Vite proxy 是否指向 8008
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，希望低成本接入

推荐学习路径：

体验在线 Demo → flowgamedome.mgdeep.com
本地 pnpm dev 跑通官方编辑器
通过 pnpm dev:playground 对照最小示例
在自己的 Vue 3 项目中嵌入 <FlowEditor />
启动 flowgame_python 完成保存与试运行

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

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

AtomGit 首发开源｜光轮智能发布全球首个十万小时级全模态人类行为开源数据集 EgoSuite-Open100K

AtomGit开源社区

构筑赋能金融行业应用 Agent｜20 强决战北京，一场金融 Agent 的硬核答卷

AtomGit开源社区

AtomCode 全新上线万亿代码模型 LongCat-2.0。限时 7 天免费体验！

AtomGit开源社区

所有评论(0)

查看更多评论

lianyinghhh

@lianyinghhh

已为社区贡献1条内容

FlowGame 从零上手：开源 AI 工作流编排框架与 Vue 3 接入实战

lianyinghhh

一、FlowGame 是什么？

使用示例

初始化页面：

创建流程：

流程概述：

节点解释：

1. Api 接口开始（入口）

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

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

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

5. 模型调用（AI 分析）

6.知识库

7. 记忆写入

8. 记忆提取

9. 结束（出口）

实际业务中使用：

二、整体架构

三、环境准备

四、5 分钟启动官方编辑器

4.1 克隆并安装依赖

4.2 一键启动

4.3 验证是否成功

4.4 可选：最小接入示例

4.5 开发说明

五、在 Vue 3 项目中接入 FlowGame

5.2 安装 FlowGame 依赖

5.3 配置 main.ts

5.4 配置 App.vue

5.5 配置 Vite 代理（联调后端）

5.6 启动验证

六、启动 Python 执行引擎（flowgame_python）

6.1 安装依赖

6.2 配置 .env

6.3 启动服务

七、内置节点一览

八、常见问题（FAQ）

Q1：找不到 @flowgame/core？

Q2：画布无样式或节点图标巨大？

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

Q4：试运行 / 保存失败？

Q5：端口 8009 被占用？

九、官网与文档

十、总结

所有评论(0)

温馨提示：您尚未绑定手机号

lianyinghhh

5.3 配置 `main.ts`

5.4 配置 `App.vue`

6.2 配置 `.env`

Q1：找不到 `@flowgame/core`？