xJx009/mermaid-mcp-server

Mermaid MCP服务器

将Mermaid图表代码转换为PNG图像或SVG文件的MCP服务器，支持Claude Desktop集成。

功能

• 🎨 将Mermaid代码转换为PNG/SVG图片
• 🎯 支持多种主题（默认、森林、暗色、中性）
• 🌈 可自定义背景颜色
• 📊 支持所有Mermaid图表类型
• 🖼️ 高质量无头浏览器渲染

安装

1. 创建项目

mkdir mermaid-mcp-server
cd mermaid-mcp-server

2. 创建package.json

{
  "name": "mermaid-mcp-server",
  "version": "0.1.0",
  "type": "module",
  "main": "server.js",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^0.4.0",
    "puppeteer": "^21.5.0"
  }
}

3. 安装依赖

npm install

4. 创建server.js

将提供的服务器代码保存为server.js文件。

配置

Claude Desktop配置

编辑配置文件：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mermaid": {
      "command": "node",
      "args": ["C:/path/to/mermaid-mcp-server/server.js"],
      "env": {
        "CONTENT_IMAGE_SUPPORTED": "true"
      }
    }
  }
}

使用

重启Claude Desktop后，可以请求：

• "画一个流程图显示用户登录过程"
• "创建一个序列图展示API调用流程"
• "生成一个类图表示系统架构"
• "画个甘特图显示项目时间线"

支持的图表类型

• 流程图 (flowchart)
• 序列图 (sequenceDiagram)
• 类图 (classDiagram)
• 状态图 (stateDiagram)
• ER图 (erDiagram)
• 甘特图 (gantt)
• 饼图 (pie)
• 用户旅程图 (journey)

参数选项

• theme: default、forest、dark、neutral
• backgroundColor: white、transparent、#F0F0F0
• outputFormat: png、svg

环境变量

• CONTENT_IMAGE_SUPPORTED:
  • true (默认): 直接返回图片
  • false: 保存到文件，需要name和folder参数

示例代码

流程图

flowchart TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[结束]
    C --> D

序列图

sequenceDiagram
    用户->>系统: 登录请求
    系统->>数据库: 验证用户
    数据库-->>系统: 返回结果
    系统-->>用户: 登录成功

故障排除

服务器启动失败：

• 确认Node.js版本≥18
• 检查Puppeteer是否正确安装
• 验证系统支持无头浏览器

图表生成失败：

• 检查Mermaid代码语法
• 确认网络可访问CDN
• 查看错误日志信息

测试服务器：

node server.js

许可证

MIT License