OpenVibeBETA

FlowiseAI/Flowise

Flowise

从可视化画布理解 Agent 节点、运行时与集成平台

在 GitHub 查看 从 30 分钟挑战开始
难度
较难
适合
进阶
主要语言
TypeScript
GitHub
★ 55.3k
许可证
Apache-2.0
快照日期
2026年8月9日

先判断要不要学

这个项目值得拆什么？

Flowise 是用可视化节点搭建 AI Agent 和工作流的 TypeScript monorepo。它将 React 画布、Node/Express 服务端、第三方节点集成和 AgentFlow 能力分包，并提供 Docker 与多云自托管方案。适合进阶学习者理解“图形编辑器的 JSON 定义”如何变成服务端执行。

  1. 01

    明确拆分 server、ui、components 与 API docs，便于按边界阅读。

  2. 02

    节点库大，可学习通用配置 schema 与扩展机制。

  3. 03

    从可视化建模到 API 调用和自托管的产品链路完整。

可以学什么

不只是看代码，而是找到产品的骨架

  • 学 Agent 工作流
  • 学 AI 接入
  • 学产品结构
  • 学完整项目组织
  • 学部署
01

画布模型到执行图

跟踪节点和连线如何序列化，再在服务端被验证与执行。

packages/ui/src/views/canvas · packages/server/src/utils/buildChatflow.ts
02

节点扩展契约

选一个简单工具节点，观察元数据、输入输出和运行时实现。

packages/components/nodes · packages/components/src
03

开放集成的安全面

从凭证、外部 URL、文件和 MCP 配置识别 SSRF 与秘密暴露风险。

packages/server/src · packages/components/src · SECURITY.md

三段学习路径

从理解、修改到做出你的版本

0130 分钟先跑通

建立四包地图

  1. 读 README Developers
  2. 对照 ui/server/components/api-documentation
  3. 选一个最小节点追踪

完成标志：一张从节点定义到执行的图。

022 小时动手改

读懂一个最小自定义节点

  1. 复制一个无外部依赖节点作为阅读样本
  2. 标注它的输入输出 schema
  3. 找到 UI 面板渲染位置
  4. 编写一个边界用例

完成标志：一份节点契约与测试说明。

031 天做变体

做出三节点只读 Agent 流

  1. 限定 input/tool/output 三节点
  2. 加入输入 schema 和域名允许列表
  3. 记录每节点耗时与失败
  4. 测试循环、超时、凭证缺失与内网 URL

完成标志：一个有执行上限和安全防线的小型可视化工作流。

评分解释

每一分都要说清楚为什么

可复刻性15 / 25
15 / 25

可快速安装，源码复刻成本高。

文档与代码清晰度16 / 20
16 / 20

分包明确，但面积很大。

新手学习价值12 / 20
12 / 20

更适合进阶者。

产品完整度15 / 15
15 / 15

编辑、执行、API 和部署完整。

vibe coding 代表性9 / 10
9 / 10

Agent 流程构建高度相关。

活跃度5 / 5
5 / 5

活跃发布与安全更新。

新颖性4 / 5
4 / 5

可视化 AgentFlow 具有辨识度。