feat: images

docs.json

@@ -252,7 +252,8 @@
                                     {
                                         "group": "Basic",
                                         "pages": [
-                                            "en/workshop/basic/build-ai-image-generation-app"
+                                            "en/workshop/basic/build-ai-image-generation-app",
+                                            "en/workshop/basic/the-right-way-of-markdown"
                                         ]
                                     },
                                     {

en/workshop/basic/the-right-way-of-markdown.mdx

@@ -0,0 +1,170 @@
+---
+title: The Right Way of Markdown
+---
+
+> Author: Li Zheng, Dify DevRel
+
+In this article, we will introduce the right way of using markdown in Dify. Markdown is a lightweight markup language that allows you to format text using simple syntax. It is widely used for writing documentation, articles, and other text-based content.
+
+## Basic Markdown Syntax in Dify
+
+We support most of the usage of markdown syntax, for example:
+
+- Heading
+- Bold and Italic text, strike-through text
+- Lists
+- Table
+- Fenced Code Blocks
+
+<Info>
+If you want to learn more about markdown syntax, you can refer to the [Markdown Guide](https://www.markdownguide.org/basic-syntax/), if you want to extend it's capabilities, you can also check out the [React Markdown](https://github.com/remarkjs/react-markdown).
+</Info>
+
+## Advanced Markdown Features in Dify
+
+### Button & Links
+
+You might not be happy with the default follow-up questions generated by the LLM. In this case, you can use buttons and links to guide the conversation in a specific direction.
+
+<img
+  src="/images/screenshot-20250714-134035.png"
+  className="mr-auto"
+/>
+
+You can use the following syntax to create buttons and links:
+
+```
+<button data-message="Hello Dify" data-variant="primary">Hello Dify</button>
+<button data-message="Hello Dify" data-variant="danger">Hello Dify</button>
+```
+
+For buttons, we need to define two attributes `data-variant` and `data-message`.
+
+- `data-variant`: The style of the button, can be `primary`, `secondary`, `warning`, 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'.
+- `data-message`: The message that will be sent when the button is clicked.
+
+For links, it's more straightforward:
+
+```
+<a href="https://dify.ai" target="_blank">Dify</a>
+```
+
+Or you can use the `abbr` syntax to create an abbreviation link, this is useful for create interactive links that can be used in the conversation:
+
+```
+[Special Link](abbr:special-link)
+```
+
+### Form
+
+For forms, we need to define the `data-format` attribute, which can be `json` or `text`. If not specified, it defaults to `text`. The form will be submitted as a JSON object if `data-format="json"` is set.
+
+<img
+  src="/images/screenshot-20250714-134150.png"
+  className="mr-auto"
+/>
+
+#### Supported Input Types
+
+Dify supports a variety of input types for forms, including:
+
+- text
+- textarea
+- password
+- time
+- date
+- datetime
+- select
+- checkbox
+- hidden
+
+If you want to render a form during the conversation, you can use the following syntax:
+
+```
+<form data-format="json"> // Default to text
+  <label for="username">Username:</label>
+  <input type="text" name="username" />
+  <label for="hidden_input">Hidden input:</label>
+  <input type="hidden" name="hidden_input" value="hidden_value" />
+  <label for="password">Password:</label>
+  <input type="password" name="password" />
+  <label for="content">Content:</label>
+  <textarea name="content"></textarea>
+  <label for="date">Date:</label>
+  <input type="date" name="date" />
+  <label for="time">Time:</label>
+  <input type="time" name="time" />
+  <label for="datetime">Datetime:</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">Select:</label>
+  <input type="select" name="select" data-options='["hello","world"]'/>
+  <input type="checkbox" name="check" data-tip="By checking this means you agreed"/>
+  <button data-variant="primary">Login</button>
+</form>
+```
+
+<Note>
+Hidden is not visible to users, you can set the value to pass data without user input.
+</Note>
+
+### Chart
+
+We support rendering [echarts](https://dify.ai/docs/guides/tools/chart) in markdown. You can use the following syntax to render a chart:
+
+<img
+    src="/images/screenshot-20250714-134238.png"
+    className="mr-auto"
+/>
+<Note>
+To render a chart, start a fenced code block with <code>```echarts</code> and place your chart configuration inside.
+</Note>
+
+```echarts
+{
+  "title": {
+    "text": "ECharts Entry Example"
+  },
+  "tooltip": {},
+  "legend": {
+    "data": ["Sales"]
+  },
+  "xAxis": {
+    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
+  },
+  "yAxis": {},
+  "series": [{
+    "name": "Sales",
+    "type": "bar",
+    "data": [5, 20, 36, 10, 10, 20]
+  }]
+}
+```
+
+### Music
+
+Not only can you render charts, but also music sheets in markdown. We support rendering [ABC notation](https://paulrosen.github.io/abcjs/) in markdown. You can use the following syntax to render a music sheet:
+
+<img
+    src="/images/screenshot-20250714-134431.png"
+    className="mr-auto"
+/>
+
+<Note>
+To render a music sheet, start a fenced code block with <code>```abc</code> and place your ABC notation inside.
+</Note>
+
+```abc
+X: 1
+T: Cooley's
+M: 4/4
+L: 1/8
+K: Emin
+|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
+EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
+|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
+eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
+```
+
+## Best Practices
+
+If you want to predefine the markdown content, you can use the [template](/en/guides/workflow/node/template) feature in Dify. This allows you to use template content in downstream nodes.