n8n 作为一个强大的可视化工作流自动化平台，其核心在于其直观的 Editor UI (编辑器界面)。对于初学者而言，理解这个界面的每一个组件是快速上手自动化的第一步。本文将详细分解 n8n 编辑器界面的所有关键功能区，助您全面掌握这个强大的n8n可视化工具。

概览：Editor UI 的核心组成

当您创建一个新的工作流时，您会进入 n8n 编辑器界面。这个界面由四个主要的功能区域构成，每个区域都承载着不同的构建任务：

• 顶部栏 (Top Bar): 负责管理当前工作流的“元”信息，例如保存、激活和版本历史。
• 左侧导航面板 (Left-side Panel): 实例级的“控制中心”，用于管理您所有工作流、凭证 (Credentials) 和全局变量 (Variables)。
• 中心画布 (Canvas): 这是核心的n8n可视化构建区域，您将在这里通过拖拽和连接节点来搭建自动化逻辑 [1]。
• 节点面板 (Nodes Panel): 位于界面右侧，这是您的“工具箱”，包含了所有可用的节点（触发器、操作等）[1]。
• 执行数据视图 (Execution Data View): 在您测试工作流后，点击每个节点弹出的结果面板，用于查看和调试数据流 [3, 4]。

1. 顶部栏 (Top Bar)：工作流的“元”控制

顶部栏 专注于当前工作流的整体管理和部署。

• 工作流名称 (Workflow Name): 默认为 "My workflow"，点击即可修改。
• + Add Tag (添加标签): 为工作流添加标签，便于在主仪表板中分类和搜索。
• Inactive / Active (非激活 / 激活) 切换: 这是 n8n 界面中最重要的按钮之一。
  • Inactive (非激活): 此为“开发/测试”模式。工作流不会自动运行。您只能通过点击画布上的 Execute Workflow 按钮来手动测试。
  • Active (激活): 此为“生产/部署”模式。一旦激活，触发器节点（如 Schedule Trigger 或 Webhook）将变为“在线”状态，等待真实世界的事件来自动执行 。
• Share (共享): 在特定的付费计划中，允许您与其他团队成员共享和协作编辑此工作流 [1]。
• Save (保存): 手动保存工作流的当前状态。强烈建议配合使用快捷键 Ctrl+S (Windows) 或 Cmd+S (macOS)。
• History (历史记录): 一旦工作流被保存，此按钮激活。您可以查看和恢复工作流的先前版本。
• "..." (选项菜单): 包含指向“工作流设置”(Workflow Settings) 的关键入口。在这里您可以配置工作流级别的行为，例如设置 Error Workflow（当此工作流失败时自动调用另一个工作流）或指定 Timezone（时区）。

2. 左侧导航面板：实例级资源管理

这个面板管理的是跨所有工作流的共享资源，是 n8n 实例的“控制中心”。

• Workflows (工作流): 查看和管理您账户中所有的工作流。
• Executions (执行日志): 查看您所有工作流的历史执行记录。这是“事后调试”(post-mortem debugging) 的关键位置 [1, 5]。
• Credentials (凭证): n8n 的一大安全特性。您在此处集中、安全地存储所有第三方服务的 API 密钥和认证信息。工作流中的节点只能引用在此处创建的凭证，而不能直接输入密钥，这保证了工作流共享的安全性 [1]。
• Variables (变量): 用于存储在多个工作流中复用的静态、只读数据（例如一个固定的公司账户 ID 或 API 端点）。支持全局 (Global) 或项目 (Project) 范围。
• Templates (模板): 浏览和导入由 n8n 官方和社区创建的预构建工作流。

3. 节点面板 (Nodes Panel)：你的“工具箱”

与左侧面板不同，位于右侧的节点面板是您构建工作流时的“工具箱”[1]。

如何打开:

1. 点击画布右上角的全局 + 按钮 [1]。
2. 点击任何现有节点右侧的 + 按钮（将自动连接）。
3. 在画布任意空白处按下 Tab 键（最高效的方式）。

面板结构:

• Search (搜索框): 查找节点的首选方式。
• Trigger Nodes (触发器): 启动工作流的节点。每个工作流都必须以一个触发器开始。例如 Schedule Trigger (定时启动) 或 Webhook (通过 URL 启动) [1, 11, 12]。
• App / Action Nodes (应用/操作): 用于与第三方服务（如 Google Sheets, Slack）交互的节点 [1, 11]。
• Core Nodes (核心节点): n8n 的内置逻辑和数据处理节点，例如 If (条件判断), Set (设置或修改数据), Merge (合并数据分支) 和 Code (运行自定义代码) 。

4. 中心画布 (Canvas)：可视化构建区域

画布是您发挥创造力的主要场所 [1]。

• Execute Workflow (执行工作流) 按钮: 位于画布的右上角。这是您在“开发/测试”时（即工作流为 Inactive 状态时）的“播放”按钮，用于手动运行一次工作流以查看结果 [1, 3]。
• 导航:
  • 平移 (Pan): 按住 Space (空格键) + 鼠标左键拖动，或按住鼠标中键拖动 [1, 6]。
  • 缩放 (Zoom): 使用鼠标滚轮（配合 Ctrl/Cmd 键）或右下角的 + / - 按钮 [1, 6]。
• 连接节点: 从一个节点的右侧输出锚点（灰色圆点）拖拽一条线到下一个节点的左侧输入锚点 [1]。
• 右键上下文菜单:
  • Copy / Paste / Delete: 复制、粘贴和删除节点。
  • Deactivate (停用): (快捷键: D) [6] 临时“注释掉”一个节点。工作流执行时将跳过此节点。
  • Pin Data (固定数据): (快捷键: P) [6] 极其强大的调试功能。详见下文。
  • Convert to sub-workflow (转换为子工作流): 将一组选定的节点自动打包成一个可复用的子工作流 [13]。

5. 节点配置面板：定义每一步的操作

双击画布上的任意节点，会弹出该节点的配置面板。这是定义工作流实际做什么的地方 [6, 14]。

• Parameters (参数) 选项卡: 这是节点的核心功能区，用于配置其特定业务逻辑 [14, 15]。例如，HTTP Request 节点的参数是 URL，而 Google Sheets 节点的参数是 Sheet ID。
• 表达式 (Expressions) {{ }}: n8n 的精髓。几乎在每个参数字段旁边，您都可以切换到“表达式模式” [16]。这允许您不输入静态值，而是使用 {{ }} 语法和少量 JavaScript 来动态引用前面节点传入的数据 [16, 17]。
• Settings (设置) 选项卡: 用于配置节点的通用运行时行为，在所有节点上几乎相同 [12, 14, 15]。
  • Execute Once (执行一次): n8n 默认会为每批数据中的每一项 (item) 都执行一次节点。勾选此项后，节点将只对第一项数据执行一次 [12, 18, 19, 20, 21]。
  • Retry On Fail (失败时重试): 提供简单的自动重试逻辑，当节点执行失败时（例如 API 超时），n8n 会自动重试 [12, 22]。
  • On Error (错误处理): 默认是 Stop workflow（停止并报错）。您可以将其设置为 Continue (using error output)，这会激活一个特殊的“错误输出”锚点，允许您构建自定义的错误处理分支（例如，发送失败通知）[23]。

6. 执行数据视图：调试与验证

当您点击 Execute Workflow 完成一次测试执行后，n8n 编辑器界面会进入“结果”状态。此时点击任意一个成功执行的节点，弹出的不再是配置面板，而是“执行数据视图”[3]。

• Execution Data 面板用于查看节点输出结果 [3]。
• 视图模式:
  • Table (表格): 以表格形式展示数据，清晰易读。
  • JSON: 数据的“真实来源”。n8n 中的所有数据本质上都是 JSON 格式 [3]。
  • Schema (结构): 自动分析数据结构，便于理解。
• Pin Data (固定数据) 图标: 在结果视图的右上角有一个“图钉”图标。
  • 功能: 点击它（或使用快捷键 P）[6] 可以将该节点的本次输出数据“固定”或“缓存”起来 [7, 3]。
  • 用途: 当您再次点击 Execute Workflow 时，n8n 将*跳过*所有已固定数据的节点，*直接*使用您固定的数据作为其输出，并传递给下游节点。这在调试时极其有用，例如当您的第一个节点是一个耗时 30 秒或需要付费的 API 调用时，您只需运行它一次，然后“固定”其数据，就可以（零成本、零延迟地）反复调试后续的数据转换逻辑 [3, 4]。

实操演示：创建简单工作流并标注各区块交互

让我们通过一个“每日获取一句笑话”的简单工作流，串联起上述所有功能区。

1. 添加触发器 (使用 节点面板):
   • 在中心画布上，点击 "Add first step"（或按 Tab 键）打开右侧的节点面板 [1]。
   • 在搜索框中输入 "Schedule"，选择 Schedule Trigger (定时触发器) 节点。
   • 双击该节点打开配置面板。在 Parameters 选项卡中，将 Trigger Times 设置为 Every Day。
2. 添加操作 (使用 节点面板):
   • 点击 Schedule Trigger 节点右侧的 + 号，再次打开节点面板。
   • 搜索 "HTTP"，选择 HTTP Request 节点。
   • 双击打开配置面板。在 Parameters 选项卡中，将 URL 字段设置为 https://api.chucknorris.io/jokes/random (这是一个免费的笑话 API)。
3. 测试工作流 (使用 画布 和 执行数据视图):
   • 点击中心画布右上角的 Execute Workflow (执行工作流) 按钮 [1, 3]。
   • 等待几秒钟，两个节点都应显示绿色边框，表示执行成功。
   • 点击 HTTP Request 节点，查看执行数据视图。您应该能在 JSON 选项卡中看到返回的数据，其中包含一个 value 字段，即笑话内容。
4. 调试和固定数据 (使用 执行数据视图):
   • 现在，假设我们只想提取笑话内容。在 HTTP Request 节点的结果视图中，点击右上角的“图钉”图标 (Pin Data) [6, 3]。
   • 点击 HTTP Request 节点右侧的 + 号，从节点面板添加一个 Set 节点。
   • 双击 Set 节点，在 Parameters 选项卡中，添加一个新字段，命名为 myJoke。
   • 在其 Value 字段中，点击 fx 按钮切换到表达式模式，输入 {{ $json.value }} (这会从上一步的 JSON 数据中提取 value 字段) [16]。
   • 再次点击 Execute Workflow。您会发现 HTTP Request 节点立即完成了（因为它使用了固定的数据），只有 Set 节点是新执行的。
5. 部署工作流 (使用 顶部栏):
   • 测试无误后，点击顶部栏的 Save (保存) 按钮 [1]。
   • 点击 Inactive / Active 切换按钮，将其拨至 Active (激活) [1, 3]。
   • 现在，这个工作流已经“上线”，将在每天您设定的时间自动运行。

常见问题 (FAQ)

问：n8n Editor UI 无法加载怎么办？

答：这通常与您的运行环境有关，尤其是自托管 (self-hosted) 的 n8n 实例。

• 浏览器问题： 尝试清除浏览器缓存，或在隐私模式下打开。某些浏览器扩展（特别是广告拦截器）可能会干扰 UI 加载。
• 自托管配置错误： 如果您是自托管 n8n (例如使用 Docker)，最常见的原因是环境变量配置不当 [24]，或者反向代理（如 Nginx）设置不正确 [25]。请检查您的 .env 文件和 n8n 服务的启动日志。
• 网络问题： 确保您的设备可以访问 n8n 实例的 URL。

问：节点面板 (Nodes Panel) 打不开的解决方法？

答：这是一个罕见情况，通常是浏览器或前端界面的小故障。

1. 强制刷新： 尝试按 Ctrl+R 或 Cmd+R 强制刷新页面。
2. 使用快捷键： 尝试不点击 + 按钮，而是在画布空白处按 Tab 键 [1, 7]。这会调用相同的功能，有时可以绕过 UI 按钮的故障。
3. 检查浏览器控制台： 按 F12 (或 Option+Cmd+I) 打开浏览器开发者工具，查看“控制台”(Console) 选项卡中是否有红色的 JavaScript 错误。这可以为排查问题提供线索。