08-mcp-server案例分享-零代码挑战！用 RovoDev 一键生成 Mermaid 驱动的 MCP-Server
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 对国内网络实现禁封所以之前给大家介绍的使用https://anyrouter.top 做代理已经不能使用了。我们给大家介绍另外一个叫做Rovo Dev Agents 也是类似claude code 支持cli命令的面向终端的工具。
详细网站地址大家看这个地址https://community.atlassian.com/forums/Rovo-for-Software-Teams-Beta/Introducing-Rovo-Dev-CLI-AI-Powered-Development-in-your-terminal/ba-p/3043623
关于它安装和部署有一点复杂，这里就不详细展开。如果有需求，请给我留言，点赞量大我会出一期关于Rovo Dev Agents安装使用文章。
3.AI写代码
我们首先找一个开源项目，项目的地址https://github.com/hjlarry/dify-plugin-mermaid。目前这个项目主要是基于dify的一个插件。主要的功能就是实现mermaid 转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 的优势。今天的分享就到这里结束了，我们下一篇文章见。
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
16
0- 0
已为社区贡献2条内容
所有评论(0)