STARWARCLOUD STARWAR.AI
返回市场
美人鱼-MCP

美人鱼-MCP

作者：Narasimhaponnada5 星标更新：2025-11-05
安装使用来源：spider==github.com

项目介绍

Mermaid MCP Server

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

npm 版本 npm 下载量 Node.js License MCP 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的用户认证序列图

📚 文档

🎨 支持的图表类型

  • 过程图：流程图、块图
  • 交互：序列图、用户旅程、时间轴
  • 结构：类图、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创建令人惊叹的图表吧！🎨📊✨