Peng Shawn Mermaid MCP Server

🚀 精靈魚圖表 MCP 服務器

精靈魚圖表 MCP 服務器是一款基於文本的圖表繪製工具，支持多種圖表類型。它能與 MCP 客戶端集成，讓您在聊天界面輕鬆生成和分享圖表，為工作和交流帶來便利。

🚀 快速開始

精靈魚圖表 MCP 服務器使用便捷，您只需簡單幾步操作就能開啟圖表繪製之旅。

1. 克隆倉庫：

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

2. 安裝依賴：

   npm install
   

3. 開發服務器啟動：

   npm run dev
   

✨ 主要特性

• 多圖表類型支持：涵蓋流程圖、序列圖、類圖、時序圖等多種常見圖表類型，滿足不同場景需求。
• 主題切換：內置豐富的圖表樣式，您可按需選擇不同主題，讓圖表風格多樣。
• 背景顏色設置：支持自定義圖表背景顏色，輕鬆提升圖表的視覺效果。
• 高代碼可配置性：通過簡單的文本輸入，就能生成複雜的圖表，操作簡單高效。
• 集成靈活：能與各種 MCP 客戶端（如 Claude desktop、Cursor 等）無縫集成，使用場景廣泛。

🔧 技術細節

精靈魚圖表服務器的工作原理是接收用戶輸入的命令，對其中的圖表描述和參數進行解析，然後藉助 Mermaid 渲染引擎將文本轉換為圖形。生成的圖像可通過 MCP 協議傳輸到客戶端進行展示或保存，整個過程高效且穩定。

📦 安裝指南

方法一：使用發行腳本（推薦）

1. 提交代碼並推送到倉庫。
2. 運行發行命令：

   npm run release 0.1.4
   

   或者使用語義版本遞增：

   npm run release patch|minor|major
   

方法二：手動發佈

1. 構建項目。
2. 打包並上傳到 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。