Mermaid MCP App

English | 繁體中文

Mermaid ダイアグラムを、パン・ズーム機能と内蔵ソースエディタを備えたインタラクティブなビューアでレンダリングする MCP アプリです。分割ビューエディタでダイアグラムを直接編集し、更新したソースを 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`"

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

"ライトテーマのクラス図を描いてください"

Related MCP server: Excalidraw MCP App Server

機能

AI との連携

分割ビューエディタでダイアグラムのソースを直接編集し、それを LLM に送り返すことで、変更内容を反映した会話を続けられます。

• AI に送信 — 編集したダイアグラムのソースを LLM に送り返し、応答をトリガーします

• 自動コンテキスト同期 — 入力中に LLM コンテキストが自動的に更新されます（デバウンス付き）。LLM は常に最新のソースを次のメッセージで参照します

ダイアグラムタイプ（13 種類対応）

フローチャート

flowchart — 汎用の有向グラフ。トップダウン / 左から右のレイアウト、サブグラフ、さまざまなノード形状に対応します。

シーケンス図

sequenceDiagram — 時間経過に沿った参加者間の相互作用。メッセージ、ループ、代替フローを表示します。

クラス図

classDiagram — 属性、メソッド、リレーションシップ（継承、コンポジションなど）を備えたオブジェクト指向のクラス構造。

ステート図

stateDiagram-v2 — 遷移、複合状態、並行性を備えた有限状態マシン。

ER 図

erDiagram — カーディナリティ注釈付きのデータモデリング用エンティティ関係図。

ガントチャート

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

円グラフ

pie — 割合データをパーセンテージラベル付きの円スライスで表示します。

Git グラフ

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

マインドマップ

mindmap — 中心のルートノードから放射状に広がるアイデアの階層ツリー。

タイムライン

timeline — 期間ごとにグループ化された時系列イベント。

ユーザージャーニー

journey — セクションとアクターにわたって満足度でスコア化されたユーザーエクスペリエンスのフロー。

要件図

requirementDiagram — タイプ、リスク、検証方法を持つシステム要件を、設計要素と関連付けて表現します。

象限チャート

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

UI

• パンとズーム — マウスドラッグでパン、スクロールホイールでズーム、タッチではピンチによるズーム

• コンテナにフィット — レンダリング時にダイアグラムを自動フィット。リセットボタンでフィット状態を復元

• SVG をコピー — レンダリングされた SVG をクリップボードにコピー

• 分割ビューソースエディタ — 常時表示のエディタパネル。ライブ再レンダリング（400ms デバウンス）

• 最小化可能エディタ — コンパクトな下部バーに折りたたみ可能。ワンクリックで展開

• 縦 / 横レイアウト切替 — ソースを下（縦）または右（横）に表示。最小化時は常に下部にスナップ

• テーマ対応 — dark（システム設定から自動検出）と light

インストール

Claude Desktop — 拡張機能（推奨）

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

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