Mermaid MCP Server
2025.03.24
0
JavaScript图表生成可视化工具开发效率内容生成
Mermaid MCP Server 是一个基于 Model Context Protocol (MCP) 的服务，专门用于将 Mermaid 图表代码转换为 PNG 图像。该服务为 AI 助手和其他应用程序提供了从文本描述生成可视化图表的能力，支持多种主题和自定义背景颜色，使用 Puppeteer 进行高质量的浏览器渲染。
View on GitHub
Overview
基本能力
产品定位
Mermaid MCP Server 是一个专门用于将 Mermaid 图表代码转换为 PNG 图像的服务，旨在为 AI 助手和其他应用程序提供可视化图表生成的能力。
核心功能
- 将 Mermaid 图表代码转换为 PNG 图像
- 支持多种图表主题（默认、森林、暗黑、中性）
- 可自定义背景颜色
- 使用 Puppeteer 进行高质量的浏览器渲染
- 实现 MCP 协议，便于与 AI 助手集成
- 灵活的输出来源：直接返回图像或保存到磁盘
- 错误处理，提供详细的错误信息
适用场景
- AI 助手生成可视化图表
- 开发者在应用程序中嵌入 Mermaid 图表
- 需要将 Mermaid 代码转换为图像的任何场景
工具列表
generate: 将 Mermaid 图表代码转换为 PNG 图像- 参数：
code: 要渲染的 Mermaid 图表代码theme: (可选) 图表主题。选项: "default", "forest", "dark", "neutral"backgroundColor: (可选) 图表背景颜色，例如 'white', 'transparent', '#F0F0F0'name: 生成文件的名称（当 CONTENT_IMAGE_SUPPORTED=false 时必需）folder: 保存图像的绝对路径（当 CONTENT_IMAGE_SUPPORTED=false 时必需）
常见问题解答
- Claude desktop 已经通过 canvas 支持 mermaid，为什么还需要这个服务？
是的，但它不支持
theme和backgroundColor选项。此外，拥有专用服务器使得使用不同的 MCP 客户端创建 mermaid 图表更加容易。 - 为什么在使用 Cursor 时需要指定 CONTENT_IMAGE_SUPPORTED=false？ Cursor 目前还不支持响应中的内联图像。
使用教程
使用依赖
确保已安装 Node.js 和 npm。
安装教程
- 使用 npm 安装：
bash npx -y @peng-shawn/mermaid-mcp-server - 通过 Smithery 安装：
bash npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude
调试方式
- 使用 inspector 运行服务器进行测试和调试：
bash npx @modelcontextprotocol/inspector node dist/index.js - 服务器将启动并在 stdio 上监听 MCP 协议消息。
Docker 和 Smithery 环境
在 Docker 容器中运行时，可能需要处理 Chrome 依赖项：
1. 服务器默认尝试使用 Puppeteer 的捆绑浏览器
2. 如果遇到浏览器相关错误，有两种选择：
- 选项 1: 在 Docker 镜像构建期间：
- 安装 Puppeteer 时设置 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
- 在 Docker 容器中安装 Chrome/Chromium
- 在运行时设置 PUPPETEER_EXECUTABLE_PATH 指向 Chrome 安装路径
- 选项 2: 使用 Puppeteer 的捆绑 Chrome：
- 确保 Docker 容器具有 Chrome 所需的依赖项
- 无需设置 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
- 代码将自动使用捆绑的浏览器
对于 Smithery 用户，最新版本应该无需额外配置即可工作。