一步步教你用Mermaid制作流程图智能体完整指南

告别手动画图的烦恼，用Mermaid+Dify打造智能画图助手，一句话生成专业流程图！

核心内容：
1. 传统画图痛点与Mermaid的文本绘图优势
2. Dify平台如何结合大模型实现自然语言转图表代码
3. 完整搭建流程与典型应用场景演示

一、背景

在软件研发项目中，我们常常需要提供完整的业务流程图、系统类图、数据库 ER 图。这些图不只是形式上的交付物，更是客户内部评审、审计和归档的关键材料。

但说句实在话，画图这件事，很多人都不太愿意干。倒不是说不会画，而是太耗时。需求一变，图就得重画；协作时版本混乱；手动画图效率低，还容易出错。更别提有些同事根本不知道 Visio 怎么用，或者压根懒得打开 Draw.io。

于是问题来了——有没有一种方式，能让我们用说人话的方式，快速生成标准图表？本文分享一个我们正在尝试的方案：基于 Mermaid 和 Dify 搭建一个“会画图”的智能体，把文字需求自动转成可渲染的流程图、类图、时序图等。

二、核心工具

2.1. Mermaid：用代码写图的神器

Mermaid 是一个基于 Ja vaScript 的图形和图表工具，它采用类似 Markdown 的文本定义，让你能通过纯文本的方式动态创建和修改图表。简单来说，就是一个“文本即图表”的开源 JS 引擎。

Mermaid 官网提供了详细的指南、丰富的示例以及便捷的实时编辑器。通过 Mermaid，你可以轻松地用简洁直观的文本语法生成多种类型的图表，包括但不限于流程图、时序图、甘特图、类图、状态图、实体关系图、用户旅程图、饼图、四象限图以及 Git 图。这些图表在项目管理、系统设计、数据分析等多个领域都有广泛应用，能帮助大家更直观地理解和展示复杂信息。

以下是一些官网的简单示例，详细内容不是本文重点，大家可以自行学习。

流程图：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

时序图：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

甘特图：

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

类图：

classDiagram
    class Animal {
        +int age
        +String gender
        +isMammal()
        +mate()
    }
    class Duck {
        +String beakColor
        +swim()
        +quack()
    }
    class Fish {
        -int sizeInFeet
        -canEat()
    }
    class Zebra {
        +bool is_wild
        +run()
    }
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra

2.2. Dify：让大模型干活的平台

Dify 是一个功能强大的开源 LLM（大型语言模型）应用开发平台。它提供了便捷的多模型支持，允许开发者根据需求选择合适的模型进行应用开发。

平台内置了可视化界面，大大降低了开发门槛，让非技术人员也能轻松上手。同时，Dify 还提供丰富的 API 接口，方便开发者进行高效、灵活的编程。

通过 Dify，你可以快速构建和部署各种 AI 应用，加速 LLM 技术在各行业的落地，提升开发效率和创新能力。

三、实现思路

3.1. 核心本质

根据上面的内容，核心目标很清晰：让智能体能够理解用户的需求，并自动生成符合标准的 Mermaid 代码，然后进行渲染展示。不是让 AI 随便画个图，而是要它理解业务逻辑，输出结构正确、语义清晰、可直接渲染的 Mermaid 代码。

用户需求 → 大语言模型解析 → 生成 Mermaid 代码 → 输出渲染

3.2. 他山之石

在开始之前，调研了一下现有的一些实现，看看有什么可以借鉴的。

3.2.1. 使用大厂的 AI 应用

最直接的方式，可以使用豆包等大厂的 AI 聊天应用，告诉它流程，让它生成 Mermaid 代码。比如让豆包生成一个登录流程的 Mermaid 代码。

3.2.2. 使用智能体平台

以扣子智能体为例，分析需求文档生成 Mermaid 流程图，但感觉商店现有的智能体效果也不尽如人意。

3.3. 创建步骤

开始 → 明确需求 → 创建智能体 → 智能体编排 → 生成 Mermaid 代码 → 渲染流程图 → 是否满意？ → 是 → 下载或引用 → 结束
    ↓
    调整和优化

1. 明确需求：确定要绘制的流程图内容，包括流程的各个步骤、决策点以及它们之间的关系。例如，若要绘制用户注册流程，需明确有用户输入信息、系统验证信息、发送验证邮件等步骤，以及验证通过或失败的不同走向。
2. 创建智能体：在 Dify 平台上创建一个智能体。可以根据具体需求进行配置，比如设置其角色为“图表绘制专家”，让它能够理解并处理与图表相关的任务。
3. 智能体编排：将智能体与 Mermaid 相关的功能或服务进行集成。通常可以通过设置自定义脚本节点等方式，调用 Mermaid 的绘图库或 API 来执行绘图逻辑。
4. 生成 Mermaid 代码：将描述好的业务流程以自然语言的形式输入给智能体。智能体根据输入的业务流程描述，利用自身的能力和相关模型，自动生成符合 Mermaid 语法的代码。例如，对于用户注册流程，可能生成类似“graph TD; A[用户输入信息] --> B[系统验证信息]; B -->|验证通过| C[发送验证邮件]; B -->|验证失败| D[提示错误信息]”的 Mermaid 代码。
5. 渲染流程图：将生成的 Mermaid 代码放入支持 Mermaid 的环境中进行渲染，如 Mermaid 官网的实时编辑器、在线免费网站（如 Mermaid Live Editor）等，即可生成可视化的流程图。
6. 调整和优化：根据实际需求对生成的流程图进行调整和优化，如修改节点的样式、颜色，调整布局等，让流程图更加清晰、美观、准确地表达业务流程。
7. 下载或引用：将生成的流程图按照需要的格式下载下来，或者直接引用其链接，嵌入到文档、网页、演示文稿等中，实现信息的共享和展示。

四、实战演示

根据上面分析的实现方式，在 Dify 中创建工作流应用来实现智能体，DSL 附在文末。主要环节就是分析需求、理解需求，再根据理解的需求生成 Mermaid 代码。

4.1. 处理环节

## instruction

分析给定的需求文档，按照以下步骤将需求拆解并转换为适合输入给大模型生成流程图的文本：

1. 仔细阅读提供的需求文档，理解其核心功能和业务逻辑。
2. 对需求进行合理分段和归类，例如功能模块、输入输出、关键逻辑等。
3. 根据文档内容，识别出主要的功能模块或步骤。每个模块或步骤都应清晰地描述了用户与系统之间的交互过程。
4. 对于每一个识别出来的功能模块或步骤，用简洁明了的语言重新表述，确保这些描述能够准确反映原始需求，并且易于被大模型理解用于生成流程图。
5. 在重述时，请注意保持逻辑顺序，从用户角度出发考虑操作流程。
6. 最终输出应该是连续的一段或多段文字，而不是列表形式。避免使用任何XML标签来格式化你的答案。
7. 明确各环节的流程顺序、条件判断、数据流动等；
8. 删除冗余、模糊或重复的描述，保留有助于理解和建模的核心信息；
9. 使用统一术语，避免多种表述指代同一概念；
10. 结果应具备结构化和层次化特点，可直接作为生成流程图、类图、时序图等的基础。

## examples

省略

## 原始需求

下面是原始需求文档内容，请进行改写：

{input}

4.2. 生成环节

#Mermaid大师

## instruction

你是一个mermaid作图大师，你的任务是根据用户提供的需求或mermaid草稿，分析内容并给出建议或修改，帮助用户完善并输出更好的mermaid结果。

请按照以下步骤完成任务：

1. 仔细阅读用户提供的文本或mermaid代码。
2. 分析用户的需求或现有mermaid代码的结构和内容。
3. 根据分析结果，提出具体的改进建议或直接提供修改后的mermaid代码。
4. 确保你的回答清晰、准确，并且易于理解。
5. 输出的内容不应包含任何XML标签。

## examples

省略。包括输入示例和输出示例，每种图都要给个示例。

## 原始内容

这是用户提供的内容：

{input}

五、应用场景

• 需求理解及沟通。分析需求文档帮助团队成员理解需求，对产品来说可能找到文档中未体现的重要细节，对技术来说可以更好地理解业务需求。
• 项目交付文档中的各种图表。比如客户对这方面有需要但要求不严格的情况下。有些客户要求必须用专业软件（Visio）作图并交付源文件，则不适用，但仍然可以借鉴思路。
• 临时或非标准化图表需求。比如只是要个思路、要个草稿这种。
• 需要大量重复动作的图。比如类图有大量的成员和方法在代码或表结构中已有体现，手动画图时需要大量复制粘贴。

你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
热点：一步步教你用Mermaid制作流程图智能体完整指南要求：
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题