Add workflow 101 tutorial

.gitignore

@@ -4,3 +4,5 @@
 __pycache__/
 CLAUDE.md
 AGENTS.md
+.claude/CLAUDE.local.md
+.claude/settings.local.json

docs.json

@@ -227,6 +227,21 @@
                         "group": "Tutorials",
                         "expanded": false,
                         "pages": [
+                          {
+                          "group": "Workflow 101",
+                          "pages": [
+                          "en/use-dify/tutorials/workflow-101/lesson-01",
+                          "en/use-dify/tutorials/workflow-101/lesson-02",
+                          "en/use-dify/tutorials/workflow-101/lesson-03",
+                          "en/use-dify/tutorials/workflow-101/lesson-04",
+                          "en/use-dify/tutorials/workflow-101/lesson-05",
+                          "en/use-dify/tutorials/workflow-101/lesson-06",
+                          "en/use-dify/tutorials/workflow-101/lesson-07",
+                          "en/use-dify/tutorials/workflow-101/lesson-08",
+                          "en/use-dify/tutorials/workflow-101/lesson-09",
+                          "en/use-dify/tutorials/workflow-101/lesson-10"
+                          ]
+                          },                          
                           "en/use-dify/tutorials/simple-chatbot",
                           "en/use-dify/tutorials/twitter-chatflow",
                           "en/use-dify/tutorials/customer-service-bot",
@@ -612,6 +627,21 @@
                         "group": "教程",
                         "expanded": false,
                         "pages": [
+                          {
+                          "group": "工作流 101",
+                          "pages": [
+                          "zh/use-dify/tutorials/workflow-101/lesson-01",
+                          "zh/use-dify/tutorials/workflow-101/lesson-02",
+                          "zh/use-dify/tutorials/workflow-101/lesson-03",
+                          "zh/use-dify/tutorials/workflow-101/lesson-04",
+                          "zh/use-dify/tutorials/workflow-101/lesson-05",
+                          "zh/use-dify/tutorials/workflow-101/lesson-06",
+                          "zh/use-dify/tutorials/workflow-101/lesson-07",
+                          "zh/use-dify/tutorials/workflow-101/lesson-08",
+                          "zh/use-dify/tutorials/workflow-101/lesson-09",
+                          "zh/use-dify/tutorials/workflow-101/lesson-10"
+                          ]
+                          }, 
                           "zh/use-dify/tutorials/simple-chatbot",
                           "zh/use-dify/tutorials/twitter-chatflow",
                           "zh/use-dify/tutorials/customer-service-bot",
@@ -997,6 +1027,21 @@
                         "group": "チュートリアル",
                         "expanded": false,
                         "pages": [
+                          {
+                          "group": "ワークフロー 101",
+                          "pages": [
+                          "ja/use-dify/tutorials/workflow-101/lesson-01",
+                          "ja/use-dify/tutorials/workflow-101/lesson-02",
+                          "ja/use-dify/tutorials/workflow-101/lesson-03",
+                          "ja/use-dify/tutorials/workflow-101/lesson-04",
+                          "ja/use-dify/tutorials/workflow-101/lesson-05",
+                          "ja/use-dify/tutorials/workflow-101/lesson-06",
+                          "ja/use-dify/tutorials/workflow-101/lesson-07",
+                          "ja/use-dify/tutorials/workflow-101/lesson-08",
+                          "ja/use-dify/tutorials/workflow-101/lesson-09",
+                          "ja/use-dify/tutorials/workflow-101/lesson-10"
+                          ]
+                          },
                           "ja/use-dify/tutorials/twitter-chatflow",
                           "ja/use-dify/tutorials/customer-service-bot",
                           "ja/use-dify/tutorials/build-ai-image-generation-app",

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

@@ -0,0 +1,49 @@
+---
+title: "Lesson 1: What is a Workflow?"
+---
+
+## 👋 Welcome to Dify 101
+
+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.
+
+Let's leave coding behind for a second and talk about cooking.
+
+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.
+
+## Meet Workflow
+
+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:
+
+1. Input (Ingredients): The information you give the AI. This could be a user's question, a PDF document, or a messy email draft.
+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.
+3. Output (The Dish): The final result the AI hands back to you.
+
+To sum up, a workflow is a flowchart that asks AI to complete tasks in a specific order.
+
+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.
+
+<Frame>
+  ![Workflow Example](/images/difyworkflow101-lesson01-workflowexample.png)
+</Frame>
+
+### Node
+
+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**.
+
+Each of these steps is called a **Node**.
+
+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.
+
+Dify offers you a box of ready-to-use nodes, such as the LLM, Knowledge Retrieval, If/Else, Tools, etc.
+
+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.
+
+## It's Your Turn
+
+1. Go [Dify](https://dify.ai/) and click **Get Started** in the upper right corner.
+2. Click on Explore. This is a library which collects different workflow of different scenarios.
+
+   <Frame>
+     ![Explore](/images/difyworkflow101-lesson01-explore.png)
+   </Frame>
+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

@@ -0,0 +1,168 @@
+---
+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>