MCP Mermaid Validator

🚀 MCP 服務器：Mermaid 驗證器

一個模型上下文協議（Model Context Protocol）服務器，用於驗證和渲染 Mermaid 圖表。此服務器讓大型語言模型能夠對 Mermaid 圖表進行驗證和渲染。

🚀 快速開始

你可以通過將 MCP 客戶端配置為使用 Mermaid 驗證器，將其添加到你的 mcp 服務器文件中：

{
  "mcpServers": {
    "mermaid-validator": {
      "command": "npx",
      "args": [
        "-y",
        "@rtuin/mcp-mermaid-validator"
      ]
    }
  }
}

✨ 主要特性

• 可讓大型語言模型驗證和渲染 Mermaid 圖表。
• 採用簡單的 TypeScript Node.js 應用程序架構，便於集成和擴展。

📚 詳細文檔

高階架構

總體架構

該項目是一個簡單的 TypeScript Node.js 應用程序，其結構如下：

1. 主要應用程序：一個 Node.js 服務，用於驗證 Mermaid 圖表並返回渲染的 SVG 輸出。
2. MCP 集成：使用模型上下文協議 SDK 來暴露與 MCP 兼容客戶端的功能。
3. Mermaid CLI 集成：利用 Mermaid CLI 工具來執行圖表驗證和渲染。

代碼結構

mcp-mermaid-validator/
├── dist/                   # 編譯後的 JavaScript 輸出
│   └── main.js             # 主應用程序入口文件
├── src/                    # TypeScript 源代碼
│   └── main.ts             # 主應用程序入口點
├── node_modules/           # 依賴項
├── package.json            # 項目依賴和腳本
├── package-lock.json       # 依賴項鎖定文件
├── tsconfig.json           # TypeScript 配置
├── eslint.config.js        # ESLint 配置
├── .prettierrc             # Prettier 配置
└── README.md               # 項目文檔

組件功能

MCP 服務器（核心組件）

主要功能在 src/main.ts 中實現。此組件：

1. 創建一個 MCP 服務器實例。
2. 註冊一個 validateMermaid 工具，接受 Mermaid 圖表語法。
3. 使用 Mermaid CLI 執行圖表驗證和渲染。
4. 返回驗證結果以及渲染的 SVG（如果有效）。
5. 處理錯誤情況。

數據流程

1. 接收輸入：通過標準輸入接收 Mermaid 圖表代碼。
2. 解析和驗證：使用 Mermaid 解釋器解析代碼，檢查語法是否正確。
3. 渲染輸出：將有效的 Mermaid 代碼轉換為 SVG 格式的圖形。
4. 返回結果：將生成的 SVG 輸出到標準輸出。

依賴項

構建工具

• TypeScript：用於編寫和編譯 TypeScript 源代碼。
• Babel：用於 JavaScript 轉譯，確保兼容性。
• Webpack：用於打包模塊化代碼。
• TSC：TypeScript 編譯器，用於類型檢查。

開發工具

• npm scripts：管理構建、格式化和測試任務。
• Prettier：代碼格式化工具，保持編碼風格一致。
• ESLint：靜態代碼分析工具，確保代碼質量。
• Git：版本控制系統，用於項目管理和協作。

運行時依賴

• Mermaid CLI：執行 Mermaid 圖表渲染。
• Node.js：運行環境。

API 規範

輸入格式

{
  "code": "```mermaid\ngraph LR\n    A[開始] --> B{判斷}\n    B -->|是| C[處理]\n    C --> D[結束]\n    B -->|否| E[結束]\n```\n"
}

輸出格式

{
  "result": "<svg>...</svg>",
  "error": null
}

📦 安裝指南

應用程序可以通過 npm 腳本進行構建和運行：

# 安裝依賴項
npm install

# 構建應用程序
npm run build

# 本地運行（開發）
npx @modelcontextprotocol/inspector node dist/main.js

# 格式化代碼
npm run format

# 檢查代碼
npm run lint

# 監控更改（開發）
npm run watch

該應用程序作為 MCP 服務器運行，通過標準輸入輸出進行通信，適合與 MCP 兼容客戶端集成。

📄 發佈說明

要發佈新版本，請按以下步驟操作：

• npm run build
• npm run bump
• npm run changelog
• npm publish --access public