Excalidraw MCPでCursor上から図解を自動生成！ローカルで使えるビジュアルツールを試してみた

✅ TL;DR（この記事で得られること）

Excalidraw MCPを使ってCursor上から直接図解を生成する環境を構築する方法を解説します。

わかること:

• Excalidrawの基本概念と特徴
• Excalidraw MCPのセットアップ手順
• Cursorとの統合方法（具体的な設定JSON含む）
• 実際の使用例とローカル実行のメリット

結論:

• ローカル実行が安定: 外部APIに依存せず、レスポンスが速い
• プライバシー保護: データが外部に送信されない
• Obsidian連携: ナレッジベースとの統合も可能
• カスタマイズ性: オープンソースで自由に拡張可能

---

🎯 対象読者

• AI開発中に頻繁に図解を作成するエンジニア
• Cursorを使った開発環境を強化したい方
• セキュリティを重視し、ローカル実行を好む開発者
• Obsidianで技術ドキュメントを管理している方

---

🤔 はじめに：AI開発での図解ニーズ

よくあるシーン

AI開発をしていると、以下のような場面に遭遇しませんか？

• 「この仕様を図で説明したい」
• 「アーキテクチャ図をサクッと作りたい」
• 「コードレビュー時に視覚的な説明が必要」
• 「システム構成を素早く可視化したい」

従来は、以下のような課題がありました：

❌ 外部ツールへの切り替え: Miro、draw.io、Figmaなどを別途開いて作業
❌ API依存: クラウドサービスはネットワーク遅延やサービスダウンのリスク
❌ プライバシー懸念: 機密情報を含む図解を外部サービスに送信
❌ コンテキストの断絶: エディタと図解ツールの行き来でフローが途切れる

解決策：Excalidraw MCP

Excalidraw MCPを使えば、Cursor上でAIに指示するだけで図解が生成され、しかも完全ローカル実行でプライバシーも守られます。

---

📚 Excalidrawとは？

Excalidrawは、手書き風のダイアグラムを簡単に作成できるオープンソースのホワイトボードツールです。

主な特徴

特徴	詳細
🎨 手書き風デザイン	温かみのある見た目で、プレゼンや説明資料に最適
🚀 シンプルな操作性	直感的なUIで学習コストが低い
🔓 完全無料 & オープンソース	商用利用も可能、MIT License
💾 ローカル保存	データはすべてローカルに保存され、プライバシー面でも安心
🔗 豊富なエクスポート形式	PNG, SVG, JSON, クリップボードなど

対応する図解の種類

• フローチャート
• システム構成図
• UML図（クラス図、シーケンス図など）
• ER図
• マインドマップ
• ワイヤーフレーム
• アーキテクチャ図

---

🔧 Excalidraw MCPとは？

MCP（Model Context Protocol）について

MCPは、AIモデルと外部ツールを接続するためのプロトコルです。Anthropicが提唱し、以下のような特徴があります：

• AIエージェントが外部ツールの機能を呼び出せる
• 標準化されたインターフェースで様々なツールと統合可能
• Cursor、Claude、その他のAIエディタで利用可能

Excalidraw MCPの特徴

Excalidraw MCPは、このMCPプロトコルを使ってExcalidrawの機能をCursorなどのAIエディタから直接利用できるようにしたツールです。

1. ローカル実行

✅ サーバー不要で完全にローカル環境で動作
✅ ネットワーク遅延なし
✅ サービスダウンの心配なし
✅ オフラインでも動作

2. Cursorとの深い統合

Cursor上でAIに以下のように指示するだけ：

「〜の図を作って」
「システムアーキテクチャを可視化して」
「これらのコンポーネントの関係を図示して」

→ 自動的にExcalidrawファイルが生成されます

3. Obsidian連携も可能

ObsidianのExcalidrawプラグインと組み合わせることで、ノート内に図解を埋め込むことができます。

4. プライバシー重視

すべての処理がローカルで完結するため：

• 機密情報が外部に送信されない
• 社内の厳格なセキュリティポリシーにも対応
• GDPR、プライバシー法への準拠が容易

GitHubリポジトリ: https://github.com/yctimlin/mcp_excalidraw

---

🛠️ Cursorでの設定方法

前提条件

以下がインストールされていることを確認してください：

# Node.jsのバージョン確認（v18以上推奨）
node --version

ステップ1: リポジトリのクローンとセットアップ

# リポジトリをクローン
git clone https://github.com/yctimlin/mcp_excalidraw.git

# ディレクトリに移動
cd mcp_excalidraw

# 依存関係のインストール
npm install

# ビルド
npm run build

ビルドが完了すると、dist/index.jsが生成されます。このパスを次のステップで使用します。

ステップ2: MCPサーバーの起動

Excalidraw MCPを使うには、2つのプロセスを起動する必要があります：

ターミナル1: Canvasサーバー

npm run canvas

このコマンドは、Excalidrawのキャンバスサーバーを起動します（デフォルトポート: 3000）。

ターミナル2: MCPサーバー

npm start

このコマンドは、MCP通信を処理するサーバーを起動します。

Tips: 開発環境では、これらをtmuxやscreenで別ウィンドウとして起動しておくと便利です。

ステップ3: Cursorの設定

Cursorの設定ファイルにMCPサーバーの情報を追加します。

設定内容

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/absolute/path/to/mcp_excalidraw/dist/index.js"]
    }
  }
}

💡 実際に試してみた

テスト1: ツール比較図の生成

Cursorで以下のようなプロンプトを試してみました：

プロンプト:

cursor, codex, claude codeの比較を作成

結果:

プロンプトは雑だったので内容はともかくしっかりと比較図が生成されました！

生成された図の特徴

• ✅ 3つのツールが並列で比較されている
• ✅ それぞれの特徴が簡潔にまとめられている
• ✅ Excalidraw特有の手書き風デザイン
• ✅ 色分けで視覚的に区別しやすい

📝 Obsidianとの連携

Obsidianユーザーの方は、Excalidrawプラグインと組み合わせることで、さらに強力な環境を構築できます。

セットアップ手順

1. Obsidian Excalidrawプラグインのインストール

Obsidian設定 → コミュニティプラグイン → Excalidrawを検索してインストール

2. Cursorで生成した図をObsidianに埋め込む

Cursorで生成された.excalidrawファイルを、ObsidianのExcalidraw/ディレクトリに移動：

メリット

特徴	詳細
📚 一元管理	コードと図解をナレッジベースで統合
🔗 リンク機能	他のノートや図解にリンクを貼れる
🔄 双方向同期	Obsidianで編集した図をCursorから再利用
🏷️ タグ管理	図解にタグを付けて整理

活用例

1. 技術ドキュメント作成

   • Cursorでコード + 図解を生成
   • Obsidianでドキュメントとして整理

2. プロジェクト設計書

   • システム構成図、ER図、フロー図を一元管理
   • バージョン管理（Git）と連携

3. 学習メモ

   • 学んだ概念を図解化
   • Zettelkastenメソッドと組み合わせ

---

🎯 使い分けのガイドライン

Excalidraw MCPが特に有効なケースと、他のツールを検討すべきケースを整理します。

Excalidraw MCPが適している場合

✅ シンプルな図解が多い

• フローチャート
• システム構成図
• ER図

✅ ローカル実行が必須

• 機密情報を扱う
• オフライン環境での作業

✅ AIとの統合を重視

• Cursorで開発中に頻繁に図解が必要
• プロンプトから自動生成したい

✅ 手書き風デザインが好み

• プレゼン資料
• ブログ記事の挿絵

他のツールを検討すべき場合

❌ 高度なデザインが必要
→ Figma、Sketch

❌ リアルタイムコラボレーション
→ Miro、FigJam

❌ 大規模な図解管理
→ Lucidchart、draw.io（有料版）

❌ 特殊な図（UMLの詳細、複雑なネットワーク図）
→ PlantUML、Graphviz

---

📊 まとめ

Excalidraw MCPはこんな方におすすめ

ユーザータイプ	おすすめ度	理由
📝 説明資料を頻繁に作る方	⭐⭐⭐⭐⭐	コードを書きながらその場で図解を生成
🔒 セキュリティを重視する方	⭐⭐⭐⭐⭐	ローカル実行で機密情報も安心
⚡ レスポンス速度を求める方	⭐⭐⭐⭐⭐	外部APIより圧倒的に速い
🛠️ カスタマイズしたい方	⭐⭐⭐⭐	オープンソースで自由に改造可能
👥 チームコラボを重視	⭐⭐	リアルタイム共同編集には不向き

3つの要点

1. ローカル完結: すべての処理がローカルで完結し、プライバシーとレスポンス速度を両立
2. AI統合: Cursorから自然言語で指示するだけで図解を自動生成
3. 柔軟な連携: Obsidian、Git、その他のツールと組み合わせて強力なワークフローを構築

プロンプトの工夫次第で、より精度の高い図解を生成できるので、ぜひ色々試してみてください！

「人に説明したい」というシーンで、かなり使えるツールだと感じました。皆さんもぜひ試してみてはいかがでしょうか？

---

🔗 参考リンク

公式リソース

• Excalidraw MCP GitHub
• Excalidraw公式サイト
• Model Context Protocol (MCP) 仕様

関連ツール

• Obsidian Excalidrawプラグイン
• Cursor公式サイト

コミュニティ

• Excalidraw Discord
• MCP Developer Community

---