mermaid-render-mcp

mermaid-mcp

M C P サーバーです。Mermaid の図を PNG、SVG、PDF にレンダリングしたり、編集可能な draw.io ファイルに変換したりできます。LLM が図の構文を実際の画像やドキュメントに変換できるようになります。

クイックスタート

Claude Code

claude mcp add mermaid -- npx -y mermaid-render-mcp

Claude Desktop

claude_desktop_config.json に追加します：

{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "mermaid-render-mcp"]
    }
  }
}

注記： 初回実行時にはヘッドレス Chromium（約 150 MB）がダウンロードされるため、起動に数分かかります。フローチャートだけが必要で、編集可能なファイルで問題ない場合は、drawio の高速パスを使えば Chromium を完全にスキップできます。

Docker

Node.js や Chromium のダウンロードは不要です。イメージにはすべてが含まれています（日本語／中国語／韓国語のラベル用の CJK フォントも含みます）：

claude mcp add mermaid -- docker run -i --rm tcinebula/mermaid-render-mcp

output_path を使うには、ホストディレクトリをマウントして、その中に書き込みます：

{
  "mcpServers": {
    "mermaid": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "-v", "C:\\diagrams:/out", "tcinebula/mermaid-render-mcp"]
    }
  }
}

その後、output_path: "/out/figure.pdf" を渡すと、ファイルが C:\diagrams に作成されます。

リモート／セルフホスト（HTTP）

PORT が設定されている場合（または MCP_TRANSPORT=http の場合）、同じサーバーが Streamable HTTP を使用するため、Dockerfile からそのまま Railway、Fly.io などの任意のコンテナホストにデプロイできます：

• エンドポイント：POST /mcp（ヘルスチェックは /healthz）
• Authorization: Bearer <token> を必須にするには、AUTH_TOKEN を設定します
• HTTP モードでは output_path は無効です。base64／XML のレスポンスのみを返します

ソースから実行

git clone https://github.com/tci-nebula/mermaid-mcp.git
cd mermaid-mcp
npm install
claude mcp add mermaid -- node /path/to/mermaid-mcp/server.js

ツール：render_diagram

パラメーター	型	デフォルト	説明
syntax	string	(必須)	Mermaid 図の定義
format	png | svg | pdf | drawio	png	出力形式（drawio は編集可能な draw.io XML。フローチャートのみ）
theme	default | dark | neutral | forest	default	ビジュアルテーマ
background	string	white	CSS の色、または transparent
width	number	1200	キャンバスの幅（px、PNG のみ）
pdfFit	boolean	true	PDF ページを図に合わせて拡大縮小します（PDF のみ）
output_path	string	—	base64 を返す代わりに、指定したファイルパスに結果を書き込みます

レンダリングされた画像は base64 エンコードされたデータとして返されるため、MCP クライアントでインライン表示できます。また、output_path を指定するとファイルをディスクに書き込みます（印刷や正式な書類提出用の PDF に便利です）。

例

LLM に次のように依頼します：

「OAuth のログインフローのフローチャートを描いて」

Mermaid 構文が生成され、render_diagram が呼び出されて、PNG が返されます。

drawio の高速パス（Chromium 不要）

format: "drawio" は、ブラウザーを一切使わない唯一の出力形式です。純粋な JavaScript で解析し、dagre でレイアウトして XML を出力するため、Chromium のダウンロードも、約 150 MB のインストールも、初回実行に数分かかることもありません。変換は実質的に瞬時です。

次のような場合にご利用ください：

• 図を平面的な画像ではなく編集可能にしたい場合。すべての図形が実際の draw.io オブジェクトとして保持されます
• Chromium のダウンロードが現実的でない制約のある環境（CI、軽量コンテナ、制限されたノート PC）を使っている場合
• 画像形式は不要で、今すぐ図だけが必要な場合

{
  "syntax": "flowchart TD\n  A[Start] --> B{OK?}\n  B -->|yes| C[Ship]\n  B -->|no| A",
  "format": "drawio",
  "output_path": "flow.drawio"
}

結果を draw.io（または VS Code 拡張機能）で開き、画像が必要ならそこから PNG／SVG／PDF にエクスポートできます。Chromium を使わずに一連の変換を完了できます。

制限事項

• フローチャートのみ対応しています。 flowchart と graph の図は変換できますが、シーケンス図、クラス図、状態図、ER 図、ガント図ではエラーが発生します。これらには PNG／SVG／PDF を使用してください。
• theme、background、width は無視されます。 ファイルを開いた後のスタイル設定は draw.io 側で行います。
• ノードのサイズは推定値です。 フォントの実測値ではなく、ラベルの長さを基に推定されます。draw.io でファイルを開くとテキストが再計測され、ボックスのサイズが正しく調整されますが、生の XML のジオメトリは概算として扱ってください。

サポート対象の構文：方向 TD ／ TB ／ BT ／ LR ／ RL、図形 [rect]、(rounded)、{rhombus}、((circle))、([stadium])、[[subroutine]]、[(cylinder)]、{{hexagon}}、エッジ -->、---、-.->、==>、<-->。各エッジには任意で |label| を付けられます。

仕組み

PNG、SVG、PDF へのレンダリングでは、@mermaid-js/mermaid-cli（依存関係として同梱）を外部プロセスとして実行し、ヘッドレス Chromium で図をレンダリングします。最初の npm install では Chromium（約 150 MB）がダウンロードされるため、数分かかります。

draw.io へのエクスポートは純粋な JavaScript で実行されます。フローチャートパーサーと dagre レイアウト（Mermaid と同じエンジン）によって、ネイティブの mxGraphModel XML を生成するため、すべての図形を draw.io で個別に編集できます。

必要条件

• Node.js 18+

ロードマップ

• PDF エクスポート（正式文書／法的文書のワークフロー向け）
• draw.io XML エクスポート（編集可能な図 — フローチャート）
• npm パッケージ（mermaid-render-mcp）
• リモートホスト型サーバーのオプション（Streamable HTTP トランスポート）

ライセンス

MIT