流程编辑器使用

Flow Editor 界面

Flow Editor 提供了一个基于 ReactFlow 的拖放界面，用于使用 FlowCanvas 组件构建代理工作流。

ReactFlow 画布区域

在 FlowCanvas 中实现的用于构建工作流的主工作区

使用 useHandleDrop hook 拖放组件
使用 onConnect 处理程序连接节点，并通过 useValidateConnection 进行连接验证
节点选择由 onSelectionChange 管理
使用 onBeforeDelete 和 useBeforeDelete hook 处理删除操作

组件面板

组件从面板拖动并放到画布上。 useHandleDrag hook 通过 handleDragStart 回调管理拖动操作。

表单配置系统

点击节点时会打开 FormDrawer 组件，该组件使用

旧版 Ant Design 表单（FormDrawer）
新的 shadcn/ui 表单（FormSheet），集成了 react-hook-form 和 Zod 验证

画布控件

通过 ReactFlow 的 Controls 组件位于右下角

缩放控件（ReactFlow 内置）
通过 useHandleExportOrImportJsonFile hook 进行导入/导出
通过 useOpenDocument hook 访问文档

来源: web/src/pages/flow/canvas/index.tsx78-237 web/src/pages/flow/hooks.tsx178-261 web/src/pages/flow/flow-drawer/index.tsx106-218

创建你的第一个 Flow

RAGFlow 中的每个代理 Flow 都以一个“Begin”组件开始，通常以一个向用户显示结果的“Answer”组件结束。

步骤 1: 从 Begin 组件开始

创建新 Flow 时，画布会自动添加一个“Begin”组件。此组件作为工作流的入口点。

步骤 2: 添加组件

将组件从组件菜单拖到画布上。组件按功能分类。

步骤 3: 连接组件

通过从节点的输出句柄点击并拖动到另一个节点的输入句柄来连接组件。这建立了组件之间的执行流。

步骤 4: 配置组件

点击组件以打开配置抽屉，其中显示了组件的可配置属性。

来源: web/src/pages/flow/constant.tsx, web/src/pages/flow/canvas/index.tsx

可用组件

Flow Editor 提供了在 Operator 枚举中定义的组件，每个组件都有相应的节点类型、图标和初始配置。

核心组件映射

每个 Operator 都映射到特定的实现工件

运算符	节点类型	组件	初始值
`Begin`	`beginNode`	`BeginNode`	`initialBeginValues`
`检索`	`retrievalNode`	`RetrievalNode`	`initialRetrievalValues`
`Generate`	`generateNode`	`GenerateNode`	`initialGenerateValues`
`Categorize`	`categorizeNode`	`CategorizeNode`	`initialCategorizeValues`
`答案`	`logicNode`	`LogicNode`	`{}`
`消息`	`messageNode`	`MessageNode`	`initialMessageValues`

组件类别

核心工作流：Begin, Retrieval, Generate, Answer, Categorize, Message, Relevant

查询处理：RewriteQuestion, KeywordExtract, Switch, Concentrator

外部搜索：DuckDuckGo, Baidu, Wikipedia, PubMed, ArXiv, Google, Bing, GoogleScholar, GitHub

实用工具：DeepL, BaiduFanyi, QWeather, ExeSQL, Template, Email, Iteration, Code

组件属性

每个组件包括

通过 operatorMap 进行的视觉样式（背景颜色、尺寸、颜色）
通过 operatorIconMap 进行的图标表示
通过 initial*Values 常量进行**初始表单数据**
通过 RestrictedUpstreamMap 进行的**连接限制**

节点类型实现

画布节点通过特定的 React 组件渲染

RagNode - 大多数组件的默认
BeginNode - 工作流开始的特殊样式
CategorizeNode - 用于分类的多个输出句柄
GenerateNode - LLM 操作的增强显示

来源: web/src/pages/flow/constant.tsx72-110 web/src/pages/flow/constant.tsx741-779 web/src/pages/flow/canvas/index.tsx49-67 web/src/pages/flow/constant.tsx156-293 web/src/pages/flow/canvas/index.tsx49-67 web/src/pages/flow/constant.tsx156-293

组件配置系统

表单系统通过两种实现方法为节点属性配置提供支持：旧版 Ant Design 表单和新的 react-hook-form 与 shadcn/ui 组件。

表单组件映射

每个 Operator 类型通过 FormMap 或 useFormConfigMap 映射到特定的表单组件。

运算符	旧版表单	新版表单	Schema
`Begin`	`BeginForm`	`BeginForm`	Prologue, Mode, Query params
`检索`	`RetrievalForm`	`RetrievalForm`	Similarity threshold, top_n, KB selection
`Generate`	`GenerateForm`	`GenerateForm`	Prompt, LLM params, citations
`Categorize`	`CategorizeForm`	`CategorizeForm`	Categories, LLM settings

表单状态同步

表单更改通过多个 hook 同步到画布状态

useHandleFormValuesChange - 在 useGraphStore 中更新 updateNodeForm
useWatchFormChange - 使用 react-hook-form 监视表单状态
useHandleNodeNameChange - 管理节点名称更新

Schema 验证（新系统）

新表单系统在 useFormConfigMap 中使用 Zod schema

配置持久化

表单数据保存在由 useGraphStore state 管理的节点的 data.form 属性中。

来自 initial*Values 常量的初始值
通过 updateNodeForm 动作进行实时更新
通过 zodResolver 集成进行表单验证

来源: web/src/pages/flow/flow-drawer/index.tsx64-102 web/src/pages/agent/form-sheet/use-form-config-map.tsx42-375 web/src/pages/flow/hooks.tsx263-289 web/src/pages/flow/store.ts375-404

创建一个示例 Flow

让我们来构建一个检索信息并生成响应的基础 RAG 工作流。

1. 从 Begin 组件开始

创建新 Flow 时，Begin 组件会自动添加
如果需要，配置它以显示欢迎消息

2. 添加 Retrieval 组件

将 Retrieval 组件从组件菜单拖到画布上
将 Begin 组件连接到 Retrieval 组件
配置 Retrieval 组件
- 选择要搜索的知识库
- 设置相似度阈值（例如，0.2）
- 设置关键词相似度权重（例如，0.3）
- 设置 top_n 结果数量（例如，8）

3. 添加 Generate 组件

将 Generate 组件拖到画布上
将 Retrieval 组件连接到 Generate 组件
配置 Generate 组件
- 设置提示模板
- 配置模型参数
- 如果需要，启用引用

4. 添加 Answer 组件

将 Answer 组件拖到画布上
将 Generate 组件连接到 Answer 组件
Answer 组件只需要很少的配置，因为它主要用于显示结果

来源: web/src/pages/flow/constant.tsx, web/src/pages/flow/canvas/index.tsx

高级 Flow 模式

除了基本线性 Flow，您还可以创建更复杂的模式来处理不同的场景。

使用 Categorize 组件进行分支 Flow

CategorizeNode 组件使用多个源句柄，对应于 category_description 表单字段中定义的类别。 buildCategorizeListFromObject 函数将对象结构转换为表单兼容的数组，而 useBuildCategorizeHandlePositions 管理句柄定位。

边的路由通过匹配类别名称的 sourceHandle 属性进行，同时 updateFormDataOnConnect 在建立连接时同步类别描述中的 to 字段。

来源： web/src/pages/flow/utils.ts405-418 web/src/pages/flow/canvas/node/categorize-node.tsx13-68 web/src/pages/flow/store.ts188-214

RelevantNode 组件提供了带有 yes/no 源处理器的二元路由。这些处理器的表单状态在 form.yes 和 form.no 字段中进行管理，并通过 updateFormDataOnConnect 在创建边时自动更新。

RewriteQuestionForm 组件通过 LLM 处理来增强查询，并使用可配置的 language 和 message_history_window_size 参数来实现上下文感知的细化。

来源： web/src/pages/flow/canvas/node/relevant-node.tsx13-70 web/src/pages/flow/store.ts194-197 web/src/pages/flow/constant.tsx477-481

外部搜索增强

此模式通过维基百科等来源的外部信息来增强知识库结果。

来源： web/src/pages/flow/constant.tsx

流程管理操作

Flow Editor 通过专门的钩子和组件实现了流程的持久化和测试。

导出/导入操作

导出流程:

handleExportJson 通过 buildDslComponentsByGraph 触发 DSL 转换
将节点/边转换为 DSLComponents 格式
下载包含完整流程定义的 JSON 文件

导入流程:

handleImportJson 打开 JsonUploadModal
onFileUploadOk 处理上传的 JSON
buildNodesAndEdgesFromDSLComponents 重构画布状态

流程测试

测试执行:

RunDrawer 组件处理流程执行
通过 showChatModal 切换到 ChatDrawer 进行交互式测试
结果在实时聊天界面中显示

状态管理:

useShowDrawer 钩子协调抽屉可见性
runVisible/chatVisible 状态控制 UI 过渡
测试运行基于当前的画布配置

自动保存行为

流程状态通过以下方式自动持久化：

useWatchNodeFormDataChange - 监控表单更改
updateNodeForm 调用同步到后端存储
画布位置/连接更改会触发保存

来源： web/src/pages/flow/hooks/use-export-json.ts web/src/pages/flow/utils.ts129-157 web/src/pages/flow/utils.ts65-91 web/src/pages/flow/hooks/use-show-drawer.ts

最佳实践

设计技巧

从简单开始，逐步增加复杂性
保持流程模块化，并专注于特定任务
为组件使用描述性名称，使流程能够自我说明
考虑关键流程的错误处理路径

性能考量

将组件数量限制在必要范围内
注意检索组件中检索结果的数量
设置适当的阈值以平衡精度和召回率

调试技巧

使用分步调试功能处理复杂流程
在连接组件之前单独测试它们
如果流程未按预期工作，请检查组件配置

来源： web/src/pages/flow/utils.ts

结论

Flow Editor 是 RAGFlow 中用于创建自定义 RAG 管道的强大工具。通过组合不同的组件，您可以创建复杂的流程，以检索、处理和生成满足您特定需求的信息。在探索 Flow Editor 的可能性时，请将本指南作为参考。

有关每个组件及其配置选项的详细信息，请参阅组件参考。