Mermaid MCP Server

🚀 章魚怪 MCP 服務器

章魚怪 MCP 服務器是一個基於 Model Context Protocol (MCP) 的服務器，它提供了一系列工具，用於驗證和渲染 Mermaid 圖表。藉助該服務器，AI 助手（如 Roo）能夠與 Mermaid 圖表進行交互，檢查其語法，將其渲染為 SVG 格式，並訪問相關文檔鏈接。

🚀 快速開始

章魚怪 MCP 服務器為開發者提供了便捷的方式來處理 Mermaid 圖表。通過它，你可以輕鬆驗證圖表語法、將其渲染為 SVG 圖像，並獲取官方文檔鏈接。

✨ 主要特性

• 驗證 Mermaid 語法：能夠檢查提供的 Mermaid 代碼是否語法正確。
• 渲染到 SVG：可將有效的 Mermaid 代碼轉換為 SVG 圖像格式。
• 獲取文檔鏈接：提供官方 Mermaid 文檔的鏈接。

📦 安裝指南

先決條件

• Node.js（推薦 v18 或更高版本）
• npm 或 yarn
• 一個兼容的 MCP 客戶端（例如 Roo Cline VSCode 擴展）

此服務器使用 @mermaid-js/mermaid-cli 內部，依賴於 Puppeteer 渲染圖表。Puppeteer 在找不到合適版本時會下載 Chromium。確保在首次運行或更新依賴項時具有網絡連接。

安裝步驟

你可以全局安裝或在項目中本地安裝此服務器。但是，對於與 MCP 客戶端（如 Roo Cline）一起使用，通常通過客戶端的設置文件進行配置，而不是直接安裝到開發項目中。

與 Roo Cline 一起使用（推薦）：

1. 全局安裝包（或記錄如果在項目中本地安裝）：

   npm install -g mermaid-mcp-server
   

   (或者，如果你從源代碼克隆並構建，則注意 build/index.js 文件的實際路徑。)

2. 配置 Roo Cline： 打開 Roo Cline 的 MCP 設置文件。位置取決於你的操作系統和 VSCode 設置：

   • macOS：~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/mcp_settings.json
   • Windows：%APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\mcp_settings.json
   • Linux：~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/mcp_settings.json

   在 mcpServers 對象中添加以下配置：

   {
     "mcpServers": {
       // ... 其他服務器
       "mermaid-mcp-server": {
         // 如果全局安裝：
         "command": "mermaid-mcp-server",
         // 如果從源代碼構建，使用絕對路徑：
         // "command": "node",
         // "args": ["build/index.js"]
       }
     }
   }
   

3. 啟動 VSCode 並重新加載窗口：完成後，打開 VSCode 並重新加載窗口以應用設置。

💻 使用示例

基礎用法

驗證語法

1. 安裝服務器後，在終端中運行：

   mermaid-mcp-server validate --source <源文件路徑> [--options]
   

2. 支持的選項包括：
   • --ignore-unknownDirectives：忽略未知指令（可選）
   • --strict：啟用嚴格模式（可選）

渲染 SVG

1. 在終端中運行：

   mermaid-mcp-server render --source <源文件路徑> [--options]
   

2. 支持的選項包括：
   • --theme <主題>：指定主題（默認為 light）
   • --outputDir <輸出目錄>：指定輸出目錄

獲取文檔鏈接

在終端中運行：

mermaid-mcp-server getDocument --source <源文件路徑>

📄 許可證

本項目採用 MIT 許可證。

👏 貢獻

歡迎對本項目進行貢獻！如果你有任何問題或建議，請打開問題或提交拉取請求。