FlowGram｜工作流开发框架

English | 中文 | Español | Русский | Português | Deutsch | 日本語

FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流开发框架与工具集。 我们的目标是帮助开发者更快、更简单地构建 AI 工作流平台。 FlowGram 自带一系列用于工作流开发的内置工具：流程画布、节点配置表单、变量作用域链，以及开箱即用的组件（LLM、条件判断、代码编辑器等）。它并不是一个现成的工作流平台，而是用来构建你自己的工作流平台的框架和工具集。

更多信息请访问 FlowGram.AI 🌐

🎬 演示

https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26

在 CodeSandbox 🌐 或 StackBlitz 🌐 中打开

在这个演示中，我们遍历一个城市列表，通过 HTTP 获取实时天气信息，使用代码节点解析温度数据，再借助 LLM 生成穿搭建议，经过条件判断筛选后，在循环中汇总结果，最后由 Advisor LLM 推荐最舒适的出行城市，并将最终结果传递给结束节点。

🚀 快速开始

1. 创建一个新的 FlowGram 项目：

npx @flowgram.ai/create-app@latest

我们推荐选择 Free Layout Demo ⭐️ 模板。

2. 启动项目：

cd demo-free-layout
npm install
npm start

3. 在浏览器中打开 http://localhost:3000。

✨ 功能

功能	描述	演示
自由布局画布	自由布局画布允许节点随意放置，并通过自由线条连接。
固定布局画布	固定布局画布支持将节点拖拽到指定位置，并且可以使用分支、循环等复合节点。
表单	表单引擎负责管理节点数据的增删改查操作，提供渲染、验证、副作用处理、联动及错误捕获等功能，简化节点配置的开发过程。
变量	变量引擎支持作用域约束、变量结构检查和类型推断，便于管理工作流中的数据流动。

📖 文档

您可以在 网站 上找到 FlowGram 的文档。

文档分为以下几个部分：

• 快速入门
• 画布
• 表单
• 变量
• 组件
• 运行时
• 进阶指南
• API 参考
• 获取支持
• 贡献指南

🙌 贡献者

🌍 应用案例

• Coze Studio 是一款一体化的 AI 代理开发工具。它提供了最新的大模型和工具、多种开发模式和框架，为从开发到部署的整个流程提供了最便捷的 AI 代理开发环境。
• NNDeploy 是一款基于工作流的多平台 AI 部署工具。
• Certimate 是一款开源的 SSL 证书管理工具，可通过可视化工作流自动申请和部署 SSL 证书。它是 Let's Encrypt 官方文档中列出的 ACME 客户端之一。

📬 联系我们

• 问题反馈：Issues
• Lark：使用 Register Feishu 扫描下方二维码，加入我们的 FlowGram 用户群。

FlowGram.ai 快速上手指南

FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流开发框架与工具包。它旨在帮助开发者更快、更简单地构建 AI 工作流平台。注意：FlowGram 本身不是现成的工作流平台，而是用于构建属于你自己的平台的框架和工具箱。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

• 操作系统：Windows, macOS, 或 Linux
• Node.js：建议安装 LTS 版本（推荐 v18 或更高）
• 包管理器：npm (随 Node.js 安装) 或 yarn/pnpm
• 浏览器：现代浏览器（Chrome, Edge, Firefox 等）用于预览效果

安装步骤

FlowGram 提供了命令行工具来快速初始化项目。

1. 创建新项目 在终端中运行以下命令创建一个新的 FlowGram 应用：

   npx @flowgram.ai/create-app@latest
   

   💡 提示：在交互过程中，推荐选择 Free Layout Demo ⭐️ 模板，以便快速体验自由布局画布功能。

2. 进入项目目录并安装依赖 根据上一步选择的模板名称（例如 demo-free-layout），进入目录并安装依赖：

   cd demo-free-layout
   npm install
   

   🚀 国内加速建议：如果你在中国大陆地区，遇到 npm 下载缓慢的问题，建议使用淘宝镜像源进行安装：

   npm install --registry=https://registry.npmmirror.com
   

基本使用

安装完成后，即可启动本地开发服务器进行体验和开发。

1. 启动项目 在项目根目录下运行：

   npm start
   

2. 访问应用 打开浏览器访问 http://localhost:3000。

3. 体验工作流编辑 你将看到一个可视化的工作流编辑器。在默认的 Demo 中，你可以尝试以下操作来理解核心概念：

   • 拖拽节点：从左侧材料库拖入 LLM、代码编辑器 (Code)、条件判断 (Condition) 等节点到画布。
   • 连接连线：将不同节点的输入输出端口连接起来，定义数据流向。
   • 配置参数：点击节点，在右侧表单中配置具体参数（如 API Key、Prompt 模板等）。
   • 运行调试：点击运行按钮，查看变量作用域链中的数据流转和最终结果。

   示例场景：Demo 展示了一个遍历城市列表 -> 获取实时天气 -> 代码解析温度 -> LLM 生成穿衣建议 -> 条件过滤 -> 聚合结果 -> 最终由顾问 LLM 推荐最舒适城市的完整流程。

更多详细文档、API 参考及高级用法，请访问 FlowGram 官方文档。