mermaid-mcp-app

Mermaid MCP App

English | 繁體中文

インタラクティブなビューアーで Mermaid 図を表示する MCP App です。パン、ズーム、組み込みのソースエディターを利用できます。分割ビューのエディターで図を直接編集し、変更したソースを LLM に送り返して、変更内容を反映した会話を続けられます。Claude Desktop、VS Code、および MCP-App 互換のホストで動作します。

使用方法

設定が完了したら、LLM に図を作成するよう依頼します。

"Draw a flowchart showing user authentication flow"

"Create a sequence diagram for an API request lifecycle"

"Render this mermaid diagram: `graph TD; A-->B; B-->C`"

テーマを明示的に指定することもできます。

「ライトテーマでクラス図を描いてください」

機能

AI との連携

分割ビューのエディターで図のソースを直接編集し、変更したソースを LLM に送り返して、変更内容を反映した会話を続けられます。

• AI に送信 — 編集した図のソースを LLM に送り返し、応答を促します
• コンテキストの自動同期 — 入力に合わせて LLM のコンテキストが自動的に更新されます（デバウンス処理）。次のメッセージでは、LLM は常に最新のソースを参照します

図の種類（13 種類に対応）

フローチャート

flowchart — 汎用の有向グラフです。上から下、左から右のレイアウト、サブグラフ、さまざまなノード形状に対応しています。

シーケンス図

sequenceDiagram — 時間の経過に伴う参加者間のやり取りを表します。メッセージ、ループ、代替フローを示します。

クラス図

classDiagram — 属性、メソッド、関係（継承、コンポジションなど）を含む、オブジェクト指向のクラス構造を表します。

状態図

stateDiagram-v2 — 状態遷移、複合状態、並行処理を含む有限状態機械を表します。

ER 図

erDiagram — カーディナリティの注釈を付けた、データモデリング用の実体関連図です。

ガントチャート

gantt — タスク、マイルストーン、依存関係、クリティカルパスを含むプロジェクトのタイムラインです。

円グラフ

pie — 比例データを、パーセンテージラベル付きの扇形で表します。

Git グラフ

gitGraph — マージやチェリーピックのフローを含む、Git のブランチとコミット履歴の可視化です。

マインドマップ

mindmap — 中央のルートノードから放射状に広がる、階層的なアイデアのツリーです。

タイムライン

timeline — 期間ごとにまとめられた、時系列のイベントです。

ユーザージャーニー

journey — セクションやアクターごとに満足度を評価した、ユーザー体験のフローです。

要件図

requirementDiagram — 種類、リスク、検証方法を含むシステム要件を設計要素に関連付けて表します。

Quadrant Chart

quadrantChart — 優先順位付けとポジショニング分析のための4象限散布図です。

UI

• パンとズーム — マウスドラッグでパン、スクロールホイールでズーム、タッチ操作ではピンチズーム
• コンテナに合わせる — レンダリング時に図を自動調整します。リセットボタンで調整後の表示に戻せます
• SVGをコピー — レンダリングされたSVGをクリップボードにコピーします
• 分割ビューのソースエディター — 常に表示されるエディターパネルで、変更をリアルタイムに再レンダリングします（400msのデバウンス）
• 最小化できるエディター — コンパクトな下部バーに折りたたみ、ワンクリックで展開できます
• 縦／横レイアウトの切り替え — ソースを下（縦）または右（横）に表示します。最小化した状態では常に下部に配置されます
• テーマ対応 — dark（システム設定から自動検出）とlight

インストール

Claude Desktop — 拡張機能（推奨）

GitHub Releasesから最新の.mcpbをダウンロードし、ダブルクリックしてインストールします。ターミナルや設定は不要です。

Claude Desktop — 手動

~/Library/Application Support/Claude/claude_desktop_config.jsonに追加します。

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

VS Code

.vscode/mcp.jsonまたはユーザー設定に追加します。

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

開発

# Install dependencies
npm install

# Build (view + server)
npm run build

# Watch mode (view only)
npm run dev

# Start server
npm start