Mermaid MCP Server

Mermaid MCP サーバー

Model Context Protocol（MCP）サーバーです。Mermaidの図を検証およびレンダリングするツールを提供します。

このサーバーを使うと、AI アシスタント（Roo など）が Mermaid の図を操作し、構文を確認して、SVG 形式にレンダリングし、ドキュメントへのリンクを取得できます。

特長

• Mermaid の構文を検証： 提供された Mermaid コードの構文が正しいかどうかを確認します。
• SVG にレンダリング： 有効な Mermaid コードを SVG 画像形式に変換します。
• ドキュメントリンクを取得： Mermaid の公式ドキュメントへのリンクを提供します。

前提条件

• Node.js（v18 以降を推奨）
• npm または yarn
• 互換性のある MCP クライアント（例：Roo Cline VSCode Extension）

このサーバーは内部で @mermaid-js/mermaid-cli を使用し、図のレンダリングには Puppeteer を利用します。Puppeteer は、互換性のあるバージョンの Chromium が見つからない場合、ダウンロードします。初回実行時または依存関係の更新時にネットワーク接続があることを確認してください。

インストール

このサーバーはグローバルまたはプロジェクト内にローカルインストールできます。ただし、Roo Cline などの MCP クライアントで使用する場合は、通常、開発プロジェクトに直接インストールするのではなく、クライアントの設定ファイルで構成します。

Roo Cline での使用（推奨）：

1. パッケージをグローバルにインストールします（ローカルにインストールした場合はパスを控えてください）：

   npm install -g mermaid-mcp-server
   

   (または、このリポジトリをクローンしてビルドする場合は、build/index.js ファイルの絶対パスを控えてください。)

2. Roo Cline を設定します： Roo Cline の MCP 設定ファイルを開きます。場所は OS と 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": {
       // ... other servers
       "mermaid-mcp-server": {
         // If installed globally:
         "command": "mermaid-mcp-server",
         // If built from source, use the absolute path:
         // "command": "node",
         // "args": ["/absolute/path/to/mermaid-mcp-server/build/index.js"],
         "disabled": false,
         "alwaysAllow": [] // Add tool names here if you want to skip confirmation
       }
       // ... other servers
     }
   }
   

   ソースからサーバーをビルドした場合は、/absolute/path/to/mermaid-mcp-server/build/index.js を実際のパスに置き換えてください。

3. VSCode を再起動するか、ウィンドウを再読み込みして、Roo Cline に新しいサーバー設定を読み込ませます。

利用可能なツール

設定が完了すると、AI アシスタントは次のツールを利用できます。

• validate_mermaid：

  • 説明： レンダリングせずに Mermaid の構文を検証します。
  • 入力： { "mermaid_code": "string" }
  • 出力： 成功または失敗を示すテキストと、エラーの詳細。

• render_mermaid_svg：

  • 説明： Mermaid コードを SVG 形式にレンダリングします。
  • 入力： { "mermaid_code": "string" }
  • 出力： テキスト形式の SVG コンテンツ（mimeType: 'image/svg+xml'）またはエラーメッセージ。

• get_mermaid_docs_link：

  • 説明： Mermaid の公式ドキュメントへのリンクを取得します。
  • 入力： {}（入力は不要）
  • 出力： URL を含むテキスト。

開発

1. リポジトリをクローンします：

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

2. 依存関係をインストールします：

   npm install
   

3. サーバーをビルドします：

   npm run build
   

   （開発中に自動で再ビルドするには、npm run watchを使用してください。）

4. MCP Inspector でテストします：

   npm run inspector
   

コントリビューション

コントリビューションを歓迎します！issue を作成するか、プルリクエストを送信してください。

ライセンス

MIT