The

mermaider MCP サーバー：高速で信頼性の高い Mermaid ダイアグラム構文チェッカー

目次

• mermaider MCP サーバー：高速で信頼性の高い Mermaid ダイアグラム構文チェッカー
  • 概要
    • そもそもブラウザーを使う理由
  • LLM の構文に関する問題
  • mermaider の特徴
  • インストール
    • VSCode
    • Cursor/Windsuf/...
    • Bun
  • 推奨事項
  • 使用例
  • 参考資料
    • その他の Mermaid 関連 MCP サーバー
    • ライセンス

概要

mermaider は、すべての Mermaid ダイアグラムの種類について構文エラーをチェックする validate_syntax ツールを提供する MCP サーバーです。

そのために、puppeteer-core package と mermaid-js/mermaid API を直接使用し、インストール済みの Chrome ベースまたは Firefox ブラウザーを効率的に利用します。

効率的とは、次のことを意味します。

• MCP サーバープロセスが実行されている間、新しいページを開いたブラウザーをヘッドレス（デフォルト）で起動したままにし、ツール呼び出しのレイテンシーを低く抑えます。
• validate_syntax ツールの呼び出しごとに、同じブラウザーとページを再利用します。

そもそもブラウザーを使う理由

残念ながら、mermaid-js/mermaid は、ダイアグラムの解析であっても、その機能を利用するために完全なブラウザーコンテキスト（DOM）を必要とします。happy-dom や jsdom などのパッケージでは十分ではありません。

mermaider は、インストール済みのブラウザーにアクセスするため、比較的軽量な puppeteer-core package を使用します（完全版の puppeteer とは異なります）。

LLM の構文に関する問題

最新の LLM は一般に Mermaid ダイアグラムを生成する能力に優れていますが、生成した構文を確実にチェックする能力が不足していることがよくあります。そこで役立つのが mermaider MCP です。

mermaider の特徴

Mermaid の構文を（ある程度）検証できるほかの MCP もありますが、通常はツールが（LLM によって）呼び出されるたびに mmdc command-line utility のプロセスを起動します。

これにはいくつかの問題があります。

• 速度：ツールの呼び出しごとに mmdc プロセスを起動し、そのプロセスがさらにブラウザーを起動するため、遅く、コストもかかります。

• 非決定性：mmdc の本来の目的は構文検証ではなく、画像の生成です。そのため、構文が壊れたダイアグラムでも、終了コード 0 で終了して画像（下の例のようなもの）を生成し、終了コードが 0 以外になってエラーメッセージを STDERR に出力しないことがあります。この場合、mmdc を使う MCP サーバーはエラーが発生したことを把握できず、ダイアグラムの代わりにこのような画像が大量にできてしまいます。

  

• 副作用：mmdc は、知らないうちに Chrome ブラウザーをインストールすることがあります。これは puppeteer のデフォルトの動作です。引用すると：

  Puppeteer をインストールすると、Puppeteer で確実に動作するように、最新バージョンの Chrome for Testing（macOS では約 170MB、Linux では約 282MB、Windows では約 280MB）と、chrome-headless-shell バイナリ（Puppeteer v21.6.0 以降）を自動的にダウンロードします。ブラウザーはデフォルトで $HOME/.cache/puppeteer フォルダーにダウンロードされます（Puppeteer v19.0.0 以降）。ダウンロードの動作を制御する設定オプションと環境変数については、設定を参照してください。

インストール

一般的に、MCP クライアントで使用するコマンドは次のとおりです。

npx -y @vtomilin/mermaider <config>

<config> はインラインの JSON 文字列、または設定ファイルのパスです。例：

npx -y @vtomilin/mermaider '{"executablePath": "/Applications/FirefoxDeveloperEdition.app/Contents/MacOS/firefox", "browser": "firefox"}'

または：

npx -y @vtomilin/mermaider /home/user/etc/Firefox.json

/home/user/etc/Firefox.json は、たとえば Firefox ブラウザーの設定を含む JSON ファイルです。

{
  "executablePath": "/Applications/FirefoxDeveloperEdition.app/Contents/MacOS/firefox",
  "browser": "firefox"
}

Brave（Chrome ベース）ブラウザーを使用する、別の設定ファイルの例：

{
  "executablePath": "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
}

利用可能な Browser 設定オプションの一覧は、Puppeteer の Browser Launchoptions で定義されています。

VSCode

Cmd-Shift-P（または Ctrl-Shift-P）を押し、MCP: Add Server... を選択します。Command (stdio) Run a local command that implements the MCP protocol を選択します。npx -y @vtomilin/mermaider /home/user/etc/Firefox.json（または任意の設定方法）を入力します。サーバー名（mermaider）を入力すれば、準備完了です。

Cursor/Windsuf/...

{
  "mcpServers": {
    "mermaider": {
      "command": "npx",
      "args": ["-y", "@vtomilin/mermaider", "/home/user/etc/Firefox.json"]
    }
  }
}

Bun

このプロジェクトは Bun で構築されていますが、現時点では mermaider パッケージを bunx で直接実行できません。まず bun add -g @vtomilin/mermaider でパッケージをグローバルにインストールする必要があります。その後、mermaider-bun 実行ファイルを使ってサーバーを実行できます。

{
  "mcpServers": {
    "mermaider": {
      "command": "mermaider-bun",
      "args": ["/home/user/etc/Firefox.json"]
    }
  }
}

推奨事項

• 対応ブラウザーについては、Puppeteer の対応ブラウザー一覧を確認してください。
• mermaider MCP には、普段使っているブラウザーとは別のブラウザーを使用してください。メインのブラウザーは使用しないでください。

使用例

VSCode で Github Copilot を使用するセッションの例：

• 図を生成し、mermaider で構文を確認する：

• 意図的に壊れた図を生成し、mermaider で構文を確認する：

参考資料

Mermaid 関連のその他の MCP サーバー

• mcp-mermaid-validator：Mermaid 図を検証およびレンダリングする Model Context Protocol サーバーです。
• mermaid-mcp-server：Mermaid 図を検証およびレンダリングするツールを提供する Model Context Protocol（MCP）サーバーです。

ライセンス

MIT