Mermaid Live MCP

美人鱼生活mcp

MCP服务器用于生成 美人鱼 带有实时浏览器预览的图表。实时渲染图表，支持SVG/PNG导出。

安装

克劳德桌面版

添加到您的 Claude桌面配置 (~/Library/Application Support/Claude/claude_desktop_config.json 在macOS上）：

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

光标

添加到 .cursor/mcp.json 在项目根目录中：

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

克劳德代码

claude mcp add mermaid -- npx -y mermaid-live-mcp

帆板运动

添加到 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-live-mcp"]
    }
  }
}

工具

运作原理

当你要求你的人工智能助手创建一个图表时， mermaid-live-mcp 将：

1. 解析Mermaid语法
2. 打开带有实时预览的浏览器选项卡
3. 通过WebSocket实时将图表渲染为SVG
4. 提供SVG和PNG导出的下载按钮

图表的更新会立即推送到浏览器，无需刷新页面。

支持的图表类型

全部 美人鱼图类型 支持，包括流程图、序列图、类图、状态图、ER图、甘特图、饼图、git图、思维导图、时间线等。

发展

pnpm install
pnpm build

项目结构

许可证

麻省理工学院