Skip to main content
Glama

Mermaid Chart MCP

by pickstar-2002
OverviewInspectNewSchemaRelated ServersScore
TypeScript
Hybrid
MIT License
73
  • Apple

🎨 Mermaid Chart MCP

npm version License: MIT Node.js Version TypeScript MCP Compatible

🚀 一个强大的 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 代码渲染为高质量图片文件。

参数

参数名

类型

必需

默认值

描述

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 中提交。

📚 相关链接

🙏 致谢

感谢以下开源项目：

📞 联系方式

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

微信: 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?

Related Resources

Tools

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 -
    28

  • 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 -
    9
    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 -
    1

View all related MCP servers

Appeared in Searches

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