1.前言
Mermaid 是一种基于文本的图表生成工具，它通过特定的语法将代码转化为流程图、时序图等可视化形式，帮助开发者和设计者直观地呈现复杂概念。Mermaid 的核心特点是“Diagrams as Code”，即通过编写类似 Markdown 的简单语法来定义图表，由引擎自动渲染为可交互的矢量图形。
Mermaid 是一款强大且灵活的图表生成工具，通过简单的文本语法，用户可以轻松创建多种类型的图表，适用于各种技术和非技术场景。无论是用于软件开发、项目管理还是团队协作，Mermaid 都能提供高效的解决方案。
之前给大家介绍过dify使用用Kimi-K2+Mermaid 神器，一键生成系统架构图 感兴趣的小伙伴可以看我之前的文档利用dify实现系统架构图。 本期给大家介绍如何制作一个基于Mermaid实现一个MCP.关于MCP-Server如何制作可以看我之前的几期文章。比如：
mcp-server案例分享-5 分钟搭建 AI 智能体！用 MCP Server 一键生成上市公司财报 HTML
我们看一下这个MCP实现的效果。
那么这样的MCP是如何制作的呢？下面带大家零代码手把手教你实现这样的MCP-Sever. 话不多说下面我们进入开始实操阶段。
2.代码工具
之前给大家介绍过使用免费的claude code 来实现代码的编写，上周claude 对国内网络实现禁封所以之前给大家介绍的使用anyrouter.top 做代理已经不能使用了。我们给大家介绍另外一个叫做Rovo Dev Agents 也是类似claude code 支持cli命令的面向终端的工具。
详细网站地址大家看这个地址community.atlassian.com/forums/Rovo…
关于它安装和部署有一点复杂，这里就不详细展开。如果有需求，请给我留言，点赞量大我会出一期关于Rovo Dev Agents安装使用文章。
3.AI写代码
我们首先找一个开源项目，项目的地址github.com/hjlarry/dif… 转PNG、转jpg、转SVG、转PDF文件。目前项目也刚刚开源，所以点赞星不多，大家觉的项目不错开源给作者点赞。
编写PRD文档
我们首先拿到项目后先不着急写代码，写让AI帮我把原来的代码分析一下，看看代码具体的哪些功能。这样我们可以先让AI帮我们生产PRD需求文档。
我的问题
认真阅读这个项目，给出这个项目的需求分析PDR.md 文件阅读整合代码。
然后它给我们生成了PRD需求文档了。
审查这个PRD
我们打开这个需求文档，看看它里面有什么内容。
# 项目需求分析文档 (Product Requirements Document)## 1. 项目概述### 1.1 项目名称Mermaid Converter - Dify插件### 1.2 项目描述一个用于Dify平台的插件，能够将Mermaid图表代码转换为多种格式的图像文件（PNG、JPG、PDF、SVG）。该插件利用mermaid.ink公共API服务，为Dify工作流和智能体交互提供可视化图表生成能力。### 1.3 项目背景- **目标用户**: Dify平台用户，包括开发者、产品经理、技术文档编写者- **业务价值**: 提供程序化生成可视化图表的能力，增强Dify工作流的表达能力- **技术背景**: 基于Dify插件SDK开发，使用Python 3.12运行时## 2. 功能需求### 2.1 核心功能#### 2.1.1 Mermaid代码转换- **功能描述**: 接收Mermaid语法代码，转换为指定格式的图像- **输入**: Mermaid图表语法代码（字符串）- **输出**: 图像文件（二进制数据）- **支持的图表类型**: 所有Mermaid支持的图表类型（流程图、序列图、甘特图等）#### 2.1.2 多格式输出支持- **PNG格式**: 通用图像格式，适合一般用途- **JPG格式**: 适合照片类图像- **SVG格式**: 可缩放矢量图形，适合高质量显示- **PDF格式**: 适合文档嵌入和打印#### 2.1.3 主题定制- **默认主题**: 标准Mermaid样式- **深色主题**: 适合深色背景环境- **中性主题**: 简洁的单色风格- **森林主题**: 绿色调主题#### 2.1.4 自定义选项- **背景颜色**: 支持十六进制颜色代码和命名颜色- **图像尺寸**: 可指定宽度和高度（像素）- **透明背景**: 支持透明背景设置### 2.2 技术功能#### 2.2.1 错误处理- **语法验证**: 检测无效的Mermaid语法- **网络异常**: 处理API服务不可用情况- **超时处理**: 处理转换超时情况- **大小限制**: 处理图表过大的情况#### 2.2.2 代码预处理- **Markdown清理**: 自动移除代码块标记（```mermaid）- **编码处理**: Base64 URL安全编码- **参数验证**: 验证所有输入参数的有效性## 3. 非功能需求### 3.1 性能要求- **响应时间**: 图表转换应在30秒内完成- **并发处理**: 支持多个并发转换请求- **内存使用**: 最大内存使用限制为256MB### 3.2 可靠性要求- **错误恢复**: 优雅处理所有异常情况- **日志记录**: 完整的操作日志和错误追踪- **超时机制**: 防止长时间阻塞### 3.3 安全要求- **数据隐私**: 不存储用户的图表代码- **API安全**: 使用HTTPS协议与外部服务通信- **输入验证**: 严格验证所有用户输入### 3.4 兼容性要求- **Dify版本**: 兼容Dify插件SDK 0.3.0+- **Python版本**: 支持Python 3.12- **架构支持**: 支持AMD64和ARM64架构## 4. 技术架构### 4.1 插件架构```mermaid_converter/├── main.py # 插件入口点├── manifest.yaml # 插件配置清单├── provider/ # 工具提供者│ ├── mermaid_provider.py # 提供者实现│ └── mermaid_provider.yaml # 提供者配置└── tools/ # 工具实现 ├── mermaid_converter.py # 转换工具实现 └── mermaid_converter.yaml # 工具配置```### 4.2 核心组件#### 4.2.1 MermaidProvider- **职责**: 工具提供者，负责凭证验证- **实现**: 继承自ToolProvider基类- **验证**: 当前版本无需特殊凭证#### 4.2.2 MermaidConverterTool- **职责**: 核心转换逻辑实现- **实现**: 继承自Tool基类- **API集成**: 与mermaid.ink服务集成### 4.3 外部依赖- **mermaid.ink API**: 免费的Mermaid图表渲染服务- **requests库**: HTTP客户端库- **base64模块**: 编码处理- **urllib.parse**: URL参数处理## 5. 接口设计### 5.1 工具参数接口| 参数名 | 类型 | 必需 | 默认值 | 描述 ||--------|------|------|--------|------|| mermaid_code | string | 是 | - | Mermaid图表语法代码 || output_format | select | 否 | png | 输出格式：png/jpg/svg/pdf || theme | select | 否 | default | 主题：default/dark/neutral/forest || background_color | string | 否 | transparent | 背景颜色（十六进制或命名颜色） || width | number | 否 | - | 图像宽度（像素） || height | number | 否 | - | 图像高度（像素） |### 5.2 输出接口- **成功输出**: ToolInvokeMessage.blob（包含图像数据和元数据）- **错误输出**: ToolInvokeMessage.text（包含错误信息）### 5.3 API集成接口- **PNG/JPG**: `https://mermaid.ink/img/{encoded_diagram}`- **SVG**: `https://mermaid.ink/svg/{encoded_diagram}`- **PDF**: `https://mermaid.ink/pdf/{encoded_diagram}`## 6. 用户体验设计### 6.1 使用场景1. **工作流集成**: 在Dify工作流中生成图表2. **智能体交互**: LLM生成Mermaid代码并转换为图像3. **文档生成**: 自动化文档中的图表生成### 6.2 错误提示- **语法错误**: "Invalid Mermaid syntax: [详细错误信息]"- **网络错误**: "Connection error: Unable to reach mermaid.ink service"- **超时错误**: "Conversion timeout - mermaid.ink took too long to respond"- **大小错误**: "Diagram too large for API"### 6.3 多语言支持- **英语**: 完整支持- **中文**: 完整支持- **日语**: 基础支持- **葡萄牙语**: 基础支持## 7. 质量保证### 7.1 测试策略- **单元测试**: 核心转换逻辑测试- **集成测试**: API集成测试- **错误场景测试**: 各种异常情况测试### 7.2 监控和日志- **操作日志**: 记录所有转换操作- **错误日志**: 详细的错误信息和堆栈跟踪- **性能监控**: 转换时间和成功率统计### 7.3 文档质量- **用户指南**: 详细的使用说明和示例- **故障排除**: 常见问题和解决方案- **API文档**: 完整的参数说明## 8. 部署和发布### 8.1 打包要求- **插件包**: 生成.difypkg格式的插件包- **依赖管理**: requirements.txt中定义所有依赖- **配置文件**: manifest.yaml包含完整的插件元数据### 8.2 发布流程- **版本管理**: 语义化版本控制- **自动化发布**: GitHub Actions自动化打包和PR创建- **市场发布**: 提交到Dify插件市场### 8.3 更新策略- **向后兼容**: 保持API接口的向后兼容性- **渐进式更新**: 支持平滑的版本升级- **文档同步**: 确保文档与代码版本同步## 9. 风险评估### 9.1 技术风险- **外部依赖**: mermaid.ink服务的可用性风险- **API变更**: 外部API接口变更的风险- **性能瓶颈**: 大型图表转换的性能风险### 9.2 业务风险- **服务中断**: 外部服务中断影响用户体验- **使用限制**: 免费服务可能存在使用限制- **数据隐私**: 第三方服务的数据处理风险### 9.3 缓解措施- **错误处理**: 完善的错误处理和用户提示- **文档说明**: 清晰的限制说明和替代方案- **隐私政策**: 明确的数据处理和隐私政策## 10. 项目时间线### 10.1 开发阶段- ✅ **需求分析**: 已完成- ✅ **架构设计**: 已完成- ✅ **核心开发**: 已完成- ✅ **功能测试**: 已完成### 10.2 发布阶段- ✅ **文档编写**: 已完成- ✅ **打包配置**: 已完成- ✅ **CI/CD配置**: 已完成- 🔄 **市场发布**: 进行中### 10.3 维护阶段- **用户反馈**: 持续收集和处理- **功能增强**: 根据用户需求迭代- **安全更新**: 定期安全检查和更新---**文档版本**: 1.0 **创建日期**: 2024年 **最后更新**: 2024年 **负责人**: hjlarry文档主要功能都是可以的，创建日期 和最后更新 日期不对，其他没什么毛病。
代码生成
我将之前的一个最简单的MCP 文档和MCP demo复制到该项目当前目录中
接下来我的问题
请认真阅读03-mcp-server案例分享-手搓一个MCP-server拥有属于自己的MCP.md 这个文档，以及mcp-server-demo文件夹的项目。接下来请基于上面生成的PDR.md文档的需求实现一个mermaid功能的MCP服务，请根据上面是要求实现。rovodev基于我的文档和程序DEMO 开始阅读理解什么是MCP-server了
后面就是它自己编写的代码。
打开文件夹我们看一下生成的内容
上面部分是代码片段。pyproject.toml 和README.md 都给我生成好了。
生成的内容有模有样的。全程不超过10分钟就给我搞定了一个基于mermaid的MCP. 接下来有一下小的细节代码调整，我同样用对话的方式来让它辅助修改。这里就不做详细展开。
后面我们就开始测试一下，验证它是否可行。
代码验证
启动
接下来我们启动一个main.py 代码
python3 main.py我们知道上面的代码其实生成2种MCP模式，一种是SSE 方式，一种是基于stdio的方式。我们先测试SSE方式
cherroy studio配置
我们打开电脑的cherroy studio 配置一下SSE 方式的MCP。（这种配置方式比较简单，这里就不做详细展开）
配置完成后，点击右上角保存按钮后，我们点开工具 查看有哪些工具可调用
cherroy studio 测试
我们输入我的问题
请使用mcp-mermaid-server 工具将“sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!” 代码转成PNG图片我们看一下服务端请求。
我们把后端请求的URL复制到浏览器打开。
https://mermaid.ink/img/c2VxdWVuY2VEaWFncmFtCiAgICBBbGljZS0-PitKb2huOiBIZWxsbyBKb2huLCBob3cgYXJlIHlvdT8KICAgIEFsaWNlLT4-K0pvaG46IEpvaG4sIGNhbiB5b3UgaGVhciBtZT8KICAgIEpvaG4tLT4-LUFsaWNlOiBIaSBBbGljZSwgSSBjYW4gaGVhciB5b3UhCiAgICBKb2huLS0-Pi1BbGljZTogSSBmZWVsIGdyZWF0IQ==?type=png前端生成的base64 显示不太友好。
上面测试大家可以看到我们输入mermaid 格式的数据，它调用MCP 服务给我生成需要的图片了。关于生成其他格式大家可以自行测试。
基于stdio方式验证测试。
接下来我们使用字节的trae来配置这个MCP-Server. mcpServers配置文件如下
{ "mcpServers": { "mcp-mermaid-server-stdio": { "command": "uv", "args": [ "--directory", "F:\\temp\\dify-plugin-mermaid\\mcp-mermaid-server", "run", "main_stdio.py" ] } }}配置完成后。
我们找同样上面的问题调用这个MCP
生成的图片是基于base64的。我们复制这个base64值信息复制到一个支持base64转图片的工具
好了通过上面2个代码，两种方式实现的MCP-Server服务。全程我一行代码都没有写，哈哈是不是挺爽的。 一个MCP-Server就这样聊天聊出来了。
4.总结
今天主要带大家了解并实现了使用 Rovo Dev Agents 借助开源项目，零代码实现一个基于 Mermaid 的 MCP - Server 服务的全流程。借助 MCP - Server，我们解决了在图表生成方面操作复杂、缺乏统一工具等问题，为开发者和设计者提供了一种高效、便捷的可视化图表生成方式。
通过本文的方案，开发者可以轻松搭建自己的基于 Mermaid 的 MCP - Server 服务，为软件开发、项目管理和团队协作等场景提供高效的图表生成能力。感兴趣的小伙伴可以按照本文步骤去尝试制作自己的 MCP 服务，在实际应用中充分发挥 Mermaid 和 MCP - Server 的优势。今天的分享就到这里结束了，我们下一篇文章见。
