Mermaid Diagram Generator

🚀 海妖（Mermaid）模型上下文協議服務器

本項目的海妖（Mermaid）模型上下文協議服務器可用於生成和管理各種圖表。它支持多種圖表類型，提供豐富的自定義選項，還能通過命令行工具和編程接口與用戶交互，十分便捷實用。

🚀 快速開始

若你想快速體驗海妖（Mermaid）模型上下文協議服務器，可按以下步驟操作：

1. 克隆倉庫：

git clone https://github.com/yourusername/mermaid-mcp.git
cd mermaid-mcp

2. 安裝依賴：

npm install

3. 啟動服務：

npm run dev

✨ 主要特性

• 🌟 支持多種圖表類型，如流程圖、序列圖、類圖。
• 🌈 可設置不同主題（默認、forest、dark）。
• 🎨 支持自定義背景顏色。
• 💻 提供命令行工具和編程接口進行交互。
• 💾 支持將圖表保存為文件或直接輸出。

📦 安裝指南

1. 克隆倉庫：

git clone https://github.com/yourusername/mermaid-mcp.git
cd mermaid-mcp

2. 安裝依賴：

npm install

3. 啟動服務：

npm run dev

💻 使用示例

基礎用法

{
  "code": "graph LR\nA --> B\nB --> 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": "類圖示例",
  "folder": "/var/www/diagrams"
}

📚 詳細文檔

工作原理

Mermaid MCP 服務器基於 Puppeteer 和 Mermaid.js 實現。通過解析用戶提供的 JSON 請求，生成對應的 Mermaid 圖表，並使用 Puppeteer 截取生成的 SVG 圖像，最後將其轉換為 PNG 格式返回給客戶端。

構建指令

npm run dev # 開發模式啟動服務器
npm run build # 構建生產環境

API

請求格式

HTTP POST 請求，Body 格式為 JSON：

{
  "code": string,
  "theme": string,
  "backgroundColor": string,
  "name": string,
  "folder": string
}

響應格式

成功時返回：

{
  "status": "success",
  "data": {
    "url": "http://example.com/diagram.png"
  }
}

失敗時返回：

{
  "status": "error",
  "message": "錯誤信息"
}

環境變量

常見問題

Q: 是否支持直接在客戶端渲染 Mermaid？

答：目前不支持，必須通過服務器進行解析和生成。

Q: 如何處理大尺寸圖表？

答：可以通過調整 Mermaid.js 的配置參數來優化渲染質量，或者分塊加載。

項目結構

mermaid-mcp/
├── src/         # 源代碼目錄
│   ├── index.ts     # 入口文件
│   └── types.ts    # 類型定義
├── public/       # 靜態資源目錄
└── package.json  # 依賴管理文件

📄 許可證

本項目採用 MIT 協議，具體條款請參考 LICENSE 文件。