Mermaid Chart MCP

一个强大的 Model Context Protocol (MCP) 服务器专为将 Mermaid 图表代码渲染为高质量图片而设计

特性

• 高质量渲染 - 支持 PNGSVGPDF 多种格式输出
• 多主题支持 - 内置 defaultdarkforestneutral 四种主题
• 云存储集成 - 基于腾讯云服务器 + MinIO 的高性能文件存储服务
• 在线预览 - 自动生成在线访问链接支持即时分享
• 安全可靠 - 文件自动过期机制保护隐私安全
• 高性能 - 使用 Puppeteer + Sharp 优化渲染质量
• 易于集成 - 完美兼容各大 AI 编辑器和 MCP 客户端

安装

快速开始推荐

使用 @latest 标签获取最新版本

npx @pickstar-2002/mermaid-chart-mcp@latest

全局安装

npm install -g @pickstar-2002/mermaid-chart-mcp@latest

项目依赖

npm install @pickstar-2002/mermaid-chart-mcp@latest

使用方法

在 Claude Desktop 中配置

在 claude_desktop_config.json 中添加以下配置

{
  "mcpServers": {
    "mermaid-chart": {
      "command": "npx",
      "args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
    }
  }
}

在 Cursor 中配置

在 .cursorrules 或项目配置中添加

{
  "mcp": {
    "servers": {
      "mermaid-chart": {
        "command": "npx @pickstar-2002/mermaid-chart-mcp@latest"
      }
    }
  }
}

在 WindSurf 中配置

在 windsurf_config.json 中配置

{
  "mcpServers": {
    "mermaid-chart": {
      "command": "npx",
      "args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
    }
  }
}

在 CodeBuddy 中配置

在项目根目录创建 .codebuddy/mcp.json

{
  "servers": {
    "mermaid-chart": {
      "command": "npx",
      "args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
    }
  }
}

API 参考

render_mermaid_chart

将 Mermaid 代码渲染为高质量图片文件

参数

参数名	类型	必需	默认值	描述
mermaidCode	string		-	Mermaid 图表代码
outputPath	string		-	输出文件路径包含文件名和扩展名
format	string		png	输出格式png``svg``pdf
width	number		1200	图片宽度像素
height	number		800	图片高度像素
backgroundColor	string		white	背景颜色
theme	string		default	主题default``dark``forest``neutral
uploadToMinio	boolean		false	是否上传到云存储并返回在线链接
minioExpiryDays	number		7	文件有效期天数最大30天

示例

// 基础用法
{
  "mermaidCode": "graph TD\n    A[开始] --> B[处理]\n    B --> C[结束]",
  "outputPath": "./output/flowchart.png"
}

// 高级用法 - 启用云存储
{
  "mermaidCode": "sequenceDiagram\n    Alice->>Bob: Hello Bob!\n    Bob-->>Alice: Hello Alice!",
  "outputPath": "./output/sequence.png",
  "format": "png",
  "theme": "dark",
  "width": 1600,
  "height": 1000,
  "uploadToMinio": true,
  "minioExpiryDays": 14
}

支持的图表类型

• 流程图 (Flowchart)
• 序列图 (Sequence Diagram)
• 甘特图 (Gantt Chart)
• 类图 (Class Diagram)
• 状态图 (State Diagram)
• 饼图 (Pie Chart)
• Git 图 (Git Graph)
• 用户旅程图 (User Journey)
• 需求图 (Requirement Diagram)

云存储服务

高性能文件存储

本项目集成了基于腾讯云服务器 + MinIO打造的高性能文件存储服务

• ** 全球加速** - 基于腾讯云 CDN 的全球节点加速
• ** 安全可靠** - 企业级安全防护数据加密传输
• ** 极速访问** - 毫秒级响应支持高并发访问
• ** 即时分享** - 生成在线预览链接支持跨平台分享
• ** 智能管理** - 自动文件过期清理节省存储空间
• ** 成本优化** - 按需使用无需预付费用

使用云存储

// 启用云存储上传
{
  "mermaidCode": "graph LR\n    A --> B --> C",
  "outputPath": "./chart.png",
  "uploadToMinio": true,
  "minioExpiryDays": 7  // 7天后自动过期
}

返回结果包含

• 本地文件路径
• 在线访问链接
• 文件大小信息
• 过期时间详情

主题预览

主题	描述	适用场景
default	经典白色主题	文档报告
dark	深色主题	演示展示
forest	森林绿主题	自然环保主题
neutral	中性灰主题	商务正式场合

系统要求

• Node.js >= 18.0.0
• 操作系统: Windows, macOS, Linux
• 内存: 建议 >= 2GB
• 磁盘空间: >= 500MB用于 Puppeteer 浏览器

开发

克隆项目

git clone https://github.com/pickstar-2002/mermaid-chart-mcp.git
cd mermaid-chart-mcp

安装依赖

npm install

开发模式

npm run dev

构建项目

npm run build

运行测试

npm test

贡献

欢迎贡献代码请遵循以下步骤

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

许可证

本项目基于 MIT License 开源

问题反馈

如果您遇到任何问题请在 GitHub Issues 中提交

相关链接

• Mermaid 官方文档
• Model Context Protocol
• Puppeteer 文档
• MinIO 文档

致谢

感谢以下开源项目

• Mermaid - 强大的图表生成库
• Puppeteer - 无头浏览器控制
• Sharp - 高性能图像处理
• MinIO - 高性能对象存储

---

联系方式

如有任何问题或建议欢迎联系

微信: pickstar_loveXX

---

** 如果这个项目对您有帮助请给个 Star**

Made with by pickstar-2002