LangFlow 1.x 系列【5】可视化编辑页面功能说明

1. 页面总览

流程是应用业务逻辑的可视化载体。流程由各类组件构成，每个组件对应应用流程里的独立执行步骤。借助Langflow的可视化编辑器，可以轻松的创建、测试和分享流程。

拖拽式的界面无需编写大量代码，就能搭建复杂人工智能工作流。可以串联各类资源，包括提示词、大语言模型（LLM）、数据源、智能代理、MCP服务端，以及其他工具与集成能力。

进入某个Flow后，编辑器页面整体布局如下：

┌────────────────────────────────────────────────────────────────────────┐ │ [🏠Logo] [组织▾] 📁项目 / 🟦Flow名称 ✏️ [💾] [🤖][📊][🔔][👤▾] │ ← 最上面：顶部工具栏 AppHeader ├──────┬──────────────────────────────────────────────┬─────────────────┤ │ 分段 │ │ │ │ 导航 │ 画布（Canvas / 工作区） │ 检查面板 │ ← 最右侧：Inspection Panel │ │ [Playground][Share] ▲悬浮 │ （选中节点时显示） │ 组件 │ 拖拽节点、连线、缩放、平移 │ │ │ 列表 │ │ │ ├──────┴──────────────────────────────────────────────┴─────────────────┤ │ [🔒][缩放▾] [帮助▾] [构建状态/Stop/Retry] │ ← 左下：画布控件 中下：构建状态 └────────────────────────────────────────────────────────────────────────┘

2. 顶部工具栏（FlowToolbar）

位置：页面最顶部，高48px的横向通栏（AppHeader，data-testid="app-header"），下边带分隔线。

结构：左、中、右三区。

┌──────────────────────────────────────────────────────────────────────┐ │ [🏠Logo] [组织▾] 📁项目 / 🟦图标 Flow名称 ✏️ [🤖][📊][🔔]│[👤▾] │ │ 左区 中区 右区 │ └──────────────────────────────────────────────────────────────────────┘

2.1 左区：返回首页 + 组织选择

2.2 中区：项目 / 流程

中区居中显示，仅在 Flow 编辑页显示（onFlowPage === true）。它是面包屑 +Flow元信息 + 保存按钮的组合。

📁项目名 / 🟦 Flow名称 ✏️

Flow 设置弹层：点击Flow名称或铅笔打开，可编辑Flow的名称、描述、图标、渐变色、是否锁定等元信息。

保存按钮Tooltip状态：

快捷键：changesSave（默认Ctrl/Cmd + S）触发保存。

2.3 右区：通知 + 账户菜单

右区从左到右依次为：

3. 工作区

搭建流程时，主要操作区域为工作区，可以在这里添加组件、配置参数、连线组装，打开调试面板、分享菜单与运行日志。

3.1 操作指引

一、画布平移

操作：鼠标点住画布空白区域不放，上下左右拖动。

作用：当流程组件太多超出屏幕视野时，拖动空白处就能移动整张画布，查看隐藏在屏幕外的组件。

二、移动单个组件

操作：鼠标直接点住任意组件本体，拖拽到画布任意位置。

作用：自由排布组件，整理流程图布局，让连线更整洁。

三、修改组件之间的数据传递关系

单纯拖动组件只会改变摆放位置，不会改变数据流向。想要让A组件输出数据给B组件，必须拖动组件上的端口小圆点或者中间的连接线，重新对接两个组件。

四、智能辅助线（对齐参考线）

入口：顶部菜单栏「帮助」，打开开关。

作用：拖拽组件时自动弹出浅色对齐辅助线，自动吸附对齐其他组件，手动排版更整齐。

五、组件不能编辑/拖拽

原因：当前流程被锁定。

解决：先解锁流程，才能修改、拖拽、配置组件参数。

六、画布缩放两种方式

1. 快捷方式：鼠标滚轮 / 触控板双指滑动，快速放大缩小；
2. 精准控制：画布角落缩放比例旁的控制按钮，包含4种固定操作：
   • 放大：放大画布，看清细节参数
   • 缩小：缩小画布，完整查看整张大图
   • 原始尺寸(100%)：恢复默认标准大小
   • 自适应画布：自动缩放，让所有组件完整显示在屏幕内

七、添加备注

点击「添加备注」按钮，在画布生成文字标签。

用途：给流程写说明、标注业务逻辑、记录调试注意事项，方便自己或他人看懂流程。

八、查看全部快捷键

点击顶部「帮助」→「快捷键」，弹出快捷键清单，包含复制、删除、全选、撤销等快捷操作，提升搭建效率。

3.2 画布右上角悬浮条（FlowToolbar）

位置：画布右上角悬浮（Panel position="top-right"），位于顶部工具栏下方。

结构：一条圆角悬浮条，从左到右为Playground 按钮和Share 下拉菜单。

┌─────────────────────────────────────┐ │ ▶ Playground Share ▾ │ └─────────────────────────────────────┘

3.2.1 调试面板（Playground）

Playground是Flow的交互式对话调试面板（右侧抽屉），用于在编辑器内直接测试当前Flow。

如果流程中包含智能代理组件，调试面板会展示其工具调用记录与输出内容，方便你查看代理调用工具的全过程，理清回答背后的推理逻辑。

调试面板界面：

3.2.2 分享功能

分享菜单提供多种方案，将流程对接外部应用：

• API访问：平台自动生成Python、JavaScript、curl代码片段，快速把流程集成至自有应用
• 导出：将流程以JSON文件下载至本地
• MCP服务端：把当前流程封装为工具，供兼容MCP协议的客户端调用
• 网页嵌入：将流程嵌入HTML、React、Angular项目
• 可分享调试面板：将调试面板页面分享给其他用户

注意事项：

• 该功能仅用于分享调试交互界面，不可用于生产环境正式运行流程。
• 桌面版Langflow不支持可分享调试面板功能。

3.3 左侧分段导航（Segmented Nav）

当ENABLE_NEW_SIDEBAR开启时，组件栏最左侧显示一条垂直的图标导航条，共7个分段：

3.4 左侧组件栏（FlowSidebar）

位置：画布左侧，可折叠（collapsible="offcanvas"）。

作用：浏览、搜索、拖拽Langflow内置200+组件到画布。

┌──────────────────────────┐ │ 🔍 搜索组件... │ ← 头部：搜索框 + 配置（Beta/Legacy 过滤） ├──────────────────────────┤ │ ▾ 组件分类 │ │ ├─ 模型与 Agent │ │ ├─ 提示词 │ ← 内容区：分类折叠列表 │ ├─ 数据处理 │ │ ├─ 流程控制 │ │ └─ ... │ │ ▾ Bundles（组件包） │ ├──────────────────────────┤ │ ＋ New Custom Component │ ← 底部：新建自定义组件 └──────────────────────────┘

点击后弹开折叠：

支持查询配置：

拖拽添加组件：按住组件卡片拖动到画布，松开即在该位置创建节点。

3.5 画布（Canvas）

基于@xyflow/react（React Flow）实现，是核心工作区。

辅助线（Smart Guides）： 开启后拖动节点时自动对齐到其他节点的边缘/中心线，并吸附。

便签节点（Note Node）： 通过分段导航的add_note添加，支持自定义宽高和颜色，用于在画布上做注释。

版本预览（VersionPreviewOverlay）：进入版本预览模式时，画布变为只读：禁止连线、拖动、编辑，覆盖一层预览遮罩。

Flow 锁定：当currentFlow.locked === true时，画布进入锁定态：节点不可拖拽、不可连线、不可选中，左下角显示 🔒 锁定标识。

3.6 左下角画布控件（CanvasControls）

位置：画布左下角（Panel position="bottom-left"），一条横向悬浮条。

┌──────────────────────────────────────────────────┐ │ 🔒 [缩放百分比▾] │ [帮助▾] │ └──────────────────────────────────────────────────┘

(1) 锁定状态指示

(2) 画布缩放下拉

(3) 帮助下拉

4. 键盘快捷键速查

4.1 编辑操作

4.2 画布缩放

4.3 面板与搜索

5. 区域功能速查表