Supports JavaScript code structure analysis for creating visual representations through diagrams
Automatically generates various diagram types (class, flow, sequence, state, entity-relationship) from code and renders them as Mermaid charts with optional SVG output
Provides code analysis capabilities for Python to generate visual diagrams of code structure
Renders and beautifies SVG output with multiple styling options including sketchy, colorful, minimalist, and professional themes
Analyzes TypeScript code structure to extract entities and relationships for diagram generation
Mermaid Chart MCP Server
一个专注于Mermaid图表渲染的MCP服务器,支持将Mermaid代码渲染为SVG图表。
✨ 特性
- 🎨 高质量渲染: 基于官方Mermaid库的SVG渲染
- 🔄 双模式支持: stdio(MCP标准)和SSE(Web测试)
- 🛡️ 安全性: 输入校验、沙箱环境、CORS配置
- 📊 多图表类型: 支持流程图、序列图、类图、甘特图等
- 🚀 高性能: 隔离渲染环境,避免全局污染
- 💚 健康监控: 内置健康检查和连接管理
🏗️ 项目结构
🚀 快速开始
安装依赖
开发模式
构建和运行
🔍 调试和测试
推荐使用官方的 MCP Inspector 进行调试和测试:
MCP Inspector 提供了强大的可视化界面,支持:
- 🎨 交互式工具测试
- 📊 实时请求/响应监控
- 🔧 参数配置和验证
- 📋 完整的API探索
🛠️ 可用工具
1. render_mermaid_to_svg
将Mermaid代码渲染为SVG图表。
参数:
mermaidCode
(string, 必需): Mermaid图表代码title
(string, 可选): 图表标题,默认"Mermaid图表"theme
(string, 可选): 主题,可选值: default, dark, forest, neutralcreateTempFile
(boolean, 可选): 是否创建临时SVG文件,默认true
示例:
2. validate_mermaid_syntax
验证Mermaid代码语法。
参数:
mermaidCode
(string, 必需): 要验证的Mermaid图表代码
示例:
🔧 技术特性
全局污染解决方案
使用独立的JSDOM实例和临时全局变量设置,避免在多用户并发环境中的竞态问题:
稳健的SVG标题添加
使用DOM解析器插入title元素,比字符串替换更可靠:
精细的图表类型检测
使用正则表达式精确匹配各种Mermaid图表类型:
输入校验和安全性
- 字符串长度限制(50000字符)
- 恶意内容检测(script标签、JavaScript URL等)
- 文件名清理和安全化
- CORS配置和域名白名单
SSE连接管理
- 自动连接清理和资源释放
- 优雅关闭处理
- 活动连接数量监控
- 错误处理和重连机制
🌐 Web测试界面
SSE模式提供了一个现代化的测试界面,包含:
- 🎨 美观的Material Design风格UI
- 📱 响应式设计,支持移动设备
- 🧪 实时代码测试和验证
- 📊 服务器状态监控
- 🔗 API端点信息
访问 http://localhost:3000
查看测试界面。
📡 API端点
SSE模式端点
GET /
- 测试页面GET /sse
- Server-Sent Events连接端点GET /health
- 健康检查GET /api/info
- API信息
健康检查响应
🔧 配置
环境变量
ALLOWED_ORIGINS
: CORS允许的域名列表(逗号分隔),默认为*
NODE_ENV
: 环境模式(development/production)
TypeScript配置
项目使用严格的TypeScript配置:
- 启用所有严格检查
- ESM模块系统
- Node.js 18+ 目标
- 完整的类型声明
🚢 部署建议
1. 构建优化
2. 进程管理
推荐使用PM2等进程管理器:
3. 反向代理
Nginx配置示例:
🤝 贡献
欢迎提交Issue和Pull Request来改进这个项目!
📄 许可证
MIT License
Made with ❤️ for the MCP community
This server cannot be installed
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
A powerful Model Context Protocol server that automatically generates Mermaid diagrams from code and provides SVG beautification features.
Related MCP Servers
- AsecurityAlicenseAqualityA Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.Last updated -139098JavaScriptMIT License
- -securityFlicense-qualityEnables programmatic creation of Whimsical diagrams from Mermaid markup generated by AI models like Claude through the Model Context Protocol.Last updated -7TypeScript
- AsecurityAlicenseAqualityA Model Context Protocol server that validates and renders Mermaid diagrams.Last updated -14011JavaScriptMIT License
- -securityAlicense-qualityA Model Context Protocol server that provides tools for converting SVG code to high-quality PNG and JPG images with detailed customization options.Last updated -234JavaScriptMIT License