Excalidraw Architect MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

自動レイアウト — 手動配置不要
スイムレーン、クラスター、シーケンス形式のフロー
Excalidraw形式.json（編集可能）とPNG（オプションのcairo使用）を出力
鮮明なPNG用の解像度倍率を設定可能
ローカル動作 — SaaSなし、テレメトリなし

ライブデモ

実際の動作

excalidraw-architect-mcp.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "excalidraw-architect-mcp": {
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "excalidraw-architect-mcp",
      "command": "uvx",
      "args": [
        "excalidraw-architect-mcp"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "excalidraw-architect-mcp": {
      "command": {
        "path": "uvx",
        "args": [
          "excalidraw-architect-mcp"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add excalidraw-architect-mcp -- uvx excalidraw-architect-mcp

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Excalidraw Architect MCP

設計ドキュメント用のアーキテクチャダイアグラムを生成する

👤 設計ドキュメントを書くエンジニア ⏱ ~10 min beginner

使うタイミング： 設計ドキュメントにシステムダイアグラムが必要だが、Excalidrawで1時間かけたくない場合。

前提条件

Excalidraw（WebまたはDesktop） — excalidraw.com — .json出力を貼り付ける

フロー

説明

Generate an Excalidraw diagram: API gateway → auth service → user service & orders service → Postgres. Add a Redis cache between API and user service.✓ コピーしました

→ Excalidraw形式の.jsonが返却
調整

Add a sidecar logging agent on each service. Group services in a 'core' cluster.✓ コピーしました

→ クラスターとサイドカーを追加した更新済みダイアグラム
エクスポート

Render to PNG at 3x and save to /docs/arch.png.✓ コピーしました

→ PNGファイルが書き込まれる

結果： 30分ではなく2分でドキュメント掲載可能なダイアグラムが完成。

注意点

ノードが多すぎてダイアグラムが読めなくなる — 先にクラスターと高い抽象レベルを要求する

組み合わせ： filesystem

コードベースの呼び出しフローを可視化する

👤 未知のコードをレビューするエンジニア ⏱ ~5 min beginner

使うタイミング： リクエストをステップ実行した — 今度はその絵が欲しい。

フロー

確認した内容を説明

Diagram a request flow: HTTP handler → validator → service → repo → DB. Show validation error path branching off.✓ コピーしました

→ シーケンス形式のダイアグラム

結果： PRの説明文で200語を代替する1枚の絵。

注意点

シーケンス図とボックス/矢印図の混乱 — 明示的に指定する — 「シーケンス図」または「コンポーネント図」

組み合わせ

他のMCPと組み合わせて10倍の力を

excalidraw-architect-mcp + filesystem

設計ドキュメントと並べてバージョン管理されたダイアグラムを保存

Save the .excalidraw.json next to the doc and re-render to /docs/arch.png.✓ コピーしました

excalidraw-architect-mcp + github

PRの説明にダイアグラムを添付

Generate the diagram and embed the PNG in PR #1234's description.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
generate_diagram	description, layout?	promptからの初回ダイアグラム生成時	free
modify_diagram	json, instruction	反復的な編集時	free
to_png	json, scale?	ドキュメントに埋め込む時	free

コストと制限

運用コスト

APIクォータ: ローカル — なし
呼び出しあたりのトークン: 300〜2000 token
金額: 無料
ヒント: スクラッチからの再生成ではなくmodify_diagramでイテレーションする

セキュリティ

権限、シークレット、影響範囲

最小スコープ： ローカルファイル書き込み

認証情報の保管： なし

データ送信先： なし — 完全ローカル

トラブルシューティング

よくあるエラーと対処法

PNGエクスポートが失敗する

オプションのcairo依存関係をインストール：pip install excalidraw-architect-mcp[png]

レイアウトが混雑している

クラスターグルーピングまたはより小さいノードセットを要求する

ExcalidrawがインポートするのにJSON形式が合わない

JSONスキーマが若干ずれている可能性；最新のExcalidrawスキーマに対して検証するようClaudeに依頼

代替案

Excalidraw Architect MCP 他との比較

代替案	代わりに使う場面	トレードオフ
MermaidのMCP経由	テキストファースト、ソース管理可能なダイアグラムが必要な場合	視覚的なカスタマイズ性が低い
Excalidrawで手書き	それを楽しめて時間がある場合	遅い

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る