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 对国内网络实现禁封所以之前给大家介绍的使用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需求文档。

我的问题

shell 复制代码

认真阅读这个项目，给出这个项目的需求分析PDR.md 文件

阅读整合代码。

然后它给我们生成了PRD需求文档了。

审查这个PRD

我们打开这个需求文档，看看它里面有什么内容。

yaml 复制代码

# 项目需求分析文档 (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复制到该项目当前目录中

接下来我的问题

shell 复制代码

请认真阅读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 代码

shell 复制代码

python3 main.py

我们知道上面的代码其实生成2种MCP模式，一种是SSE 方式，一种是基于stdio的方式。我们先测试SSE方式

cherroy studio配置

我们打开电脑的cherroy studio 配置一下SSE 方式的MCP。（这种配置方式比较简单，这里就不做详细展开）

配置完成后，点击右上角保存按钮后，我们点开工具查看有哪些工具可调用

cherroy studio 测试

我们输入我的问题

rust 复制代码

请使用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复制到浏览器打开。

bash 复制代码

https://mermaid.ink/img/c2VxdWVuY2VEaWFncmFtCiAgICBBbGljZS0-PitKb2huOiBIZWxsbyBKb2huLCBob3cgYXJlIHlvdT8KICAgIEFsaWNlLT4-K0pvaG46IEpvaG4sIGNhbiB5b3UgaGVhciBtZT8KICAgIEpvaG4tLT4-LUFsaWNlOiBIaSBBbGljZSwgSSBjYW4gaGVhciB5b3UhCiAgICBKb2huLS0-Pi1BbGljZTogSSBmZWVsIGdyZWF0IQ==?type=png

前端生成的base64 显示不太友好。

上面测试大家可以看到我们输入mermaid 格式的数据，它调用MCP 服务给我生成需要的图片了。关于生成其他格式大家可以自行测试。

基于stdio方式验证测试。

接下来我们使用字节的trae来配置这个MCP-Server. mcpServers配置文件如下

json 复制代码

{
  "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 的优势。今天的分享就到这里结束了，我们下一篇文章见。