Markdown transforms your Dify app outputs from plain text dumps into properly formatted, professional responses. Use it in Answer and End nodes to render headers, lists, code blocks, tables, and more to create clear visual hierarchies for the end user.

​
Basic Markdown Syntax in Dify

Use Markdown in your Answer / End nodes to render things like:

  • Headings
  • Bold and Italic text, strike-through text
  • Lists
  • Tables
  • Fenced Code Blocks
  • Audio and Video

​
Headings

Use # for headings, with the number of # symbols indicating the heading level:

# Heading 1
## Heading 2
### Heading 3

​
Bold, Italic, and Strikethrough

You can format text as bold, italic, or strikethrough:

**Bold Text**
*Italic Text*
~~Strikethrough Text~~

​
Lists

You can create ordered and unordered lists:

- Unordered List Item 1
- Unordered List Item 2
  - Nested Unordered Item
1. Ordered List Item 1
2. Ordered List Item 2
   1. Nested Ordered Item

​
Tables

You can create tables using pipes and dashes:

| Header 1 | Header 2 |
|----------|----------|
| Row 1 Col 1 | Row 1 Col 2 |
| Row 2 Col 1 | Row 2 Col 2 |

​
Fenced Code Blocks

Use triple backticks to create fenced code blocks:

def hello_world():
    print("Hello, World!")

​
Audio and Video

You can embed audio and video files using the following syntax:

<video controls>
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>

​
Advanced Markdown Features in Dify

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.

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.

​
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>

Hidden is not visible to users, you can set the value to pass data without user input.

​
Chart

We support rendering echarts in markdown. You can use the following syntax to render a chart:

To render a chart, start a fenced code block with ```echarts and place your chart configuration inside.

{
  "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 in markdown. You can use the following syntax to render a music sheet:

To render a music sheet, start a fenced code block with ```abc and place your ABC notation inside.

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 feature in Dify. This allows you to use template content in downstream nodes.

Edit this page | Report an issue