Skip to main content
Glama

Mermaid Chart MCP

by pickstar-2002
npmGitHub
TypeScript
MIT License
1,601
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

🎨 Mermaid Chart MCP

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

✨ 特性

  • 🎯 高质量渲染 - 支持 PNG、SVG、PDF 多种格式输出
  • 🎨 多主题支持 - 内置 default、dark、forest、neutral 四种主题
  • ☁️ 云存储集成 - 基于腾讯云服务器 + 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 代码渲染为高质量图片文件。

参数
参数名类型必需默认值描述
mermaidCodestring✅-Mermaid 图表代码
outputPathstring✅-输出文件路径（包含文件名和扩展名）
formatstring❌png输出格式：png、svg、pdf
widthnumber❌1200图片宽度（像素）
heightnumber❌800图片高度（像素）
backgroundColorstring❌white背景颜色
themestring❌default主题：default、dark、forest、neutral
uploadToMinioboolean❌false是否上传到云存储并返回在线链接
minioExpiryDaysnumber❌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 中提交。

📚 相关链接

🙏 致谢

感谢以下开源项目：

📞 联系方式

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

微信: pickstar_loveXX

⭐ 如果这个项目对您有帮助，请给个 Star！⭐

Made with ❤️ by pickstar-2002

Deploy Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

Enables AI assistants to generate and render Mermaid diagrams (flowcharts, sequence diagrams, etc.) as PNG/SVG images with local file saving and HTTP access URLs. Supports batch processing and intelligent caching for efficient diagram creation.

  1. ✨ 特性
    1. 📦 安装
      1. 快速开始（推荐）
      2. 全局安装
      3. 项目依赖
    2. 🚀 使用方法
      1. 在 Claude Desktop 中配置
      2. 在 Cursor 中配置
      3. 在 WindSurf 中配置
      4. 在 CodeBuddy 中配置
    3. 🛠️ API 参考
      1. render_mermaid_chart
    4. 🌟 支持的图表类型
      1. ☁️ 云存储服务
        1. 🚀 高性能文件存储
        2. 使用云存储
      2. 🎨 主题预览
        1. 📋 系统要求
          1. 🔧 开发
            1. 克隆项目
            2. 安装依赖
            3. 开发模式
            4. 构建项目
            5. 运行测试
          2. 🤝 贡献
            1. 📄 许可证
              1. 🐛 问题反馈
                1. 📚 相关链接
                  1. 🙏 致谢
                    1. 📞 联系方式

                      Related MCP Servers

                      • Whimsical MCP Server

                        BrockReece
                        -
                        security
                        F
                        license
                        -
                        quality
                        Enables programmatic creation of Whimsical diagrams from Mermaid markup generated by AI models like Claude through the Model Context Protocol.
                        Last updated -
                        16

                      • Mermaid-MCP

                        chasey-ai
                        -
                        security
                        A
                        license
                        -
                        quality
                        An MCP server that converts text inputs into visualized flowcharts, enabling AI clients to generate high-quality Mermaid diagrams directly from natural language descriptions or structured text.
                        Last updated -
                        7
                        MIT License
                        • Linux
                        • Apple

                      • Confluence MCP Server

                        manateeit
                        -
                        security
                        F
                        license
                        -
                        quality
                        Enables AI assistants to interact with Confluence by converting Markdown documents to professionally styled Confluence pages with Mermaid diagram support.
                        Last updated -
                        1

                      • Mermaid Chart MCP

                        echoVic
                        -
                        security
                        F
                        license
                        -
                        quality
                        A powerful Model Context Protocol server that automatically generates Mermaid diagrams from code and provides SVG beautification features.
                        Last updated -

                      View all related MCP servers

                      New MCP Servers

                      MCP directory API

                      We provide all the information about MCP servers via our MCP API.

                      curl -X GET 'https://glama.ai/api/mcp/v1/servers/pickstar-2002/mermaid-chart-mcp'

                      If you have feedback or need assistance with the MCP directory API, please join our Discord server