Mermaid MCP Server

使用模型上下文协议（MCP）生成AI驱动的Mermaid图表

🎯 概述

Mermaid MCP Server 允许像 GitHub Copilot、Claude 和自定义 LLM 应用程序这样的AI助手使用自然语言生成专业架构图、流程图、序列图等。它提供了一个模型上下文协议接口，以便与AI编码助手无缝集成。

✨ 主要特性

• 🤖 AI驱动生成：使用GitHub Copilot或Claude通过自然语言创建图表
• 🎨 生产就绪SVG：符合XML标准并经过验证的SVG文件，适用于任何用途
• 📦 50多种预建模板：架构模式、工作流和数据模型
• 🔧 多种集成方式：VS Code、Claude Desktop、Cursor IDE、CLI和自定义应用
• 🚀 22种以上图表类型：流程图、序列图、ERD、状态机、甘特图等
• ⚡ 快速且可靠：使用Puppeteer进行浏览器渲染，确保一致的输出

📋 包含内容

Mermaid/
├── mermaid-mcp-server/          # 主MCP服务器
│   ├── src/                     # TypeScript源代码
│   ├── dist/                    # 编译后的JavaScript
│   ├── examples/architectures/  # 5个生产就绪SVG样本
│   ├── package.json             # 依赖项
│   └── README.md                # 服务器文档
├── Setup.md                     # 完整安装指南
├── UserGuide.md                 # 综合使用指南
└── *.md                         # 分析和文档

🚀 快速开始

预备条件

• Node.js 18或更高版本
• npm或yarn
• GitHub Copilot（推荐）或Claude Desktop

安装

方案1：从NPM安装（推荐）

# 全局安装 - 最简单的开始方式
npm install -g @narasimhaponnada/mermaid-mcp-server

# 测试安装
mermaid-mcp --version

# 现在可以与Copilot/Claude一起使用了！

方案2：从源码安装

# 克隆仓库
git clone https://github.com/Narasimhaponnada/mermaid-mcp.git
cd mermaid-mcp/mermaid-mcp-server

# 安装依赖项
npm install

# 构建服务器
npm run build

# 生成示例图表
node generate-svg-samples.js

使用GitHub Copilot配置

添加到你的VS Code设置（Cmd+Shift+P → "Preferences: 打开用户设置(JSON)"）：

如果全局通过NPM安装：

{
  "github.copilot.mcp.servers": {
    "mermaid": {
      "command": "mermaid-mcp"
    }
  }
}

如果从源码安装：

{
  "github.copilot.mcp.servers": {
    "mermaid": {
      "command": "node",
      "args": ["/绝对路径/to/mermaid-mcp-server/dist/index.js"]
    }
  }
}

使用Copilot

打开GitHub Copilot聊天并尝试：

为电子商务平台创建一个微服务架构图

生成一个显示GitHub Actions工作流的CI/CD流水线流程图

展示一个带有OAuth的用户认证序列图

📚 文档

• Setup.md - 完整的安装和配置指南（807行）
• UserGuide.md - 综合使用指南，附有示例（2,349行）
• mermaid-mcp-server/README.md - 服务器特定文档
• mermaid-mcp-server/PROJECT-SUMMARY.md - 技术深入

🎨 支持的图表类型

• 过程图：流程图、块图
• 交互：序列图、用户旅程、时间轴
• 结构：类图、ER图、C4图、架构
• 数据可视化：饼图、XY图、桑基图、雷达图、象限图、树状图
• 项目管理：甘特图、需求图、看板图
• 专业化：状态图、Git流程、思维导图、包图

🔌 集成方法

1. VS Code中的GitHub Copilot - 日常开发工作流
2. Claude Desktop - 独立图表生成
3. Cursor IDE - AI优先开发
4. 直接CLI - 自动化和脚本
5. MCP Inspector - 测试和调试
6. 自定义应用程序 - 构建自己的集成

💡 使用场景

• 📖 文档：自动为文档生成架构图
• 🔄 代码审查：在拉取请求中包含图表
• 👥 入职培训：为新开发者提供视觉指南
• 📊 技术提案：用视觉解释变更
• 🚨 事件响应：用时间轴记录事件
• 💼 客户演示：用视觉解释技术概念
• 📚 培训材料：创建一致的学习资源

🌟 示例输出

服务器生成的生产就绪SVG文件如下（包含在examples/architectures/中）：

• microservices-architecture.svg（27KB）- 带API网关的微服务
• cloud-infrastructure.svg（31KB）- 云基础设施组件
• cicd-pipeline.svg（28KB）- 完整的CI/CD工作流
• data-pipeline.svg（24KB）- ETL数据处理管道
• serverless-architecture.svg（31KB）- 事件驱动的无服务器

所有SVG都是XML验证过的，并且在浏览器、文档和演示中完美呈现。

🛠️ 技术栈

• Node.js - 服务器运行时
• TypeScript - 类型安全开发
• Puppeteer - 浏览器渲染
• Mermaid v1.0 - 图表库（通过CDN）
• MCP SDK - 模型上下文协议实现

📈 项目状态

• ✅ 生产就绪：所有核心功能已实现并测试
• ✅ 验证：所有SVG输出都符合XML标准
• ✅ 文档齐全：综合指南和示例
• ✅ 干净的代码库：43个关键文件，没有冗余
• ✅ 实战检验：修复了HTML到XML标签问题、子图语法等

🤝 贡献

欢迎贡献！请自由地：

• 报告错误和问题
• 建议新的图表类型或功能
• 提交拉取请求
• 分享使用案例和最佳实践

📄 许可证

MIT许可证 - 详情见mermaid-mcp-server/LICENSE

🙏 致谢

• Mermaid.js - 优秀的图表库
• 模型上下文协议 - 使AI工具集成成为可能
• GitHub Copilot - AI驱动的开发
• Puppeteer - 可靠的浏览器自动化

📞 支持

• 📖 文档：参阅Setup.md和UserGuide.md
• 🐛 问题：在GitHub上打开一个问题
• 💬 讨论：开始讨论以提问
• 📧 联系：通过GitHub个人资料联系

🚀 开始使用

1. 阅读安装指南：Setup.md
2. 安装和配置：按照上面的快速开始步骤操作
3. 试一试：使用Copilot生成你的第一个图表
4. 探索使用场景：查看UserGuide.md
5. 集成到你的项目：使用六种集成方法之一

---

最后更新日期：2025年10月30日
作者：Narasimha Rao Ponnada
版本：1.0.0

开始使用AI创建令人惊叹的图表吧！🎨📊✨