使用说明

项目简介

Mermaid MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器应用，它专注于将 Mermaid 文本描述转换为精美的 PNG 图像。通过提供 'generate' 工具，该服务器使得 LLM 客户端（如 AI 助手）能够轻松地生成和展示各种图表，例如流程图、时序图、类图等。

主要功能点

Mermaid 图表转 PNG 图片: 核心功能，将 Mermaid 代码渲染成高质量的 PNG 图片。
支持多种主题: 内置 "default", "forest", "dark", "neutral" 等多种 Mermaid 主题，可定制图表风格。
可自定义背景色: 允许用户自定义图表的背景颜色，满足个性化需求。
MCP 协议集成: 完全遵循 MCP 协议，易于与各种支持 MCP 的 LLM 客户端集成。
灵活的输出方式: 支持将 PNG 图片直接返回给客户端，或者保存到服务器本地磁盘。
详细的错误处理: 提供详细的错误信息，帮助用户调试和修正 Mermaid 代码。

安装步骤

前提条件: 确保已安装 Node.js 和 npm (或 yarn)。

克隆仓库: 如果需要，可以将仓库克隆到本地：

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

安装依赖: 在项目根目录下运行命令安装项目依赖：
```
npm install
```
构建项目: 运行命令编译 TypeScript 代码：
```
npm run build
```

服务器配置

MCP 服务器需要配置在 MCP 客户端中才能使用。以下是针对不同 MCP 客户端的配置示例，您需要将这些配置信息添加到您的 MCP 客户端配置中。

Claude Desktop 配置示例

"mcpServers": {
  "mermaid": {
    "command": "npx",
    "args": [
      "@peng-shawn/[email protected]"
    ]
  }
}

'server name': 'mermaid' (服务器名称，用于在客户端中引用)
'command': 'npx' (启动服务器的命令，这里使用 'npx' 运行 npm 包)
'args': '["@peng-shawn/[email protected]"]' (命令参数，指定要执行的 npm 包名称和版本)

Cursor 和 Cline 配置示例

"mcpServers": {
  "mermaid": {
    "command": "env",
    "args": [
      "CONTENT_IMAGE_SUPPORTED=false",
      "npx",
      "@peng-shawn/[email protected]"
    ]
  }
}

'server name': 'mermaid' (服务器名称)
'command': 'env' (启动命令，用于设置环境变量)
'args': '["CONTENT_IMAGE_SUPPORTED=false", "npx", "@peng-shawn/[email protected]"]' (命令参数，首先设置环境变量 'CONTENT_IMAGE_SUPPORTED=false'，然后执行 'npx' 命令)

基本使用方法

启动服务器: 在项目根目录下，根据您的 MCP 客户端配置，启动 Mermaid MCP Server。例如，可以直接运行：

npx @peng-shawn/[email protected]

或者使用 Inspector 进行调试：

npx @modelcontextprotocol/inspector node dist/index.js

在 MCP 客户端中使用: 在您的 MCP 客户端（如 Claude, Cursor, Cline）中，配置好 Mermaid MCP Server 后，即可通过客户端调用 'mermaid.generate' 工具来生成 Mermaid 图表。

调用 'generate' 工具: 在客户端中，使用类似以下的 JSON 格式调用 'generate' 工具，并传入 Mermaid 代码和其他参数：

{
  "tool_call": {
    "id": " Mermaid-1",
    "type": "tool_code",
    "tool_code": {
      "tool_name": "mermaid.generate",
      "parameters": {
        "code": "graph LR\\n    A[Start] --> B{Is it?}\\n    B -- Yes --> C[OK]\\n    B -- No ----> D[End]",
        "theme": "forest",
        "backgroundColor": "#F0F0F0"
      }
    }
  }
}

根据需要，您可以调整 'code' (Mermaid 代码), 'theme' (主题), 'backgroundColor' (背景色) 等参数。

环境变量

'CONTENT_IMAGE_SUPPORTED': 控制是否直接返回图片数据。默认为 'true' (直接返回图片)。设置为 'false' 时，图片将保存到服务器本地磁盘，客户端接收文件路径。
'MERMAID_LOG_VERBOSITY': 设置日志输出级别，数字越大日志越详细。默认为 '2' (ERROR 级别)。

关键词