Files
dify-docs/en/use-dify/tutorials/workflow-101/lesson-02.mdx
Riskey df19776bb0 Add workflow 101 tutorial (#705)
* add the zh and en workflow 101 tutorials

* refine the formats for readability

* refine formatting and minor issues

* Update Workflow 101 lessons and images

* Update image display in Workflow 101 lesson 01

* Rename Dify workflow image

* Update Workflow 101 Lesson 3 with new images and prompt example

* Update Workflow 101 Lesson 03 images

* Update Dify workflow lesson 4 prompt image

* Update Workflow 101 Lesson 5 with new images and content

* Update Workflow 101 Lesson 6 content and images

* Update Workflow 101 Lesson 08 and add new images

* Refine email reply instruction in Workflow 101 lesson 8

* Update Workflow 101 Lesson 9 with new steps and images

* Update Workflow 101 Lesson 09 content and images

* Fix whitespace in Workflow 101 Lesson 9

* Add image alt text to workflow example in zh lesson 01

* Update LLM node images and text formatting in Workflow 101 Lesson 03

* Update zh/use-dify/tutorials/workflow-101/lesson-05.mdx content

* Update zh/workflow-101/lesson-03.mdx for clarity

* Remove unnecessary italics in Workflow 101 lesson 4

* Update Workflow 101 Lesson 5 for clarity and image display

* Update images in Workflow 101 Lesson 06

* Update Lesson 7 workflow tutorial with new images and text fixes

* Update zh/use-dify/tutorials/workflow-101/lesson-06.mdx content

* Update prompt instructions in Workflow 101 Lesson 06

* Clarify condition in Workflow 101 Lesson 07

* Fix formatting in Workflow 101 lesson 8

* Update Workflow 101 Lesson 9 for email formatting optimization

* Fix typo in Workflow 101 Lesson 9

* Remove Jinja2 example from workflow lesson

* Update image syntax in Workflow 101 Lesson 02

* Update image tag in Workflow 101 Lesson 3

* Remove italics from workflow 101 lessons

* Fix typo in zh/use-dify/tutorials/workflow-101/lesson-05.mdx

* Refine parameter types explanation in Workflow 101 lesson 6

* Refine Chinese text in Workflow 101 lesson 06

* Update Lesson 7: Enhance Workflows content

* Fix formatting in Workflow 101 Lesson 7

* Refine Chinese text in Workflow 101 lesson 8

* Refine instructions for Workflow 101 Lesson 08 test run

* Clarify the purpose of template conversion in Workflow 101 lesson 9

* Update Workflow 101 Lesson 10 image syntax

* Polish workflow 101 tutorials (en/zh) and add ja translation

* Update Workflow 101 lesson 1 content

* Fix formatting and update workflow creation instructions in Lesson 02

* Clarify multi-modal model description in Workflow 101 lesson 3

* Remove italics from workflow tutorial lessons

* Update Workflow 101 Lesson 6 prompt example

* Update formatting in Workflow 101 lesson 8

* Update Workflow 101 lesson 1 content

* Update zh/use-dify/tutorials/workflow-101/lesson-02.mdx content

* Refine Chinese text in Workflow 101 Lesson 3

* Refine RAG explanation in Workflow 101 Lesson 04

* Update zh/use-dify/tutorials/workflow-101/lesson-05.mdx content

* Update formatting in Workflow 101 Lesson 08

* final checks

* format and terminology fixes

---------

Co-authored-by: Anne <annezj92@gmail.com>
2026-03-11 15:42:44 +08:00

168 lines
6.7 KiB
Plaintext

---
title: "Lesson 2: Head and Tail (Start & Output Node)"
sidebarTitle: "Lesson 2: Head and Tail"
---
In the last lesson, we compared a Workflow to a Recipe. Today, we are stepping into the professional kitchen to prep our ingredients (Start) and get our serving plates ready (Output).
## Create the App
<Steps>
<Step title="Create from Blank">
Click on **Studio** at the top of the screen. Under Create App on the left, click **Create from Blank**.
<Frame>
![Create the App](/images/difyworkflow101-lesson02-creatingtheapp.png)
</Frame>
</Step>
<Step title="Configure App Type">
Select **Workflow** as the app type, fill up **App Name & Icon**, then click **Create**.
<Frame>
![App Name & Icon](/images/difyworkflow101-lesson02-createworkflow.png)
</Frame>
</Step>
<Step title="Choose Start Node Type">
Click User Input, and you'll see a new popup window. There are two options here that decide how your app starts running:
- **User Input**
This is **Manual Mode**. The workflow only starts working when you (the user) type something into the chat box.
Best for: Most AI apps. For example, chatbots, writing assistants, translation, etc.
- **Trigger**
This is **Automatic Mode**. It runs automatically based on a signal (like 8:00 AM every morning, or a specific event).
Best for: Repetitive task that runs on a specific time, or run this workflow after a task is completed else where. For example, daily news summary.
<Frame>
![Trigger](/images/difyworkflow101-lesson02-trigger.png)
</Frame>
</Step>
</Steps>
## Meet the Orchestration Canvas
After selecting the Start node, you will see a large blank area. This is your orchestration canvas where you will design, build, and test your workflow.
<Frame>
![Orchestration Studio](/images/difyworkflow101-lesson02-orchestrationstudio.png)
</Frame>
Remember the Nodes we learned in Lesson 1? The user input node you see on the canvas now is where everything begins.
Every complete workflow relies on a basic skeleton: the Start Node (The Head) and the Output Node (The Tail).
## The Start Node
<Frame>
![Start Node](/images/difyworkflow101-lesson02-startnode.png)
</Frame>
The Start Node is the only entrance to your entire workflow. It's like the Prep Ingredients step in cooking. Its job is to define what information the workflow needs to receive from the user to get started.
We just selected **User Input** as our Start Node.
### Core Concept: Variables
Inside the Start Node, you will see the word **Variable**. Don't panic! You can think of a variable as a **Storage Box with a Label**.
Each box is designed to hold a specific type of information:
For example, if you are building a Travel Planner, you need the user to provide two pieces of information: `Destination` and `Travel Days`.
User A might want to go to Japan for 5 days. User B might want to go to Paris for 3 days.
Every user provides different content, so every time the app runs, the stuff inside these boxes changes.
This is the meaning of a Variable—digging a hole for the user to fill, helping your workflow to handle different requests flexibly every time.
## The End Node (Output)
<Frame>
![Output](/images/difyworkflow101-lesson02-output.png)
</Frame>
This is the finish line of the workflow. Think of it as Serving the Dish and it defines what the user actually sees at the very end.
For example, remember that Travel Planner we talked about? If the user inputs Destination: Paris and Duration: 5 Days in the User Input Node. The Output Node is where the system finally hands over the result: Here is your complete 5-Day Itinerary for Paris.
To sum up, the Start Node and End Node define the basic input and output, shaping the skeleton of your app.
## Hands-On Practice: Start Building an AI Email Assistant
Let's build the basic framework for an AI Assistant that helps you write emails.
<Steps>
<Step title="Create the App">
You can either:
- Continue on the canvas you just opened, or
- Go back to Studio → Create Blank App → select Workflow, and name it Email Assistant (Remember to select **User Input** in the popup!)
</Step>
<Step title="Configure the Start Node (Prep Ingredients)">
If you need AI to help you with a email reply, what information do you need to give it?
That's right: usually the Customer's Name and the Original Email Content.
1. Click on the **Start** node. In the panel on the right, look for **Input Field** and click the **\+** button.
<Frame>
![User Input Field](/images/difyworkflow101-lesson02-inputfield.png)
</Frame>
2. In the popup, we will create two variables (two storage boxes):
**Variable 1 (For the Customer Name)**
<Frame>
![Add First Variable](/images/difyworkflow101-lesson02-variable1.png)
</Frame>
- Field Type: Text (Short Text)
- Variable Name: `customer_name`
- Label Name: Customer Name
- Keep other options as default
**Variable 2 (For the Email Content)**
<Frame>
![Add Second Variable](/images/difyworkflow101-lesson02-variable2.png)
</Frame>
- Field Type: Click the dropdown and select **Paragraph** (Since emails are usually long, a Paragraph box is bigger and holds more text)
- Variable Name: `email_content`
- Label Name: Original Email
- Max Length: Manually change this to **2000** to ensure it fits long emails
<Tip>
**Variable Name vs. Label Name**
You might notice we had to fill in two names. What's the difference?
- **Variable Name**: This is the ID card for the system. It must be unique, use English letters, and cannot have spaces.
- **Label Name**: This is the Label for the users. You can name it with any language (English, Chinese, etc.). It will be shown on the screen.
</Tip>
</Step>
<Step title="Create the End Node (Set the Goal)">
Right-click anywhere on the blank white space of the canvas. Select **Add Node** and select **Output** from the list.
<Frame>
![Create the End Node](/images/difyworkflow101-lesson02-createendnode.png)
</Frame>
</Step>
</Steps>
Here's everything on your canvas: a **Start Node** ready to receive a name and an email, and an **Output Node** waiting to send the final result.
<Frame>
![Start Node and Output](/images/difyworkflow101-lesson02-basicworkflow.png)
</Frame>
We have successfully built basic frame of the workflow. The empty space in the middle is where we will place the LLM (AI Brain) Node in the next lesson to process this information.
## Mini Challenge
**Task**: If you needed to create a Travel Plan Generator, what variables should the Start Node include?
<Tip>
Try exploring the Field Types in **Add Variable**.
</Tip>