Dify Markdown 组件使用指南

📚 概述

Dify 的 Markdown 组件是一个功能强大的渲染工具，支持标准 Markdown 语法的同时，还扩展了多种交互式组件，如按钮、表单、思考块等。本指南详细介绍了如何使用这些组件来创建丰富的交互式内容。

🔍 基础用法

将 Markdown 字符串传递给 Markdown 组件的 content 属性即可渲染内容：

📋 支持的格式和组件

1. 标准 Markdown 语法

支持所有标准 Markdown 语法，包括：

• 标题 (# 标题) + 列表 (- 项目 或 1. 项目) + 引用 (> 引用内容) + 粗体/斜体 (**粗体**, *斜体*) + 表格 + 任务列表 (- [ ] 待办事项)

2. 代码块

使用标准 Markdown 代码块语法，支持语法高亮：

javascript console.log(‘Hello World’);

JavaScript 代码块示例：

• 基本函数示例

javascript // 箭头函数示例 const greet = (name) => { return 你好，${name}!; };

// 异步函数示例 async function fetchData() { try { const response = await fetch(‘https://api.example.com/data’); const data = await response.json(); return data; } catch (error) { console.error(‘获取数据失败:’, error); } }

• 类与对象示例

javascript // ES6 类定义 class Person { constructor(name, age) { this.name = name; this.age = age; }

sayHello() { console.log(你好，我是 ${this.name}，今年 ${this.age} 岁); }

static createAnonymous() { return new Person(‘匿名’, 0); } }

// 类的使用 const alice = new Person(‘爱丽丝’, 28); alice.sayHello();

• 现代 JavaScript 特性示例

javascript // 解构赋值 const person = { name: ‘张三’, age: 30, job: ‘开发者’ }; const { name, age } = person;

// 数组方法 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); const sum = numbers.reduce((total, num) => total + num, 0);

// 可选链操作符 const user = null; const username = user?.profile?.username || ‘游客’;

// 空值合并运算符 const count = 0; const defaultCount = count ?? 10; // 结果为 0

特殊支持的语言：

Mermaid 流程图

mermaid graph TD A[开始] –> B[处理] B –> C[结束]

ECharts 图表

echarts { “title”: { “text”: “示例图表” }, “xAxis”: { “type”: “category”, “data”: [“Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”, “Sun”] }, “yAxis”: { “type”: “value” }, “series”: [{ “data”: [820, 932, 901, 934, 1290, 1330, 1320], “type”: “line” }] }

SVG 渲染

使用 SVG 代码块可以直接渲染 SVG 图形：

svg

更多 SVG 示例：

• 基本图形

svg

• 文本和路径

svg

• 渐变和动画

svg

3. 思考块（Think Block）

创建一个可折叠的思考过程区块，带有计时器。注意：<think>** 和 </think> 标签必须独占一行，且必须严格按照以下格式**：

重要： 不要在 <think> 前后使用其他 Markdown 语法标记，思考块必须按照上述格式精确书写，否则无法正确渲染。

4. 按钮组件

创建可点击的交互式按钮。注意：按钮必须使用 HTML 标签格式：

属性说明：

• data-variant - 按钮样式（可选值：primary, secondary, outline等） + data-message - 点击按钮时发送的消息 + data-link - 点击按钮时打开的链接（如果是有效URL） + data-size - 按钮大小（可选值：small, medium, large）

按钮示例：

• 发送消息的按钮

• 打开链接的按钮

• 不同样式的按钮

5. 表单组件

创建交互式表单，支持多种输入类型。注意：表单必须使用正确的 HTML 标签格式，每个标签必须正确闭合：

重要：

• 表单必须使用 HTML 标签格式，而非普通 Markdown 格式
• 标签之间不要有空行或缩进，每个标签必须紧跟前一个标签
• 确保每个标签均正确闭合，属性值使用双引号
• 不要在标签之间添加空白行或空格，否则会被解析为 <p> 标签并导致“Unsupported tag: p”错误

表单属性：

• data-format - 提交格式，可以是 text（默认）或 json + data-api-url - 指定表单提交的服务接口URL （暂不支持） + data-method - HTTP请求方法，如 POST、GET、PUT 等（暂不支持） + data-headers - 请求头信息，JSON格式字符串（暂不支持）

提交到服务接口示例：

注意： 当前实现中，表单提交会将数据作为消息发送。如需提交到外部API，可能需要进行额外的开发实现。

支持的输入类型：

6. 图片和多媒体

图片

使用标准 Markdown 语法：

视频

音频

7. 链接

标准链接：

特殊的缩写链接（点击后发送隐藏文本作为消息）：

8. LaTeX 数学公式

支持多种格式的 LaTeX 数学公式：

行内公式

块级公式

传统 LaTeX 语法

🌟 综合示例

下面是一个结合多种组件的综合示例，注意每个组件的格式必须严格遵循要求：

echarts { “title”: { “text”: “用户年龄分布” }, “tooltip”: {}, “xAxis”: { “data”: [“18-24”, “25-34”, “35-44”, “45-54”, “55+”] }, “yAxis”: {}, “series”: [{ “name”: “用户数”, “type”: “bar”, “data”: [5, 20, 36, 10, 10] }] }

mermaid graph TD A[开始] –> B[填写表单] B –> C{是否完成?} C –>|是| D[提交] C –>|否| B D –> E[结束]

xml

import { Markdown } from '@/app/components/base/markdown'

// 在组件中使用
<Markdown content={markdownString} />

<think>
这是一个思考过程...
分析问题...
得出结论...
</think>

<button data-variant="primary" data-message="要发送的消息">按钮文本</button>

<button data-variant="primary" data-message="我需要更多信息">获取更多信息</button>

<button data-variant="outline" data-link="https://example.com" data-size="small">访问网站</button>

<button data-variant="secondary" data-message="选择了次要选项">次要选项</button>

<form data-format="text">
<label for="name">姓名</label>
<input type="text" name="name" placeholder="请输入姓名" />
<label for="description">描述</label>
<textarea name="description" placeholder="请输入描述"></textarea>
<button data-variant="primary">提交</button>
</form>

<form data-format="json" data-api-url="https://api.example.com/submit" data-method="POST" data-headers='{"Content-Type": "application/json", "Authorization": "Bearer YOUR_TOKEN"}'>
<label for="name">姓名</label>
<input type="text" name="name" placeholder="请输入姓名" />
<label for="email">电子邮件</label>
<input type="email" name="email" placeholder="请输入电子邮件" />
<button data-variant="primary">提交到API</button>
</form>

![alt文本](图片URL)

<video src="视频URL"></video>

<audio src="音频URL"></audio>

[显示文本](链接URL)

[显示文本](abbr:隐藏文本)

$E=mc^2$

$$
\int_{a}^{b} f(x) \, dx = F(b) - F(a)
$$

\(行内公式\)
\[块级公式\]

# 交互式问卷调查

这是一个使用 Dify Markdown 组件创建的交互式问卷示例。

## 思考过程

<think>
1. 首先分析用户需求
2. 设计合适的表单字段
3. 添加提交按钮和反馈机制
</think>
## 请填写以下信息

<form data-format="json">
<label for="name">您的姓名</label>
<input type="text" name="name" placeholder="请输入姓名" />
<label for="age">年龄</label>
<input type="number" name="age" placeholder="请输入年龄" />
<label for="birthday">出生日期</label>
<input type="date" name="birthday" />
<label for="country">国家/地区</label>
<input type="select" name="country" data-options='["中国", "美国", "加拿大", "英国", "澳大利亚", "其他"]' />
<label for="interests">兴趣爱好</label>
<textarea name="interests" placeholder="请描述您的兴趣爱好"></textarea>
<label for="newsletter">订阅通讯</label>
<input type="checkbox" name="newsletter" data-tip="我希望接收最新资讯" />
<button data-variant="primary">提交问卷</button>
</form>
## 按钮示例

<button data-variant="primary" data-message="我要提交问卷">提交问卷</button>
<button data-variant="outline" data-link="https://example.com/help" data-size="small">查看帮助</button>
## 更多信息

查看我们的 [隐私政策](https://example.com/privacy) 或 [联系我们](abbr:我想联系客服)。

## 数据分析结果

## 流程图

## SVG 图形示例

## JavaScript 交互示例

<Markdown content={markdownString} className="custom-markdown" />

<Markdown 
  content={markdownString} 
  customDisallowedElements={['script', 'iframe']} 
/>