AI导哈

AI图表生成服务

Mermaid MCP Server是一款基于AI的自然语言图表生成工具，支持22+种图表类型，适用于文档、代码审查、技术提案等多种场景。

  • by Narasimhaponnada
  • JavaScript
  • 本地部署
  • 53 星标
  • 更新于
在 GitHub 查看 Narasimhaponnada/mermaid-mcp

使用说明

Mermaid MCP服务器

使用模型上下文协议（MCP）生成人工智能驱动的美人鱼图

🎯 概述

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

✨ 主要特点

  • 🤖 人工智能发电：使用GitHub Copilot或Claude使用自然语言创建图表
  • 🎨 生产就绪的SVG：XML兼容的、经过验证的SVG文件可供任何使用
  • 📦 50+预构建模板：体系结构模式、工作流和数据模型
  • 🔧 多重集成：VS Code、Claude Desktop、Cursor IDE、CLI和自定义应用程序
  • 🚀 22+图表类型：流程图、序列图、ERD、状态机、甘特图等
  • ⚡ 快速可靠：使用Puppeteer进行基于浏览器的渲染，以获得一致的输出

📋 包含什么

Mermaid/
├── mermaid-mcp-server/          # Main MCP server
│   ├── src/                     # TypeScript source code
│   ├── dist/                    # Compiled JavaScript
│   ├── examples/architectures/  # 5 production-ready SVG samples
│   ├── package.json             # Dependencies
│   └── README.md                # Server documentation
├── Setup.md                     # Complete setup guide
├── UserGuide.md                 # Comprehensive usage guide
└── *.md                         # Analysis and documentation

🚀 快速开始

先决条件

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

安装

选项1：从NPM安装（推荐）

# Global installation - easiest way to get started
npm install -g @narasimhaponnada/mermaid-mcp-server

# Test the installation
mermaid-mcp --version

# The server is now ready to use with Copilot/Claude!

选项2：从源代码安装

# Clone the repository
git clone https://github.com/Narasimhaponnada/mermaid-mcp.git
cd mermaid-mcp/mermaid-mcp-server

# Install dependencies
npm install

# Build the server
npm run build

# Generate sample diagrams
node generate-svg-samples.js

使用GitHub Copilot进行配置

添加到您的VS代码设置(Cmd+Shift+P → “首选项：打开用户设置（JSON）”）：

如果通过NPM全球安装：

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

如果从源代码安装：

{
  "github.copilot.mcp.servers": {
    "mermaid": {
      "command": "node",
      "args": ["/absolute/path/to/mermaid-mcp-server/dist/index.js"]
    }
  }
}

与Copilot一起使用

打开GitHub Copilot聊天并尝试：

Create a microservices architecture diagram for an e-commerce platform

Generate a CI/CD pipeline flowchart showing GitHub Actions workflow

Show me a sequence diagram for user authentication with OAuth

📚 文档

🎨 支持的图表类型

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

🔌 集成方法

  1. VS代码中的GitHub副本 -日常开发工作流程
  2. 克劳德桌面 -独立图生成
  3. 光标IDE -AI优先发展
  4. 直接命令行界面 -自动化和脚本
  5. MCP检查员 -测试和调试
  6. 自定义应用程序 -构建自己的集成

💡 用例

  • 📖 文档：自动生成文档的架构图
  • 🔄 代码审查：在pull请求中包含图表
  • 👥 入职：面向新开发人员的视觉指南
  • 📊 技术建议书：用视觉效果解释变化
  • 🚨 事件响应：用时间表记录事件
  • 💼 客户演示文稿：直观地解释技术概念
  • 📚 培训材料：创建一致的学习资源

🌟 输出示例

服务器生成如下生产就绪的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 -类型安全开发
  • 操纵者 -基于浏览器的渲染
  • 美人鱼v10 -图表库（通过CDN）
  • MCP-SDK -模型上下文协议实现

📈 项目状态

  • ✅ 生产准备就绪：所有核心功能均已实施和测试
  • ✅ 已验证：所有SVG输出都符合XML
  • ✅ 已记录：综合指南和示例
  • ✅ 干净的代码库：43个基本文件，无损坏
  • ✅ 战斗测试：修复了HTML到XML标记、子图语法等问题。

🤝 贡献

欢迎投稿！请随时：

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

📄 许可证

MIT许可证-请参阅 美人鱼mcp服务器/许可证 详情

🙏 致谢

  • Mermaid.js -惊人的图表库
  • 模型上下文协议 -实现AI工具集成
  • GitHub Copilot -人工智能驱动的开发
  • 操纵者 -可靠的浏览器自动化

📞 支持

  • 📖 文件：见 设置.md 和 用户指南.md
  • 🐛 问题：在GitHub上打开一个问题
  • 💬 讨论：开始问题讨论
  • 📧 联系方式：通过GitHub个人资料

🚀 入门指南

  1. 阅读设置指南: 设置.md
  2. 安装和配置：按照上面的快速开始
  3. 试试看：使用Copilot生成第一张图表
  4. 探索用例：检查 用户指南.md
  5. 融入您的项目：使用6种集成方法之一

最后更新：2025年10月30日
作者：纳拉辛哈·拉奥·蓬纳达
版本: 1.0.0

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

相关 MCP