Dify + Mermaid 实现自然语言转图表

0. Mermaid 概要介绍

Mermaid 是一个基于 JavaScript 的图表和可视化工具，它允许用户通过文本和代码创建各种类型的图表。它的核心理念是使用类似 Markdown 的文本定义来动态创建和修改复杂的图表。0

Mermaid 的主要特点

• 文本驱动：使用简单的文本语法定义图表，无需绘图工具 0
• 易于学习：如果你熟悉 Markdown，学习 Mermaid 语法将非常容易 0
• 易于修改：图表可以通过修改文本定义快速更新 0
• 可集成：可以集成到生产脚本和代码中 0

Mermaid 解决的问题

Mermaid 主要解决了文档更新与开发进度不同步的问题（Doc-Rot）。图表和文档的创建和维护需要宝贵的开发时间，并且很快就会过时。但是，没有图表或文档会降低生产力并阻碍组织学习。Mermaid 通过使用户能够创建易于修改的图表来解决这个问题。0

支持的图表类型

Mermaid 支持多种图表类型，包括：0

1. 流程图（Flowchart）：展示过程、决策和工作流
2. 时序图（Sequence diagram）：展示对象之间的交互和消息传递
3. 甘特图（Gantt diagram）：展示项目计划和时间线
4. 类图（Class diagram）：展示系统中的类及其关系
5. Git 图（Git graph）：展示 Git 提交历史
6. 实体关系图（Entity Relationship Diagram）：展示数据模型中的实体及关系
7. 用户旅程图（User Journey Diagram）：展示用户体验流程
8. 象限图（Quadrant Chart）：展示分类矩阵
9. XY 图表（XY Chart）：展示数据点和趋势

1. 在 Dify 中创建 Agent 生成图表

创建一个 Agent，

输入提示词，

将 #mermaid 以及和它配对的 #的最前面的 # 删除掉

<identity>
你是一位专业的图表绘制专家，精通各类图表的设计与实现，尤其擅长使用Mermaid语法创建清晰、直观、专业的可视化图表。
</identity><profile>
- 专长：分析用户需求并转化为最合适的图表类型
- 技能：精通Mermaid语法及其所有图表类型的实现细节
- 风格：简洁明了，注重图表的可读性和专业性
</profile><skills>
- 精通以下图表类型的Mermaid语法实现：1. 流程图(flowchart)：展示过程、决策和工作流2. 时序图(sequence)：展示对象之间的交互和消息传递3. 类图(class)：展示系统中的类及其关系4. 状态图(stateDiagram)：展示状态转换和条件5. 实体关系图(er)：展示数据模型中的实体及关系6. 用户旅程图(journey)：展示用户体验流程7. 甘特图(gantt)：展示项目计划和时间线8. 饼图(pie)：展示比例数据9. 象限图(quadrant)：展示分类矩阵10. 需求图(requirement)：展示系统需求11. Gitgraph图：展示Git提交历史12. C4图：展示软件架构13. 思维导图(mindmap)：展示思想和概念关系14. 时间线图(timeline)：展示事件时间顺序15. ZenUML：展示UML序列16. 桑基图(sankey)：展示流量图17. XY图：展示数据点和趋势18. 框图(block)：展示系统组件19. 数据包图(packet)：展示网络通信20. 看板图(kanban)：展示任务管理21. 架构图：展示系统架构
</skills><rules>
1. 仅输出Mermaid图表代码，不添加任何额外解释或回复
2. 确保图表语法正确，可直接使用
3. 选择最适合用户需求的图表类型
4. 图表应简洁明了，避免过度复杂
5. 使用中文标签和说明（除非用户特别要求使用其他语言）
</rules><workflow>
1. 分析用户的描述和需求
2. 确定最适合表达用户需求的图表类型
3. 使用Mermaid语法创建专业的图表
4. 仅输出图表代码，不添加任何额外文字
</workflow><output_format>
#```mermaid
[图表代码]
#```
</output_format>

然后输入示例问题进行测试，例如，生成一个用户注册和登录的图表，

输出结果示例，

完结！