Excalidraw MCP Server
Excalidraw MCP サーバー
自然言語から美しい Excalidraw ダイアグラムを生成します。クラウド API は不要で、完全にローカルで動作します。
「eコマースアプリのマイクロサービスアーキテクチャを描いて」のように指示すると、MCP サーバーがローカルの llama.cpp LLM を呼び出し、すぐに開ける .excalidraw ファイルを作成します。
仕組み
You (Claude Desktop / Cursor)
↓ natural language description
MCP Server (this project)
↓ structured prompt + Excalidraw JSON spec
llama.cpp (localhost:8080)
↓ raw Excalidraw JSON
MCP Server → validates + saves → ~/excalidraw_diagrams/my-diagram.excalidraw
↓
Open in Excalidraw前提条件
要件 | バージョン | 備考 |
Python | ≥ 3.11 |
|
uv | 最新 |
|
llama.cpp | 最新 | ステップ 1 を参照 |
GGUF モデル | 7B+ 推奨 | ステップ 2 を参照 |
Excalidraw | Web またはローカル | ステップ 5 を参照 |
セットアップ
ステップ 1 — llama.cpp のビルド
git clone https://github.com/ggerganov/llama.cpp
cd llama.cpp
cmake -B build
cmake --build build -j$(nproc)Apple Silicon 搭載の macOS では、GPU アクセラレーションのために
-DLLAMA_METAL=ONを追加してください。
ステップ 2 — GGUF モデルのダウンロード
推奨モデル (JSON 出力品質が良好):
モデル | サイズ | HuggingFace パス |
Qwen2.5-7B-Instruct (推奨) | ~4.5 GB |
|
Llama-3.1-8B-Instruct | ~4.7 GB |
|
Mistral-7B-Instruct-v0.3 | ~4.1 GB |
|
# Inside the llama.cpp directory:
mkdir models
# Download with huggingface-cli (pip install huggingface_hub):
huggingface-cli download Qwen/Qwen2.5-7B-Instruct-GGUF \
qwen2.5-7b-instruct-q4_k_m.gguf \
--local-dir models/ステップ 3 — llama.cpp サーバーの起動
# From inside the llama.cpp directory:
./build/bin/llama-server \
-m models/qwen2.5-7b-instruct-q4_k_m.gguf \
--port 8080 \
-c 8192 \
--host 0.0.0.0動作確認:
curl http://localhost:8080/health
# → {"status":"ok"}ステップ 4 — MCP サーバーのインストール
# Clone this repo
git clone <repo-url>
cd exclalidraw_mcp
# Install with uv (recommended)
uv sync
# Or with pip
pip install -e .CLI エントリポイントが動作することを確認:
excalidraw-mcp --helpステップ 5 — MCP クライアントの設定
Claude Desktop (Linux)
~/.config/claude/claude_desktop_config.json を編集します:
{
"mcpServers": {
"excalidraw": {
"command": "excalidraw-mcp"
}
}
}
uvを使用している場合は、"command": "excalidraw-mcp"を以下に置き換えてください:"command": "uv", "args": ["--directory", "/absolute/path/to/exclalidraw_mcp", "run", "excalidraw-mcp"]
Claude Desktop (macOS)
~/Library/Application Support/Claude/claude_desktop_config.json を同じ内容で編集します。
Cursor / VS Code
上記と同じサーバー設定を MCP 設定に追加します。
設定を編集した後、アプリを再起動してください。
ステップ 6 — Excalidraw をローカルで実行する (オプション)
excalidraw.com はいつでも無料で使用できますが、完全にローカルで実行するには以下を行います:
docker run -p 5000:80 excalidraw/excalidraw:latest
# Open http://localhost:5000または Node を使用する場合:
npx excalidraw使用方法
MCP サーバーが接続されたら、AI クライアントに次のように依頼します:
Generate a flowchart for a user login system with OAuthDraw a microservices architecture for an e-commerce platform with cart, payment, and inventory servicesCreate a mind map about machine learning: supervised, unsupervised, reinforcement learningMake a sequence diagram showing a REST API request from browser to server to database and backDraw an ER diagram for a blog: users, posts, comments, tags利用可能な MCP ツール
ツール | 説明 |
| メインツール — テキストからダイアグラムを生成 |
| llama.cpp が実行中か確認 |
| 保存されたすべてのダイアグラムを一覧表示 |
generate_diagram パラメータ
パラメータ | 型 | デフォルト | 説明 |
| string | 必須 | ダイアグラムの内容 |
| string |
|
|
| string |
| 出力ファイル名 (拡張子不要) |
生成されたダイアグラムを開く
ダイアグラムは ~/excalidraw_diagrams/ に保存されます。
excalidraw.com またはローカルインスタンスを開く
フォルダアイコン (左上) をクリック → 開く
.excalidrawファイルを選択
テストの実行
# Install test dependencies
uv add --dev pytest pytest-anyio respx
# Run all tests
pytest tests/ -vトラブルシューティング
「llama.cpp server is not running」
curl http://localhost:8080/health を実行してください。失敗する場合はサーバーを起動してください (ステップ 3)。
「Could not parse LLM output as valid Excalidraw JSON」
LLM が不正な JSON を返しました。以下を試してください:
より優れたモデル (Qwen2.5-7B 以上) を使用する
llama.cpp が
-c 8192(十分なコンテキスト) で起動されていることを確認するパイプラインが機能するか確認するため、まずは単純な説明を試す
「ダイアグラムが正しくない / 要素が欠けている」
説明をより具体的にする
diagram_typeを明示的に指定する (例:"freeform"ではなく"flowchart")より大きなモデル (13B+) は、レイアウトが大幅に改善されます
Claude Desktop にツールが表示されない
claude_desktop_config.jsonに JSON 構文エラーがないか確認するClaude Desktop を完全に再起動する
ログを確認する:
~/.config/claude/logs/(Linux) または~/Library/Logs/Claude/(macOS)
プロジェクト構造
exclalidraw_mcp/
├── src/excalidraw_mcp/
│ ├── server.py ← MCP server + tool definitions
│ ├── llm_client.py ← llama.cpp HTTP client
│ ├── generator.py ← Prompt building + JSON parsing + validation
│ └── schema.py ← Excalidraw element dataclasses
├── prompts/
│ └── examples/ ← Few-shot example diagrams (flowchart, mindmap, sequence)
├── examples/
│ └── sample.excalidraw ← Reference diagram you can open immediately
├── tests/
│ ├── test_generator.py
│ └── test_llm_client.py
├── pyproject.toml
└── README.mdより良いダイアグラムのためのヒント
具体的に記述する: 「ログインフロー」よりも「メール/パスワード、JWT トークン、セッションストレージを使用したログインフロー」の方が優れています
要素に名前を付ける: 「矢印でつながれた A、B、C というラベルのボックス」のように指定すると、Excalidraw がその命名に従います
色を指定する: 「サービスには青、データベースには黄色を使用」のように指定します
焦点を絞る: すべてを表示しようとするよりも、1 つのダイアグラムにつき 1 つの論理的概念に絞る方がうまくいきます
自由に再生成する: 最初の結果が完璧でない場合は、別のファイル名で再度依頼してください。すぐに生成されます
ライセンス
MIT
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/jeel00dev/exclalidraw_mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server