一、背景 在软件研发项目中，我们常常需要提供完整的业务流程图、系统类图、数据库 ER 图。这些图不只是形式上的交付物，更是客户内部评审、审计和归档的关键材料。
但是画图这件事，很多人都不太愿意干，倒不是因为不会画，而是太耗时。需求一变，图就得重画，协作时版本混乱，手动画图效率低，还容易出错。更别提有些同事根本不知道 Visio 怎么用，或者压根懒得打开 Draw.io。
于是问题来了，有没有一种方式，能让我们用说人话的方式，快速生成标准图表？ 本文分享一个我们正在尝试的方案：基于 Mermaid 和 dify 搭建一个“会画图”的智能体，把文字需求自动转成可渲染的流程图、类图、时序图等。
二、核心工具 2.1. Mermaid：用代码写图的神器 Mermaid 是一个基于 JavaScript 的图形和图表工具，呈现 Markdown 启发的文本定义，以动态创建和修改图表。其实就是用纯文本绘制表述各种图表的一个工具，思想是文本即图表的 JS 开源引擎。
Mermaid 官网上为用户提供了详细的指南、丰富的示例以及便捷的实时编辑器。通过 Mermaid，用户可以轻松地使用简洁直观的文本语法生成多种类型的图表，包括但不限于流程图、时序图、甘特图、类图、状态图、实体关系图、用户旅程图、饼图、四象限图以及 Git 图等。这些图表在项目管理、系统设计、数据分析等多个领域有广泛的应用，能帮助用户更直观地理解和展示复杂的信息。
以下是一些官网的简单示例，详细的内容不是本文重点，大家可以自行学习。
流程图：
ABCD 时序图：
AliceJohnAliceJohnHello John, how are you?Great! 甘特图：
2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A taskTask in secanother taskAnother taskSectionAnotherA Gantt Diagram 类图：
Animal+int age+String gender+isMammal()+mate()Duck+String beakColor+swim()+quack()Fish-int sizeInFeet-canEat()Zebra+bool is_wild+run() 2.2. Dify：让大模型干活的平台 Dify 是一个功能强大的开源 LLM（大型语言模型）应用开发平台，它为用户提供了便捷的多模型支持，允许开发者根据需求选择合适的模型进行应用开发。
平台内置可视化界面，降低了开发门槛，使得非技术人员也能轻松上手。同时，Dify 还提供丰富的 API 接口，方便开发者进行高效、灵活的编程。
通过 Dify，用户可以快速构建和部署各种 AI 应用，加速 LLM 技术在各行业的落地应用，提升开发效率和创新能力。
三、实现思路 3.1. 核心本质 根据上面的内容，咱们的核心目标是让智能体能够理解用户的需求，并自动生成符合标准的 Mermaid 代码并进行渲染展示。不是让 AI 随便画个图，而是让它理解业务逻辑，输出结构正确、语义清晰、可直接渲染的 Mermaid 代码。
用户流程图需求大语言模型解析生成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 生成 更适合其他方式 需求特点 用户能力 效率优先级 典型工具对比 Visio、Figma、Draw.io（手动 / 半手动）
粤ICP备14082021号
免费POC，
零成本试错
