AI导哈

Mermaid图表实时生成服务

提供Mermaid图表的实时生成和浏览器预览功能，支持SVG/PNG导出。

  • by iishyfishyy
  • TypeScript
  • 本地部署
  • 13 星标
  • 更新于
在 GitHub 查看 iishyfishyy/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"]
    }
  }
}

工具

工具 说明
generate_mermaid 根据Mermaid语法生成图表，并在浏览器中打开实时预览
update_diagram 替换图表的Mermaid语法并重新呈现实时预览
list_diagrams 列出当前会话中生成的所有图表
export_diagram 将图表的SVG写入磁盘

运作原理

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

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

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

支持的图表类型

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

发展

pnpm install
pnpm build

项目结构

包装 描述
packages/mcp-server MCP服务器（发布为 mermaid-live-mcp)
packages/preview 通过WebSocket实时预览浏览器
packages/core 图表解析、布局和SVG渲染
packages/cli 命令行界面

许可证

麻省理工学院

相关 MCP