Skip to content

导航编辑器 UI#

¥Navigating the Editor UI

在本课中，你将学习如何浏览 编辑器界面。我们将逐步讲解 canvas，向你展示每个图标的含义，以及在 n8n 中构建工作流时需要查找的内容。

¥In this lesson you will learn how to navigate the Editor UI. We will walk through the canvas and show you what each icon means and where to find things you will need while building workflows in n8n.

n8n version

本课程基于 n8n 版本 1.82.1。在其他版本中，某些用户界面可能看起来有所不同，但这不应影响核心功能。

¥This course is based on n8n version 1.82.1. In other versions, some user interfaces might look different, but this shouldn't impact the core functionality.

入门#

¥Getting started

首先设置 n8n。

¥Begin by setting up n8n.

我们建议从 n8n 云 开始，这是一个无需安装且包含免费试用的托管解决方案。

¥We recommend starting with n8n Cloud, a hosted solution that doesn't require installation and includes a free trial.

Alternative set up

如果 n8n Cloud 不适合你，你可以执行 使用 Docker 自托管。这是一个高级选项，仅推荐给熟悉托管服务、Docker 和命令行操作的技术用户。

¥If n8n Cloud isn't a good option for you, you can self-host with Docker. This is an advanced option recommended only for technical users familiar with hosting services, Docker, and the command line.

有关设置 n8n 的不同方法的更多详细信息，请参阅我们的 平台文档。

¥For more details on the different ways to set up n8n, see our platforms documentation.

n8n 运行后，在浏览器窗口中打开编辑器 UI。登录你的 n8n 实例。选择“概览”，然后选择“创建工作流”以查看主画布。

¥Once you have n8n running, open the Editor UI in a browser window. Log in to your n8n instance. Select Overview and then Create Workflow to view the main canvas.

它应该看起来像这样：

¥It should look like this:

Editor UI
Editor UI

编辑器界面设置#

¥Editor UI settings

编辑器 UI 是你构建 workflows 的 Web 界面。你可以从编辑器 UI 访问所有工作流、credentials 以及支持页面。

¥The editor UI is the web interface where you build workflows. You can access all your workflows and credentials, as well as support pages, from the Editor UI.

左侧面板#

¥Left-side panel

在编辑器 UI 的左侧，有一个面板，其中包含用于管理工作流的核心功能和设置。点击小箭头图标即可展开和折叠。

¥On the left side of the Editor UI, there is a panel which contains the core functionalities and settings for managing your workflows. Expand and collapse it by selecting the small arrow icon.

面板包含以下部分：

¥The panel contains the following sections:

  • 概述：包含你有权访问的所有工作流、凭证和执行。在本课程中，请在此处创建新的工作流。

¥Overview: Contains all the workflows, credentials, and executions you have access to. During this course, create new workflows here.

  • 个人：每个用户都会获得一个默认的个人项目。如果你未创建自定义项目，你的工作流和凭据将存储在此处。

¥Personal: Every user gets a default personal project. If you don’t create a custom project, your workflows and credentials are stored here.

  • 项目：项目功能允许你将工作流和凭据分组在一起。你可以将 roles 分配给项目中的用户，以控制他们的权限。项目功能在社区版中不可用。

¥Projects: Projects let you group workflows and credentials together. You can assign roles to users in a project to control what they can do. Projects aren’t available on the Community edition.

  • 管理员面板仅限 n8n 云平台。访问你的 n8n 实例使用情况、账单和版本设置。

¥Admin Panel: n8n Cloud only. Access your n8n instance usage, billing, and version settings.

  • 模板：一系列预制工作流。入门常见用例的好地方。

¥Templates: A collection of pre-made workflows. Great place to get started with common use cases.

  • 变量：用于在工作流中存储和访问固定数据。此功能适用于专业版和企业版套餐。

¥Variables: Used to store and access fixed data across your workflows. This feature is available on the Pro and Enterprise Plans.

  • 提示：提供有关你的工作流的分析和洞察。

¥Insights: Provides analytics and insights about your workflows.

  • 帮助：包含 n8n 产品和社区的相关资源。

¥Help: Contains resources around n8n product and community.

  • 新增内容：显示最新的产品更新和功能。

¥What’s New: Shows the latest product updates and features.

Editor UI left-side menu
Editor UI left-side menu

顶部栏#

¥Top bar

编辑器 UI 的顶部栏包含以下信息：

¥The top bar of the Editor UI contains the following information:

  • 工作流名称：默认情况下，n8n 将新工作流命名为 "我的工作流程"，但你可以随时编辑名称。

¥Workflow Name: By default, n8n names a new workflow as "My workflow", but you can edit the name at any time.

    • 添加标签：标签可帮助你按类别、用例或任何与你相关的内容组织工作流程。标签为可选。

¥+ Add Tag: Tags help you organise your workflows by category, use case, or whatever is relevant for you. Tags are optional.

  • 启用/禁用切换：此按钮用于激活或停用当前工作流。默认情况下，工作流处于禁用状态。

¥Inactive/active toggle: This button activates or deactivates the current workflow. By default, workflows are deactivated.

  • 共享：你可以在 Starter、Pro 和 Enterprise 套餐中与其他用户共享和协作处理工作流。

¥Share: You can share and collaborate with others on workflows on the Starter, Pro, and Enterprise plans.

  • 保存：此按钮用于保存当前工作流。

¥Save: This button saves the current workflow.

  • 历史记录：保存工作流程后，你可以在此处查看以前的版本。

¥History: Once you save your workflow, you can view previous versions here.

Editor UI top bar
Editor UI top bar

画布#

¥Canvas

画布是编辑器 UI 中的灰色虚线网格背景。它显示多个图标和一个具有不同功能的节点：

¥The canvas is the gray dotted grid background in the Editor UI. It displays several icons and a node with different functionalities:

  • 用于缩放画布以适应屏幕、放大或缩小画布、重置缩放以及整理屏幕上节点的按钮。

¥Buttons to zoom the canvas to fit the screen, zoom in or out of the canvas, reset zoom, and tidy up the nodes on screen.

  • 添加第一个节点后，会显示一个“执行工作流”按钮。当你单击它时，n8n 会按顺序执行画布上的所有节点。

¥A button to Execute workflow once you add your first node. When you click on it, n8n executes all nodes on the canvas in sequence.

  • 一个带有“+”号的按钮。此按钮会打开节点面板。

¥A button with a + sign inside. This button opens the nodes panel.

  • 一个带有注释图标的按钮。此按钮会在画布上添加一个 便签（将鼠标悬停在右上角的 + 图标上即可看到）。

¥A button with a note icon inside. This button adds a sticky note to the canvas (visible when hovering on the top right + icon).

  • 画布右侧会出现一个标有“询问助手”的按钮。你可以向 AI 助手寻求构建工作流的帮助。

¥A button labeled Ask Assistant appears on the right side of the canvas. You can ask the AI Assistant for help with building workflows.

  • 一个带有文字“"添加第一步"”的虚线方框。你可以在这里添加你的第一个节点。

¥A dotted square with the text "Add first step." This is where you add your first node.

Workflow canvas
Workflow canvas

Moving the canvas

你可以通过三种方式移动工作流画布：

¥You can move the workflow canvas around in three ways:

  • 在画布上按 ++Ctrl+左键++ 并移动画布。

¥Select Ctrl+Left Button on the canvas and move it around.

  • 在画布上选择++中间按钮++并移动它。

¥Select Middle Button on the canvas and move it around.

  • 将两根手指放在触摸板上并滑动。

¥Place two fingers on your touchpad and slide.

暂时不必担心工作流的执行和激活；我们将在课程的后续部分解释这些概念。

¥Don't worry about workflow execution and activation for now; we'll explain these concepts later on in the course.

节点#

¥Nodes

你可以将节点视为构建模块，它们各自承担不同的功能，组合在一起即可构成一台运行正常的机器：自动化工作流。

¥You can think of nodes as building blocks that serve different functions that, when put together, make up a functioning machine: an automated workflow.

Node

节点是工作流程中的一个独立步骤：用于 (a) 加载、(b) 处理或 (c) 发送数据的组件。

¥A node is an individual step in your workflow: one that either (a) loads, (b) processes, or (c) sends data.

n8n 根据节点的功能将其分为四种类型：

¥Based on their function, n8n classifies nodes into four types:

  • 应用或操作节点可以添加、删除和编辑数据；请求和发送外部数据；并触发其他系统中的事件。请参阅 Action 节点库 文档，查看完整的节点列表。

¥App or Action Nodes add, remove, and edit data; request and send external data; and trigger events in other systems. Refer to the Action nodes library for a full list of these nodes.

  • 触发节点启动工作流并提供初始数据。请参阅 触发器节点库 文档，查看触发节点列表。

¥Trigger Nodes start a workflow and supply the initial data. Refer to the Trigger nodes library for a list of trigger nodes.

  • 核心节点可以是触发器节点或应用节点。大多数节点连接到特定的外部服务，而核心节点则提供逻辑、调度或通用 API 调用等功能。请参阅 核心节点库 文档，查看完整的核心节点列表。

¥Core Nodes can be trigger or app nodes. Whereas most nodes connect to a specific external service, core nodes provide functionality such as logic, scheduling, or generic API calls. Refer to the Core Nodes library for a full list of core nodes.

  • 集群节点是协同工作的节点组，用于在工作流中提供功能，主要用于 AI 工作流。有关更多信息，请参阅 集群节点。

¥Cluster Nodes are node groups that work together to provide functionality in a workflow, primarily for AI workflows. Refer to Cluster nodes for more information.

Learn more

有关所有节点类型的更详细说明，请参阅 节点类型。

¥Refer to Node types for a more detailed explanation of all node types.

查找节点#

¥Finding nodes

你可以在编辑器 UI 右侧的节点面板中找到所有可用节点。打开节点面板有三种方法：

¥You can find all available nodes in the nodes panel on the right side of the Editor UI. There are three ways in which you can open the nodes panel:

  • 点击画布右上角的“+”图标。

¥Click the + icon in the top right corner of the canvas.

  • 点击画布上现有节点（要添加新节点的节点）右侧的“+”图标。

¥Click the + icon on the right side of an existing node on the canvas (the node to which you want to add another one).

  • 按下键盘上的 Tab 键。

¥Click the Tab key on your keyboard.

Nodes panel
Nodes panel

在节点面板中，请注意，添加第一个节点时，你会看到不同的触发节点类别。添加触发节点后，你会看到节点面板发生变化，显示“高级 AI”、“应用内操作”、“数据转换”、“流程”、“核心”和“人机协作”节点。

¥In the nodes panel, notice that when adding your first node, you will see the different trigger node categories. After you have added your trigger node, you'll see that the nodes panel changes to show Advanced AI, Actions in an App, Data transformation, Flow, Core, and Human in the loop nodes.

如果你想查找特定节点，请使用节点面板顶部的搜索框。

¥If you want to find a specific node, use the search input at the top of the nodes panel.

添加节点#

¥Adding nodes

你可以通过两种方式向画布添加节点：

¥There are two ways to add nodes to your canvas:

  • 在节点面板中选择所需的节点。新节点将自动连接到画布上选定的节点。

¥Select the node you want in the nodes panel. The new node will automatically connect to the selected node on the canvas.

  • 将节点从节点面板拖放到画布上。

¥Drag and drop the node from the nodes panel to the canvas.

节点按钮#

¥Node buttons

将鼠标悬停在节点上，你会注意到顶部出现三个图标：

¥If you hover on a node, you'll notice that three icons appear on top:

  • 执行节点（播放图标）

¥Execute the node (Play icon)

  • 停用/激活节点（电源图标）

¥Deactivate/Activate the node (Power icon)

  • 删除节点（垃圾桶图标）。

¥Delete the node (Trash icon)

还会有一个省略号图标，点击后会打开一个包含其他 node 选项 的上下文菜单。

¥There will also be an ellipsis icon, which opens a context menu containing other node options.

Moving a workflow

要在画布上移动工作流，请使用鼠标或快捷键 ++Ctrl+A++ 选择所有节点，然后选择并按住一个节点，将其拖动到画布上的任意位置。

¥To move a workflow around the canvas, select all nodes with your mouse or Ctrl+A, select and hold on a node, then drag it to any point you want on the canvas.

摘要#

¥Summary

在本课中，你学习了如何浏览编辑器 UI、图标的含义、如何访问左侧面板和节点面板，以及如何向画布添加节点。

¥In this lesson you learned how to navigate the Editor UI, what the icons mean, how to access the left-side and node panels, and how to add nodes to the canvas.

在下一课中，你将构建一个小型工作流，​​将目前所学的知识付诸实践。

¥In the next lesson, you will build a mini-workflow to put into practice what you've learned so far.