可视化流编辑器和节点

相关源文件

• src/frontend/src/CustomNodes/GenericNode/index.tsx
• src/frontend/src/modals/codeAreaModal/index.tsx
• src/frontend/src/modals/exportModal/index.tsx
• src/frontend/src/modals/flowSettingsModal/index.tsx
• src/frontend/src/modals/shareModal/index.tsx
• src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
• src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
• src/frontend/src/pages/FlowPage/index.tsx
• src/frontend/src/stores/flowStore.ts
• src/frontend/src/types/api/index.ts
• src/frontend/src/types/components/index.ts
• src/frontend/src/types/flow/index.ts
• src/frontend/src/types/tabs/index.ts
• src/frontend/src/types/zustand/flow/index.ts
• src/frontend/src/utils/buildUtils.ts
• src/frontend/src/utils/reactflowUtils.ts
• src/frontend/src/utils/utils.ts

本文档介绍了Langflow中的可视化流程编辑器系统和节点架构。可视化流程编辑器提供了一个拖放式界面，用户可以通过连接代表各种AI组件（如LLM、工具和数据处理器）的节点来创建AI工作流。

有关组件系统架构和执行引擎的信息，请参阅组件架构和执行。有关流程管理和持久化的详细信息，请参阅流程管理。

系统架构概览

可视化流程编辑器基于React Flow构建，并包含几个关键的架构层。

来源：src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx73-81 src/frontend/src/CustomNodes/GenericNode/index.tsx68-76 src/frontend/src/stores/flowStore.ts60-61

节点组件架构

节点系统围绕着GenericNode组件构建，该组件负责单个节点的渲染、交互和状态管理。

来源：src/frontend/src/CustomNodes/GenericNode/index.tsx40-46 src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx45-59 src/frontend/src/types/flow/index.ts63-71

可视化画布系统

主画布在PageComponent中实现，提供了核心的可视化编辑体验。

画布配置

功能	实现	描述
节点类型	nodeTypes = { genericNode: GenericNode, noteNode: NoteNode }	可用节点类型的注册表
Edge Types (边类型)	edgeTypes = { default: DefaultEdge }	连接线类型
缩放控件	minZoom: 0.2, maxZoom: 8	画布缩放限制
Fit View (适应视图)	fitView={isEmptyFlow.current ? false : true}	非空流程的自动适应
选择	elevateEdgesOnSelect={true}	选择时高亮边

画布事件处理程序

来源：src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx374-431 src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx582-619

节点交互与工具栏

节点工具栏系统在节点被选中时提供上下文操作。

主要工具栏操作

按钮	条件	功能	快捷键
代码	hasCode && !isCustomComponent (有代码且非自定义组件)	打开代码编辑器模态框	shortcuts.code (快捷键)
控制	nodeLength > 0 (节点数量大于0)	打开高级参数	shortcuts.advanced (快捷键)
冻结	!hasToolMode (无工具模式)	冻结节点执行	shortcuts.freeze (快捷键)
工具模式	hasToolMode (有工具模式)	切换工具模式	shortcuts.toolMode (快捷键)

次要操作 (下拉菜单)

下拉菜单通过Select组件提供额外操作。

来源：src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx300-376 src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx427-533

节点状态管理

流程存储使用Zustand管理所有节点和边状态。

核心状态结构

状态属性	类型	目的
nodes (节点)	AllNodeType[]	流程中所有节点的数组
edges (边)	EdgeType[]	所有连接的数组
flowBuildStatus (流程构建状态)	Record<string, BuildStatus>	每个节点的构建状态
flowPool (流程池)	FlowPoolType	每个节点的执行结果
componentsToUpdate (待更新组件)	ComponentsToUpdateType[]	过时组件跟踪

状态更新方法

来源：src/frontend/src/stores/flowStore.ts272-289 src/frontend/src/stores/flowStore.ts301-345 src/frontend/src/utils/reactflowUtils.ts76-168

节点渲染管道

节点渲染过程涉及从数据到视觉表示的多个阶段。

组件更新检测

系统通过代码有效性检查来跟踪组件更新。

节点视觉状态

状态管理	视觉指示器	触发器
构建	动画边框、加载图标	buildStatus === BuildStatus.BUILDING (构建中)
已构建	绿色边框	buildStatus === BuildStatus.BUILT (已构建)
错误	红色边框	buildStatus === BuildStatus.ERROR (错误)
过时	黄色更新横幅	isOutdated && !isUserEdited (过时且未由用户编辑)
冻结	蓝色色调	data.node?.frozen === true (节点已冻结)

来源：src/frontend/src/CustomNodes/GenericNode/index.tsx117-131 src/frontend/src/CustomNodes/GenericNode/index.tsx156-210 src/frontend/src/CustomNodes/GenericNode/index.tsx335-338