Skip to main content
Glama
jeel00dev

Excalidraw MCP Server

by jeel00dev

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

python3 --version

uv

最新

pip install 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

Qwen/Qwen2.5-7B-Instruct-GGUF

Llama-3.1-8B-Instruct

~4.7 GB

meta-llama/Meta-Llama-3.1-8B-Instruct-GGUF

Mistral-7B-Instruct-v0.3

~4.1 GB

mistralai/Mistral-7B-Instruct-v0.3-GGUF

# 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 OAuth
Draw a microservices architecture for an e-commerce platform with cart, payment, and inventory services
Create a mind map about machine learning: supervised, unsupervised, reinforcement learning
Make a sequence diagram showing a REST API request from browser to server to database and back
Draw an ER diagram for a blog: users, posts, comments, tags

利用可能な MCP ツール

ツール

説明

generate_diagram(description, diagram_type, filename)

メインツール — テキストからダイアグラムを生成

check_llm_status()

llama.cpp が実行中か確認

list_diagrams()

保存されたすべてのダイアグラムを一覧表示

generate_diagram パラメータ

パラメータ

デフォルト

説明

description

string

必須

ダイアグラムの内容

diagram_type

string

"flowchart"

flowchart, mindmap, sequence, architecture, erd, freeform

filename

string

"diagram"

出力ファイル名 (拡張子不要)

生成されたダイアグラムを開く

ダイアグラムは ~/excalidraw_diagrams/ に保存されます。

  1. excalidraw.com またはローカルインスタンスを開く

  2. フォルダアイコン (左上) をクリック → 開く

  3. .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

より良いダイアグラムのためのヒント

  1. 具体的に記述する: 「ログインフロー」よりも「メール/パスワード、JWT トークン、セッションストレージを使用したログインフロー」の方が優れています

  2. 要素に名前を付ける: 「矢印でつながれた A、B、C というラベルのボックス」のように指定すると、Excalidraw がその命名に従います

  3. 色を指定する: 「サービスには青、データベースには黄色を使用」のように指定します

  4. 焦点を絞る: すべてを表示しようとするよりも、1 つのダイアグラムにつき 1 つの論理的概念に絞る方がうまくいきます

  5. 自由に再生成する: 最初の結果が完璧でない場合は、別のファイル名で再度依頼してください。すぐに生成されます


ライセンス

MIT

Install Server
F
license - not found
A
quality
C
maintenance

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