精灵鱼图表 MCP 服务器

介绍

精灵鱼图表（Mermaid）MCP 服务器是一个基于文本的图表绘制工具，支持多种图表类型，包括流程图、序列图、类图和时序图等。通过与 MCP 客户端集成，您可以直接在聊天界面中使用精灵鱼图表来生成和分享图表。

功能

• 多图表类型支持：包括流程图、序列图、类图、时序图等。
• 主题切换：内置多种图表样式，用户可以根据需求选择不同的主题。
• 背景颜色设置：允许自定义图表的背景颜色，提升视觉效果。
• 高代码可配置性：通过简单的文本输入即可生成复杂的图表。
• 集成灵活：支持与各种 MCP 客户端（如 Claude desktop、Cursor 等）无缝集成。

工作原理

精灵鱼图表服务器接收用户的输入命令，解析其中的图表描述和参数，然后使用 Mermaid 渲染引擎将文本转换为图形。生成的图像可以通过 MCP 协议传输到客户端进行展示或保存。

构建

1. 克隆仓库：

   git clone https://github.com/your-repo.git
   

2. 安装依赖：

   npm install
   

3. 开发服务器启动：

   npm run dev
   

使用方法

与 Claude desktop 集成

Claude desktop 已经内置了精灵鱼图表支持，但通过 MCP 服务器可以实现更多自定义功能。

其他工具

• Cursor：在 Cursor 中使用时需要设置 CONTENT_IMAGE_SUPPORTED=false。
• Glama：直接集成到 Glama 平台中。

API

MCP 服务器提供以下接口：

{
  "code": "your_mermaid_code",
  "theme": "forest|dark|light",
  "backgroundColor": "#hex_code",
  "name": "file_name",
  "folder": "/path/to/save"
}

环境变量

• CONTENT_IMAGE_SUPPORTED：控制是否支持直接在响应中返回图片，值为 true 或 false。

示例

基本用法

{
  "code": "flowchart\n    A -> B: Message from A to B\n    B -> C: Message from B to C"
}

主题和背景颜色示例

{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}

保存到本地

{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}

常见问题

• Claude desktop 已经支持精灵鱼图表，为什么还需要这个服务器？

  • Claude 的内置支持不支持 theme 和 backgroundColor 参数。此外，使用独立的服务器可以方便地在不同 MCP 客户端间共享图表。

• 为什么需要设置 CONTENT_IMAGE_SUPPORTED=false 在 Cursor 中？

  • 因为 Cursor 目前还不支持响应中直接返回图片。

发布

项目通过 GitHub Actions 自动化发布流程到 npm。

方法一：使用发行脚本（推荐）

1. 提交代码并推送到仓库。
2. 运行发行命令：

   npm run release 0.1.4
   

   或者使用语义版本递增：

   npm run release patch|minor|major
   

方法二：手动发布

1. 构建项目。
2. 打包并上传到 npm。

许可证

本项目使用 MIT License。