The Mermaid Chart MCP server enables rendering Mermaid diagrams into images with comprehensive customization and hosting capabilities.
• Render diagrams: Convert Mermaid code into PNG/SVG images with support for flowcharts, sequence diagrams, Gantt charts, pie charts, Git graphs, class diagrams, user journey maps, timelines, quadrant charts, and C4 diagrams • Batch processing: Efficiently render multiple diagrams simultaneously with global or individual settings • Local file management: Save rendered images to specified directories with custom filenames and automatic directory creation • Online hosting: Generate shareable URLs through an integrated static server for easy collaboration • Extensive customization: Control themes (default, dark, forest, neutral), background colors, dimensions (width, height, DPI), and output formats • Server configuration: Manage operational settings including directories, server port, and concurrent rendering limits • IDE integration: Seamlessly integrate with MCP-compatible AI IDEs like Cursor, WindSurf, and CodeBuddy • High performance: Optimized for concurrent rendering with configurable quality settings
Provides tools for rendering Mermaid diagrams into PNG and SVG formats, supporting various chart types including flowcharts, sequence diagrams, Gantt charts, class diagrams, and more with local file saving and online access capabilities
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Mermaid Chart MCP render a flowchart showing the user login process as a PNG"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
🚀 一个强大的 Model Context Protocol (MCP) 服务器，专为将 Mermaid 图表代码渲染为高质量图片而设计
🎯 高质量渲染 - 支持 PNG、SVG、PDF 多种格式输出
🎨 多主题支持 - 内置 default、dark、forest、neutral 四种主题
☁️ 云存储集成 - 基于腾讯云服务器 + MinIO 的高性能文件存储服务
🔗 在线预览 - 自动生成在线访问链接，支持即时分享
🛡️ 安全可靠 - 文件自动过期机制，保护隐私安全
⚡ 高性能 - 使用 Puppeteer + Sharp 优化渲染质量
🔧 易于集成 - 完美兼容各大 AI 编辑器和 MCP 客户端
Related MCP server: DiagramMCP
使用 @latest 标签获取最新版本：
npx @pickstar-2002/mermaid-chart-mcp@latestnpm install -g @pickstar-2002/mermaid-chart-mcp@latestnpm install @pickstar-2002/mermaid-chart-mcp@latest在 claude_desktop_config.json 中添加以下配置：
{
"mcpServers": {
"mermaid-chart": {
"command": "npx",
"args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
}
}
}在 .cursorrules 或项目配置中添加：
{
"mcp": {
"servers": {
"mermaid-chart": {
"command": "npx @pickstar-2002/mermaid-chart-mcp@latest"
}
}
}
}在 windsurf_config.json 中配置：
{
"mcpServers": {
"mermaid-chart": {
"command": "npx",
"args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
}
}
}在项目根目录创建 .codebuddy/mcp.json：
{
"servers": {
"mermaid-chart": {
"command": "npx",
"args": ["@pickstar-2002/mermaid-chart-mcp@latest"]
}
}
}将 Mermaid 代码渲染为高质量图片文件。
参数名 | 类型 | 必需 | 默认值 | 描述 |
| string | ✅ | - | Mermaid 图表代码 |
| string | ✅ | - | 输出文件路径（包含文件名和扩展名） |
| string | ❌ |
| 输出格式： |
| number | ❌ |
| 图片宽度（像素） |
| number | ❌ |
| 图片高度（像素） |
| string | ❌ |
| 背景颜色 |
| string | ❌ |
| 主题： |
| boolean | ❌ |
| 是否上传到云存储并返回在线链接 |
| number | ❌ |
| 文件有效期（天数），最大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天后自动过期
}返回结果包含：
📁 本地文件路径
🔗 在线访问链接
📊 文件大小信息
⏰ 过期时间详情
主题 | 描述 | 适用场景 |
| 经典白色主题 | 📄 文档、报告 |
| 深色主题 | 🌙 演示、展示 |
| 森林绿主题 | 🌲 自然、环保主题 |
| 中性灰主题 | 🏢 商务、正式场合 |
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-mcpnpm installnpm run devnpm run buildnpm test欢迎贡献代码！请遵循以下步骤：
🍴 Fork 本项目
🌿 创建特性分支 (git checkout -b feature/AmazingFeature)
💾 提交更改 (git commit -m 'Add some AmazingFeature')
📤 推送到分支 (git push origin feature/AmazingFeature)
🔄 创建 Pull Request
本项目基于 MIT License 开源。
如果您遇到任何问题，请在 GitHub Issues 中提交。
感谢以下开源项目：
如有任何问题或建议，欢迎联系：
微信: pickstar_loveXX
⭐ 如果这个项目对您有帮助，请给个 Star！⭐
Made with ❤️ by pickstar-2002
将 Mermaid 代码渲染为高质量图片文件
| Name | Required | Description | Default |
|---|---|---|---|
| mermaidCode | Yes | Mermaid 图表代码 | |
| outputPath | Yes | 输出文件路径（包含文件名和扩展名） | |
| format | No | 输出格式（png, svg, pdf），默认为 png | png |
| width | No | 图片宽度（像素），默认为 1200 | |
| height | No | 图片高度（像素），默认为 800 | |
| backgroundColor | No | 背景颜色，默认为 white | white |
| theme | No | Mermaid 主题，默认为 default | default |
| uploadToMinio | No | 是否上传到MinIO存储并返回在线链接，默认为 false | |
| minioExpiryDays | No | MinIO文件有效期（天数），默认7天，最大30天，超过30天按30天计算 |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions rendering to an image file but lacks details on permissions, side effects (e.g., file system changes), error handling, or performance aspects. This is inadequate for a tool with 9 parameters and potential system impacts.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded and wastes no space, making it easy for an agent to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity (9 parameters, no output schema, and no annotations), the description is insufficient. It lacks information on return values, error conditions, and behavioral traits needed for safe and effective use. The agent would be left guessing about outcomes and side effects.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents all parameters. The description does not add any parameter-specific information beyond what the schema provides, such as usage examples or constraints. Baseline 3 is appropriate when the schema handles all parameter documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('render') and resource ('Mermaid code to high-quality image file'). It specifies the transformation from code to image, which is specific and unambiguous. However, without sibling tools, we cannot assess differentiation, so it cannot earn a perfect 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives, prerequisites, or constraints. It states what the tool does but not the context or scenarios for its application, leaving the agent without usage direction.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v1.0.0render_mermaid_chart2 fields changedInput schema / properties / minioExpiryDaysAdded value: +{
+ "default": 7,
+ "description": "MinIO文件有效期（天数），默认7天，最大30天，超过30天按30天计算",
+ "maximum": 30,
+ "minimum": 1,
+ "type": "number"
+}Input schema / properties / uploadToMinioAdded value: +{
+ "default": false,
+ "description": "是否上传到MinIO存储并返回在线链接，默认为 false",
+ "type": "boolean"
+}render_mermaid_chartWith only one tool, there is no possibility of ambiguity or overlap between tools. The single tool has a clear and distinct purpose: rendering Mermaid code to images.
Since there is only one tool, naming consistency is inherently perfect. The tool name 'render_mermaid_chart' follows a clear verb_noun pattern, but with no other tools to compare, it stands alone without inconsistency.
A single tool is too few for a server named 'Mermaid Chart MCP', which suggests a broader scope for working with Mermaid charts. Expected operations like parsing, validating, or converting chart types are missing, making the set feel incomplete and thin for the domain.
The tool surface is severely incomplete for a Mermaid chart server. While rendering is a core function, there are obvious gaps such as creating, editing, validating, or exporting charts in other formats, which limits agent workflows and causes potential dead ends.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Generate dynamic Mermaid diagrams and charts with AI assistance. Customize styles and export diagr…
Create and manage Mermaid.js flowcharts and diagrams with AI agents via MCP.
Let Claude, Cursor, or ChatGPT author Mermaid diagrams your team can read and share.
Render, verify, describe, and safely edit Mermaid diagrams through MCP.
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
