Mermaid MCP Server

Mermaid MCP Server

一个 Model Context Protocol (MCP) 服务，提供用于验证和渲染 Mermaid 图表的工具。

此服务允许 AI 助手（如 Roo）与 Mermaid 图表交互、检查语法、将图表渲染为 SVG 格式，并访问文档链接。

功能

• 验证 Mermaid 语法： 检查提供的 Mermaid 代码是否符合语法。
• 渲染为 SVG： 将有效的 Mermaid 代码转换为 SVG 图像格式。
• 获取文档链接： 提供 Mermaid 官方文档的链接。

前置条件

• Node.js（建议使用 v18 或更高版本）
• npm 或 yarn
• 兼容的 MCP 客户端（例如 Roo Cline VSCode Extension）

此服务在内部使用 @mermaid-js/mermaid-cli，它依赖 Puppeteer 来渲染图表。如果未找到兼容版本的 Chromium，Puppeteer 会下载该版本。请确保首次运行或更新依赖项时网络连接正常。

安装

你可以全局安装此服务，也可以在项目中本地安装。不过，若要配合 Roo Cline 等 MCP 客户端使用，通常通过客户端的设置文件进行配置，而不是直接安装到开发项目中。

配合 Roo Cline 使用（推荐）：

1. 全局安装软件包（或记下本地安装时的路径）：

   npm install -g mermaid-mcp-server
   

   （或者，克隆此代码库并构建后，记下 build/index.js 文件的绝对路径。）

2. 配置 Roo Cline： 打开 Roo Cline 的 MCP 设置文件。文件位置取决于你的操作系统和 VSCode 配置：

   • macOS： ~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/mcp_settings.json
   • Windows： %APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\mcp_settings.json
   • Linux： ~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/mcp_settings.json

   将以下配置添加到 mcpServers 对象中：

   {
     "mcpServers": {
       // ... other servers
       "mermaid-mcp-server": {
         // If installed globally:
         "command": "mermaid-mcp-server",
         // If built from source, use the absolute path:
         // "command": "node",
         // "args": ["/absolute/path/to/mermaid-mcp-server/build/index.js"],
         "disabled": false,
         "alwaysAllow": [] // Add tool names here if you want to skip confirmation
       }
       // ... other servers
     }
   }
   

   如果你从源代码构建了此服务，请将 /absolute/path/to/mermaid-mcp-server/build/index.js 替换为实际路径。

3. 重启 VSCode 或重新加载窗口，确保 Roo Cline 加载新的服务配置。

可用工具

配置完成后，AI 助手即可使用以下工具：

• validate_mermaid：

  • 说明： 验证 Mermaid 语法，但不进行渲染。
  • 输入： { "mermaid_code": "string" }
  • 输出： 表明成功或失败的文本，以及错误详情。

• render_mermaid_svg：

  • 说明： 将 Mermaid 代码渲染为 SVG 格式。
  • 输入： { "mermaid_code": "string" }
  • 输出： 以文本形式提供的 SVG 内容（mimeType: 'image/svg+xml'）或错误消息。

• get_mermaid_docs_link：

  • 说明： 获取 Mermaid 官方文档的链接。
  • 输入： {}（无需输入）
  • 输出： 包含 URL 的文本。

开发

1. 克隆仓库：

   git clone https://github.com/TanisukeGoro/mermaid-mcp-server.git
   cd mermaid-mcp-server
   

2. 安装依赖：

   npm install
   

3. 构建服务：

   npm run build
   

   （开发期间使用 npm run watch 自动重新构建。）

4. 使用 MCP Inspector 进行测试：

   npm run inspector
   

贡献

欢迎贡献！请提交 issue 或拉取请求。

许可证

MIT