金大哥 - peng-shawn_mermaid-mcp-server MCP 详情

article

README

🚀 精灵鱼图表 MCP 服务器

精灵鱼图表 MCP 服务器是一款基于文本的图表绘制工具，支持多种图表类型。它能与 MCP 客户端集成，让您在聊天界面轻松生成和分享图表，为工作和交流带来便利。

🚀 快速开始

精灵鱼图表 MCP 服务器使用便捷，您只需简单几步操作就能开启图表绘制之旅。

克隆仓库：

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

安装依赖：
```
npm install
```
开发服务器启动：
```
npm run dev
```

✨ 主要特性

多图表类型支持：涵盖流程图、序列图、类图、时序图等多种常见图表类型，满足不同场景需求。
主题切换：内置丰富的图表样式，您可按需选择不同主题，让图表风格多样。
背景颜色设置：支持自定义图表背景颜色，轻松提升图表的视觉效果。
高代码可配置性：通过简单的文本输入，就能生成复杂的图表，操作简单高效。
集成灵活：能与各种 MCP 客户端（如 Claude desktop、Cursor 等）无缝集成，使用场景广泛。

🔧 技术细节

精灵鱼图表服务器的工作原理是接收用户输入的命令，对其中的图表描述和参数进行解析，然后借助 Mermaid 渲染引擎将文本转换为图形。生成的图像可通过 MCP 协议传输到客户端进行展示或保存，整个过程高效且稳定。

📦 安装指南

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

提交代码并推送到仓库。

运行发行命令：

npm run release 0.1.4

或者使用语义版本递增：

npm run release patch|minor|major

方法二：手动发布

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

💻 使用示例

基本用法

{
  "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 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。

常见问题解答

Claude desktop 已经支持精灵鱼图表，为什么还需要这个服务器？
- Claude 的内置支持不支持 theme 和 backgroundColor 参数。此外，使用独立的服务器可以方便地在不同 MCP 客户端间共享图表。
为什么需要设置 CONTENT_IMAGE_SUPPORTED=false 在 Cursor 中？
- 因为 Cursor 目前还不支持响应中直接返回图片。

发布说明

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

📄 许可证

本项目使用 MIT License。

peng-shawn_mermaid-mcp-server