Mermaid MCP Server

🚀 タコ怪 MCP サーバー

Mermaid チャートを検証およびレンダリングするためのツールを提供する Model Context Protocol (MCP) サーバーです。

このサーバーは、AI アシスタント（例：Roo）が 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 <ソースファイルのパス> [--オプション]
   

2. サポートされているオプションは次のとおりです。
   • --ignore-unknownDirectives：未知のディレクティブを無視します（オプション）
   • --strict：厳格モードを有効にします（オプション）

SVG へのレンダリング

1. ターミナルで以下のコマンドを実行します。

   mermaid-mcp-server render --source <ソースファイルのパス> [--オプション]
   

2. サポートされているオプションは次のとおりです。
   • --theme <テーマ>：テーマを指定します（デフォルトは light）
   • --outputDir <出力ディレクトリ>：出力ディレクトリを指定します

ドキュメントリンクの取得

ターミナルで以下のコマンドを実行します。

mermaid-mcp-server getDocument --source <ソースファイルのパス>

🤝 コントリビューション

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

📄 ライセンス

MIT