Mermaid MCP Server

基本能力

产品定位

Mermaid MCP Server 是一个专门用于将 Mermaid 图表代码转换为 PNG 图像的服务，旨在为开发者和 AI 助手提供高效的图表生成工具。

核心功能

• 将 Mermaid 图表代码转换为 PNG 图像
• 支持多种图表主题（默认、森林、暗黑、中性）
• 可自定义背景颜色
• 使用 Puppeteer 进行高质量的浏览器渲染
• 实现 MCP 协议，便于与 AI 助手集成
• 灵活的图片输出选项：直接返回或保存到磁盘
• 详细的错误处理机制

适用场景

• AI 助手集成，自动生成图表
• 开发文档中的图表生成
• 教学材料中的图表制作
• 需要快速生成专业图表的开发环境

工具列表

• generate: 将 Mermaid 图表代码转换为 PNG 图像
• 参数：
  • code: 要渲染的 Mermaid 图表代码
  • theme: 图表主题（可选）
  • backgroundColor: 背景颜色（可选）
  • name: 文件名（当 CONTENT_IMAGE_SUPPORTED=false 时必需）
  • folder: 保存路径（当 CONTENT_IMAGE_SUPPORTED=false 时必需）

常见问题解答

• Claude 桌面版已经支持 Mermaid 图表，为什么还需要这个服务？ 因为该服务支持 theme 和 backgroundColor 选项，并且更容易与不同的 MCP 客户端集成。
• 为什么在使用 Cursor 时需要指定 CONTENT_IMAGE_SUPPORTED=false？ 因为 Cursor 目前不支持在响应中内联图片。

使用教程

使用依赖

确保已安装 Node.js 和 npm。

安装教程

1. 使用 npm 安装：

npx -y @peng-shawn/mermaid-mcp-server

1. 通过 Smithery 安装：

npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude

调试方式

1. 使用 inspector 运行服务器：

npx @modelcontextprotocol/inspector node dist/index.js

1. 在 Docker 环境中运行时，可能需要处理 Chrome 依赖：
2. 设置 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true 并安装 Chrome
3. 或使用 Puppeteer 自带的 Chrome

API 示例

基本用法

{
  "code": "flowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    B -->|No| D[End]"
}

带主题和背景颜色

{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

保存到磁盘

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

许可证

该项目遵循 MIT 开源许可条款，请参阅 MIT 了解完整条款。