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

文章目录

[1. 页面总览](#1. 页面总览)
[2. 顶部工具栏（FlowToolbar）](#2. 顶部工具栏（FlowToolbar）)
- [2.1 左区：返回首页 + 组织选择](#2.1 左区：返回首页 + 组织选择)
- [2.2 中区：项目 / 流程](#2.2 中区：项目 / 流程)
- [2.3 右区：通知 + 账户菜单](#2.3 右区：通知 + 账户菜单)
[3. 工作区](#3. 工作区)
- [3.1 操作指引](#3.1 操作指引)
- [3.2 画布右上角悬浮条（FlowToolbar）](#3.2 画布右上角悬浮条（FlowToolbar）)
- - [3.2.1 调试面板（Playground）](#3.2.1 调试面板（Playground）)
  - [3.2.2 分享功能](#3.2.2 分享功能)
- [3.3 左侧分段导航（Segmented Nav）](#3.3 左侧分段导航（Segmented Nav）)
- [3.4 左侧组件栏（FlowSidebar）](#3.4 左侧组件栏（FlowSidebar）)
- [3.5 画布（Canvas）](#3.5 画布（Canvas）)
- [3.6 左下角画布控件（CanvasControls）](#3.6 左下角画布控件（CanvasControls）)
[4. 键盘快捷键速查](#4. 键盘快捷键速查)
- [4.1 编辑操作](#4.1 编辑操作)
- [4.2 画布缩放](#4.2 画布缩放)
- [4.3 面板与搜索](#4.3 面板与搜索)
[5. 区域功能速查表](#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 左区：返回首页 + 组织选择

元素	功能
Langflow Logo 🏠	点击返回首页（`navigate("/")`）。这是从编辑器回到项目/Flow 列表页的入口
组织选择器（默认未显示）	切换当前所属组织（多租户/团队场景下使用）

2.2 中区：项目 / 流程

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

复制代码

📁项目名  /  🟦 Flow名称 ✏️

元素	功能
项目/文件夹名	显示当前 Flow 所在文件夹名，点击跳转到该文件夹 `/all/folder/:folderId`（无文件夹则回 `/all`）
分隔符 `/`	面包屑分隔
Flow 图标	显示 Flow 自定义图标（无则用 `Workflow`），背景为渐变色块（根据 Flow 名称哈希取色）
Flow 名称	显示当前 Flow 名称（无名称显示「Untitled Flow」）；点击打开 Flow 设置弹层（Popover）
✏️ 铅笔	hover 时出现，提示可编辑；点击同样打开 Flow 设置弹层

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

保存按钮 Tooltip 状态：

状态	Tooltip
有未保存改动	「Save Changes」（保存中显示「Saving...」）
已保存	「Saved · {最后保存时间}」

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

2.3 右区：通知 + 账户菜单

右区从左到右依次为：

元素	说明
助手按钮（AssistantButton）	AI 助手入口，仅在 `LANGFLOW_AGENTIC_EXPERIENCE` 特性开启时显示
用量计数（CustomLangflowCounts）	显示当前账户的用量统计，仅在宽屏（`lg`）显示
通知铃铛 🔔	打开通知/错误下拉面板；有未读时右上角显示红点
分隔线	竖向分隔
账户菜单 👤	用户头像，点击展开完整账户菜单

3. 工作区

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

3.1 操作指引

一、画布平移

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

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

二、移动单个组件

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

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

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

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

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

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

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

五、组件不能编辑/拖拽

原因：当前流程被锁定。

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

六、画布缩放两种方式

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

七、添加备注

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

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

八、查看全部快捷键

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

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

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

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

复制代码

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

3.2.1 调试面板（Playground）

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

状态	条件	行为
可用	Flow 中存在 Chat Input 或 Chat Output 组件	点击打开 Playground 侧边抽屉
禁用	Flow 中没有 Chat Input / Chat Output	按钮置灰，Tooltip 提示「Add a Chat Input or Chat Output to use the playground」

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

调试面板界面：

3.2.2 分享功能

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

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

注意事项：

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

3.3 左侧分段导航（Segmented Nav）

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

图标	分段 ID	功能
🔍 search	search	聚焦搜索框，跨所有组件/MCP 检索
🧩 component	components	浏览核心组件分类列表
🔌 Mcp	mcp	浏览已配置的 MCP Server
🧱 blocks	bundles	浏览组件包（Bundles）
📝 sticky-note	add_note	进入「添加便签」模式，下次点击画布即放置一个便签节点
🕘 History	versions	打开 Flow 版本历史侧栏（查看/恢复/删除快照）
📊 Activity	traces	打开 Traces（链路追踪）视图（自动收起侧栏以全屏查看）

3.4 左侧组件栏（FlowSidebar）

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

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

复制代码

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

点击后弹开折叠：

支持查询配置：

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

3.5 画布（Canvas）

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

操作	行为
拖拽组件入画布	从左侧组件栏拖入，在松开位置创建节点
拖拽 `.json` 文件入画布	自动导入为 Flow（调用 `uploadFlow`）
节点间连线	从输出句柄拖到兼容的输入句柄，校验 `isValidConnection`
拖动节点	实时显示智能辅助线（Helper Lines，可开关），松开自动保存
选中节点	单击选中；右键选中并打开节点工具栏下拉
框选	画布空白处拖动框选多个节点
缩放	滚轮 / 双指缩放，范围 0.25 ~ 2
平移	拖动空白处平移画布

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

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

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

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

3.6 左下角画布控件（CanvasControls）

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

复制代码

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

(1) 锁定状态指示

状态	显示
未锁定	🔓 Unlock 图标（灰色）
已锁定	🔒 Lock 图标（红色）+「Flow Locked」文字

(2) 画布缩放下拉

菜单项	快捷键	功能
Zoom In	`Ctrl/Cmd + =`	放大画布（到上限禁用）
Zoom Out	`Ctrl/Cmd + -`	缩小画布（到下限禁用）
Zoom To 100%	`Ctrl/Cmd + 0`	重置为 100% 缩放
Zoom To Fit	`Ctrl/Cmd + 1`	自动适应屏幕显示所有节点（Fit View 时为右侧检查面板预留 340px）

(3) 帮助下拉

菜单项	图标	功能
Docs	book-open	打开官方文档（外部链接）
Shortcuts	keyboard	跳转 `/settings/shortcuts` 查看与修改快捷键
Report a bug	bug	打开 Bug 上报页面
Get Langflow Desktop	download	打开桌面版下载页
Enable smart guides	UnfoldHorizontal	开关智能辅助线（带 Toggle）
Show Inspector Panel	PanelRightClose	开关最右侧检查面板（带 Toggle，需 `ENABLE_INSPECTION_PANEL`）

4. 键盘快捷键速查

4.1 编辑操作

动作	默认快捷键	说明
Save Changes	`Ctrl/Cmd + S`	保存 Flow（`changesSave`）
Undo	`Ctrl/Cmd + Z`	撤销
Redo	`Ctrl/Cmd + Shift + Z` / `Ctrl + Y`	重做
Copy	`Ctrl/Cmd + C`	复制选中节点
Cut	`Ctrl/Cmd + X`	剪切选中节点
Paste	`Ctrl/Cmd + V`	粘贴到当前鼠标位置
Duplicate	`Ctrl/Cmd + D`	复制选中节点到原位偏移
Delete	`Delete` / `Backspace`	删除选中节点和连边
Group	`G`（多选菜单可见时）	将选中节点分组
Download	`Ctrl/Cmd + S`（flow）	导出 Flow
Escape	`Esc`	取消选中 / 关闭右键菜单

4.2 画布缩放

动作	快捷键
Zoom In	`Ctrl/Cmd + =`
Zoom Out	`Ctrl/Cmd + -`
Zoom To 100%	`Ctrl/Cmd + 0`
Zoom To Fit	`Ctrl/Cmd + 1`

4.3 面板与搜索

动作	说明
`searchComponentsSidebar`	聚焦左侧组件搜索框并展开侧栏
`advancedSettings`	切换检查面板的「字段编辑模式」
`openPlayground`	切换 Playground 抽屉
`api`	切换 API access 弹窗

5. 区域功能速查表

区域	位置	核心组件	主要职责
顶部工具栏	最上面通栏	`AppHeader`	返回首页、项目/流程名、保存、通知、账户菜单（GitHub 等）
检查面板	右侧	`InspectionPanel`	选中节点的属性编辑
画布悬浮条	画布右上	`FlowToolbar`	Playground 调试 + Share 部署/分享
分段导航	左侧极左	`SidebarSegmentedNav`	切换 7 个功能分段
组件栏	左侧	`FlowSidebarComponent`	搜索/浏览/拖拽组件
画布	中央	`ReactFlow` (Page)	节点编排、连线、缩放、拖拽
画布控件	左下	`CanvasControls`	锁定指示、缩放、帮助菜单
节点工具栏	节点上方	`NodeToolbarComponent`	单节点的代码/参数/冻结/删除等
多选菜单	选区上方	`SelectionMenu`	多节点分组
构建状态	底部居中	`FlowBuildingComponent`	构建/运行/失败状态与控制