Skip to content

Commit df19776

Browse files
RiskeyLPrimmaAnna
RiskeyL
and
PrimmaAnna
authored
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>
1 parent 41be33b commit df19776

137 files changed

Lines changed: 5117 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@
44
__pycache__/
55
CLAUDE.md
66
AGENTS.md
7+
.claude/CLAUDE.local.md
8+
.claude/settings.local.json

‎difyworkflow101-lesson04-updateprompt.png‎

86.3 KB
Loading

‎docs.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,21 @@
229229
"group": "Tutorials",
230230
"expanded": false,
231231
"pages": [
232+
{
233+
"group": "Workflow 101",
234+
"pages": [
235+
"en/use-dify/tutorials/workflow-101/lesson-01",
236+
"en/use-dify/tutorials/workflow-101/lesson-02",
237+
"en/use-dify/tutorials/workflow-101/lesson-03",
238+
"en/use-dify/tutorials/workflow-101/lesson-04",
239+
"en/use-dify/tutorials/workflow-101/lesson-05",
240+
"en/use-dify/tutorials/workflow-101/lesson-06",
241+
"en/use-dify/tutorials/workflow-101/lesson-07",
242+
"en/use-dify/tutorials/workflow-101/lesson-08",
243+
"en/use-dify/tutorials/workflow-101/lesson-09",
244+
"en/use-dify/tutorials/workflow-101/lesson-10"
245+
]
246+
},
232247
"en/use-dify/tutorials/simple-chatbot",
233248
"en/use-dify/tutorials/twitter-chatflow",
234249
"en/use-dify/tutorials/customer-service-bot",
@@ -616,6 +631,21 @@
616631
"group": "教程",
617632
"expanded": false,
618633
"pages": [
634+
{
635+
"group": "工作流 101",
636+
"pages": [
637+
"zh/use-dify/tutorials/workflow-101/lesson-01",
638+
"zh/use-dify/tutorials/workflow-101/lesson-02",
639+
"zh/use-dify/tutorials/workflow-101/lesson-03",
640+
"zh/use-dify/tutorials/workflow-101/lesson-04",
641+
"zh/use-dify/tutorials/workflow-101/lesson-05",
642+
"zh/use-dify/tutorials/workflow-101/lesson-06",
643+
"zh/use-dify/tutorials/workflow-101/lesson-07",
644+
"zh/use-dify/tutorials/workflow-101/lesson-08",
645+
"zh/use-dify/tutorials/workflow-101/lesson-09",
646+
"zh/use-dify/tutorials/workflow-101/lesson-10"
647+
]
648+
},
619649
"zh/use-dify/tutorials/simple-chatbot",
620650
"zh/use-dify/tutorials/twitter-chatflow",
621651
"zh/use-dify/tutorials/customer-service-bot",
@@ -1003,6 +1033,21 @@
10031033
"group": "チュートリアル",
10041034
"expanded": false,
10051035
"pages": [
1036+
{
1037+
"group": "ワークフロー 101",
1038+
"pages": [
1039+
"ja/use-dify/tutorials/workflow-101/lesson-01",
1040+
"ja/use-dify/tutorials/workflow-101/lesson-02",
1041+
"ja/use-dify/tutorials/workflow-101/lesson-03",
1042+
"ja/use-dify/tutorials/workflow-101/lesson-04",
1043+
"ja/use-dify/tutorials/workflow-101/lesson-05",
1044+
"ja/use-dify/tutorials/workflow-101/lesson-06",
1045+
"ja/use-dify/tutorials/workflow-101/lesson-07",
1046+
"ja/use-dify/tutorials/workflow-101/lesson-08",
1047+
"ja/use-dify/tutorials/workflow-101/lesson-09",
1048+
"ja/use-dify/tutorials/workflow-101/lesson-10"
1049+
]
1050+
},
10061051
"ja/use-dify/tutorials/twitter-chatflow",
10071052
"ja/use-dify/tutorials/customer-service-bot",
10081053
"ja/use-dify/tutorials/build-ai-image-generation-app",

‎en/use-dify/tutorials/workflow-101/lesson-01.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: "Lesson 1: What is a Workflow?"
3+
---
4+
5+
## 👋 Welcome to Dify 101
6+
7+
We are going to take you from Zero to Hero. By the end of this course, you will build your very own Advanced AI Email Assistant.
8+
9+
Let's leave coding behind for a second and talk about cooking.
10+
11+
Imagine you want to cook a dish that you haven't made before. To make that happen, you need a **Recipe**. A recipe is just like a workflow! It tells you exactly what to do, in what order, to get the dish you want.
12+
13+
## Meet Workflow
14+
15+
In Dify, you are the head chef who writes a Recipe for the AI to follow. Here're the things you need to prepare beforehand:
16+
17+
1. Input (Ingredients): The information you give the AI. This could be a user's question, a PDF document, or a messy email draft.
18+
2. Process (Instructions): The steps you force the AI to take. For example: First, summarize this text. Next, translate it into Spanish. Finally, format it as a LinkedIn post.
19+
3. Output (The Dish): The final result the AI hands back to you.
20+
21+
To sum up, a workflow is a flowchart that asks AI to complete tasks in a specific order.
22+
23+
This is a Smart ID Scanner workflow. Its job is to extract the information on front and back of an ID card, then send these texts back to you.
24+
25+
<Frame>
26+
![Workflow Example](/images/difyworkflow101-lesson01-workflowexample.png)
27+
</Frame>
28+
29+
### Node
30+
31+
Let's have a closer look of the workflow above. That whole process is simply made up of a few connected steps: **Uploading the image, Extracting the information, and Combining the results**.
32+
33+
Each of these steps is called a **Node**.
34+
35+
Think of them like runners in a relay race: each node has a specific task. Once it finishes its turn, it passes the baton to the next node in line.
36+
37+
Dify offers you a box of ready-to-use nodes, such as the LLM, Knowledge Retrieval, If/Else, Tools, etc.
38+
39+
You can connect these nodes just by dragging and dropping—it's like building with the Lego blocks! You can easily snap them together to create a powerful automated workflow.
40+
41+
## It's Your Turn
42+
43+
1. Go [Dify](https://dify.ai/) and click **Get Started** in the upper right corner.
44+
2. Click on Explore. This is a library which collects different workflow of different scenarios.
45+
46+
<Frame>
47+
![Explore](/images/difyworkflow101-lesson01-explore.png)
48+
</Frame>
49+
3. Pick a template that looks like a right fit for you. Don't worry if you don't understand every setting yet—just look at how the nodes are connected.

‎en/use-dify/tutorials/workflow-101/lesson-02.mdx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
---
2+
title: "Lesson 2: Head and Tail (Start & Output Node)"
3+
sidebarTitle: "Lesson 2: Head and Tail"
4+
---
5+
6+
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).
7+
8+
## Create the App
9+
10+
<Steps>
11+
<Step title="Create from Blank">
12+
Click on **Studio** at the top of the screen. Under Create App on the left, click **Create from Blank**.
13+
14+
<Frame>
15+
![Create the App](/images/difyworkflow101-lesson02-creatingtheapp.png)
16+
</Frame>
17+
</Step>
18+
<Step title="Configure App Type">
19+
Select **Workflow** as the app type, fill up **App Name & Icon**, then click **Create**.
20+
21+
<Frame>
22+
![App Name & Icon](/images/difyworkflow101-lesson02-createworkflow.png)
23+
</Frame>
24+
</Step>
25+
<Step title="Choose Start Node Type">
26+
Click User Input, and you'll see a new popup window. There are two options here that decide how your app starts running:
27+
28+
- **User Input**
29+
30+
This is **Manual Mode**. The workflow only starts working when you (the user) type something into the chat box.
31+
32+
Best for: Most AI apps. For example, chatbots, writing assistants, translation, etc.
33+
- **Trigger**
34+
35+
This is **Automatic Mode**. It runs automatically based on a signal (like 8:00 AM every morning, or a specific event).
36+
37+
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.
38+
39+
<Frame>
40+
![Trigger](/images/difyworkflow101-lesson02-trigger.png)
41+
</Frame>
42+
</Step>
43+
</Steps>
44+
45+
## Meet the Orchestration Canvas
46+
47+
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.
48+
49+
<Frame>
50+
![Orchestration Studio](/images/difyworkflow101-lesson02-orchestrationstudio.png)
51+
</Frame>
52+
53+
Remember the Nodes we learned in Lesson 1? The user input node you see on the canvas now is where everything begins.
54+
55+
Every complete workflow relies on a basic skeleton: the Start Node (The Head) and the Output Node (The Tail).
56+
57+
## The Start Node
58+
59+
<Frame>
60+
![Start Node](/images/difyworkflow101-lesson02-startnode.png)
61+
</Frame>
62+
63+
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.
64+
65+
We just selected **User Input** as our Start Node.
66+
67+
### Core Concept: Variables
68+
69+
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**.
70+
71+
Each box is designed to hold a specific type of information:
72+
73+
For example, if you are building a Travel Planner, you need the user to provide two pieces of information: `Destination` and `Travel Days`.
74+
75+
User A might want to go to Japan for 5 days. User B might want to go to Paris for 3 days.
76+
77+
Every user provides different content, so every time the app runs, the stuff inside these boxes changes.
78+
79+
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.
80+
81+
## The End Node (Output)
82+
83+
<Frame>
84+
![Output](/images/difyworkflow101-lesson02-output.png)
85+
</Frame>
86+
87+
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.
88+
89+
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.
90+
91+
To sum up, the Start Node and End Node define the basic input and output, shaping the skeleton of your app.
92+
93+
## Hands-On Practice: Start Building an AI Email Assistant
94+
95+
Let's build the basic framework for an AI Assistant that helps you write emails.
96+
97+
<Steps>
98+
<Step title="Create the App">
99+
You can either:
100+
101+
- Continue on the canvas you just opened, or
102+
- Go back to Studio → Create Blank App → select Workflow, and name it Email Assistant (Remember to select **User Input** in the popup!)
103+
</Step>
104+
<Step title="Configure the Start Node (Prep Ingredients)">
105+
If you need AI to help you with a email reply, what information do you need to give it?
106+
107+
That's right: usually the Customer's Name and the Original Email Content.
108+
109+
1. Click on the **Start** node. In the panel on the right, look for **Input Field** and click the **\+** button.
110+
111+
<Frame>
112+
![User Input Field](/images/difyworkflow101-lesson02-inputfield.png)
113+
</Frame>
114+
2. In the popup, we will create two variables (two storage boxes):
115+
116+
**Variable 1 (For the Customer Name)**
117+
118+
<Frame>
119+
![Add First Variable](/images/difyworkflow101-lesson02-variable1.png)
120+
</Frame>
121+
- Field Type: Text (Short Text)
122+
- Variable Name: `customer_name`
123+
- Label Name: Customer Name
124+
- Keep other options as default
125+
126+
**Variable 2 (For the Email Content)**
127+
128+
<Frame>
129+
![Add Second Variable](/images/difyworkflow101-lesson02-variable2.png)
130+
</Frame>
131+
- Field Type: Click the dropdown and select **Paragraph** (Since emails are usually long, a Paragraph box is bigger and holds more text)
132+
- Variable Name: `email_content`
133+
- Label Name: Original Email
134+
- Max Length: Manually change this to **2000** to ensure it fits long emails
135+
136+
<Tip>
137+
**Variable Name vs. Label Name**
138+
139+
You might notice we had to fill in two names. What's the difference?
140+
141+
- **Variable Name**: This is the ID card for the system. It must be unique, use English letters, and cannot have spaces.
142+
- **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.
143+
</Tip>
144+
</Step>
145+
<Step title="Create the End Node (Set the Goal)">
146+
Right-click anywhere on the blank white space of the canvas. Select **Add Node** and select **Output** from the list.
147+
148+
<Frame>
149+
![Create the End Node](/images/difyworkflow101-lesson02-createendnode.png)
150+
</Frame>
151+
</Step>
152+
</Steps>
153+
154+
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.
155+
156+
<Frame>
157+
![Start Node and Output](/images/difyworkflow101-lesson02-basicworkflow.png)
158+
</Frame>
159+
160+
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.
161+
162+
## Mini Challenge
163+
164+
**Task**: If you needed to create a Travel Plan Generator, what variables should the Start Node include?
165+
166+
<Tip>
167+
Try exploring the Field Types in **Add Variable**.
168+
</Tip>

0 commit comments

Comments
 (0)