Excalidraw Mcp

excalidraw-mcp

AI で 25 種類以上の美しい手描き風ダイアグラムを生成できます。フローチャート、シーケンス図、アーキテクチャ図、マインドマップ、ER 図、クラス図、状態図、タイムライン、円／棒／折れ線／レーダーチャート、カンバン、ワイヤーフレーム、決定木などに対応し、Sugiyama 階層レイアウト、CJK 対応、学習コストゼロを実現します。

Maaker.AI 提供

ショーケース

以下の画像はすべて、単一のツール呼び出しで生成されました。座標の指定や手動でのレイアウトは不要です。.excalidraw ソースは docs/showcase/ にあります。いずれかを excalidraw.com にドラッグすると、引き続き編集できます。

フローチャート（分岐＋循環＋CJK）	階層型アーキテクチャ

インストール

Claude Code（推奨）

claude mcp add excalidraw -- uvx maaker-excalidraw-mcp

Claude Desktop

MCP 設定（~/Library/Application Support/Claude/claude_desktop_config.json）に追加します。

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

opencode / Cursor / 任意の MCP クライアント

{
  "mcp": {
    "excalidraw": {
      "type": "local",
      "command": ["uvx", "maaker-excalidraw-mcp"],
      "enabled": true
    }
  }
}

（opencode の例です。Cursor などのクライアントでも、MCP 設定形式で同じ uvx maaker-excalidraw-mcp コマンドを使用します。）

pip

pip install maaker-excalidraw-mcp

ツール

ツール	説明
create_flowchart	Sugiyama レイアウトによるフローチャート。分岐、結合、循環、グループに対応
create_architecture_diagram	接続を含む階層型アーキテクチャ図
create_sequence_diagram	ライフラインとメッセージを含む UML シーケンス図
create_class_diagram	属性、メソッド、関係を含む UML クラス図
create_state_diagram	初期状態と終了状態を含む UML 状態機械
create_er_diagram	カーディナリティを含むエンティティ関係図
create_mindmap	分岐を自動で色分けするツリー型マインドマップ
create_timeline	重なり合うイベントに対応したタイムライン／ガントチャート
create_pie_chart	ラベルと割合を表示する円グラフ
create_kanban_board	列とカードを含むカンバンボード
create_network_diagram	タイプ指定のノード（サーバー、DB など）を含むネットワークトポロジー
create_quadrant_chart	2x2 の優先度／ポジショニングマトリックス
create_user_journey	感情インジケーターを含むユーザージャーニーマップ
create_wireframe	デバイスフレーム付きの UI ワイヤーフレームモックアップ
create_org_chart	組織図（トップダウン型の階層構造）
create_swot_analysis	2x2 の色分けされた SWOT 分析マトリックス
create_table	列幅を自動調整し、行を交互に色分けするグリッドテーブル
create_bar_chart	棒とラベルを自動スケーリングする縦棒グラフ
create_line_chart	複数系列に対応した折れ線グラフ
create_radar_chart	複数系列を重ねて表示するレーダー／スパイダーチャート
create_decision_tree	ひし形の判断ノードと長方形の結果を含む決定木
import_mermaid	Mermaid 構文（フローチャート、シーケンス図、クラス図、状態図）をインポート
list_diagram_types	利用可能なすべてのダイアグラムタイプを一覧表示
modify_diagram	既存のダイアグラムでノードと接続を追加／削除
read_diagram	既存の .excalidraw ファイルを分析
export_diagram	ダイアグラムを SVG 形式にエクスポート

クイック例

フローチャート

AI アシスタントに次のように伝えるだけです。

"Create a flowchart: User Request → Load Balancer → API Server → Database"

AI が構造化データを使って create_flowchart を呼び出し、次の内容を含む .excalidraw ファイルが生成されます。

• Sugiyama 階層レイアウト — 分岐、合流、循環、非連結のサブグラフを適切に処理します
• テキストの内容に基づいてボックスのサイズを自動計算します
• テキストを正確に中央揃えします（中国語／CJK 文字を含む）
• 適切なエッジバインディングを使って矢印をスマートに配置します
• ドキュメントやプレゼンテーションに映える手描き風のスタイルです
• 4 方向：LR（左から右）、RL、TB（上から下）、BT

アーキテクチャ図

"Create an architecture diagram with Frontend (React, Next.js), Backend (API Server, Auth Service), and Database (PostgreSQL, Redis) layers"

コンポーネントを階層別に整理し、自動でサイズを調整して階層間を接続したレイヤー構造の図を生成します。

読み取りと変更

"Read the diagram at ./my-system.excalidraw and add a 'Cache' node connected to the API Server"

既存の .excalidraw ファイルを使い、その構造の読み取り、ノードの追加・削除、接続の追加ができます。

excalidraw-mcp を選ぶ理由

公式 Excalidraw MCP（excalidraw/excalidraw-mcp）との比較

機能	公式 MCP	excalidraw-mcp
アプローチ	生の JSON — AI が各要素を手作業で配置します	構造化入力 — 作りたいものを伝えるだけで、図を生成します
レイアウト	AI が座標を計算します	Sugiyama 階層自動レイアウト
分岐／合流	AI が配置を判断する必要があります	自動 — レイアウトエンジンが処理します
CJK テキスト	幅の推定なし	CJK／混在スクリプトの幅を正確に計算します
テキストの中央揃え	AI が x/y オフセットを計算する必要があります	コンテナ内で自動的に中央揃えします
矢印のバインディング	AI がバインディングを管理する必要があります	fixedPoint + orbit バインディングを自動で行います
ローカルファイル	ローカルファイルの読み書きはできません	読み取り、変更、保存を全面的にサポートします
配布方法	リモート URL / .mcpb	uvx / pip（標準的な Python）
トークン使用量	形式を学ぶために read_me の呼び出しが必要です	形式の知識が組み込まれています

Mermaid ベースのツールとの比較

• 自由なレイアウト：Mermaid 構文の制約に縛られません
• 手描き風のスタイル：コードブロックを描画するのではなく、Excalidraw 本来の見た目です
• 編集可能な出力：.excalidraw ファイルを excalidraw.com にドラッグすると、引き続き編集できます

ツールリファレンス

create_flowchart

Input:
  nodes: [{label: "Step 1", color?: "blue", shape?: "rectangle"}]
  edges: [{from: "Step 1", to: "Step 2", label?: "next"}]
  direction?: "LR" | "RL" | "TB" | "BT"  (default: "LR")
  title?: "My Flowchart"
  output_path?: "/path/to/output.excalidraw"

Output: Path to generated .excalidraw file

色：blue、green、purple、yellow、red、gray、orange、pink

形状：rectangle（デフォルト）、diamond（判断）、ellipse（開始／終了）

create_architecture_diagram

Input:
  layers: [{
    name: "Frontend",
    color?: "blue",
    components: [{label: "React"}, {label: "Next.js"}]
  }]
  connections?: [{from: "React", to: "API Server"}]
  output_path?: "/path/to/output.excalidraw"

Output: Path to generated .excalidraw file

modify_diagram

Input:
  file_path: "/path/to/existing.excalidraw"
  add_nodes?: [{label: "New Node", color?: "green", x?: 100, y?: 100}]
  remove_labels?: ["Old Node"]
  add_connections?: [{from: "A", to: "B"}]
  output_path?: "/path/to/output.excalidraw"

Output: Path to modified file

read_diagram

Input:
  file_path: "/path/to/diagram.excalidraw"

Output: Structured description (shapes, connections, colors)

export_diagram

Input:
  file_path: "/path/to/diagram.excalidraw"
  format: "svg"

Output: Path to exported SVG file

技術的な詳細

Sugiyama 階層レイアウト

grandalf ライブラリを使って、適切な有向グラフレイアウトを実現します。

• レイヤー割り当て：グラフのトポロジーに基づいてノードをレイヤーに配置します
• 交差の最小化：複数回の最適化によってエッジの交差を減らします
• 座標の割り当て：レイヤー内の配置をバランスよく調整します
• 循環の処理：循環グラフのフィードバックエッジを検出します
• 非連結のサブグラフ：横並びに自動配置します

CJK 幅の推定

中国語／英語の混在テキストの幅を正確に計算します。

文字種	幅（fontSize=20 の場合）
CJK 文字	1 文字あたり約 22px
ASCII の英字／数字	1 文字あたり約 11px
空白	約 5px

矢印のバインディング

Excalidraw の最新の fixedPoint + orbit バインディングを使います（非推奨の focus／gap 形式は使いません）。

{
  "startBinding": {
    "elementId": "box1",
    "fixedPoint": [1.0, 0.5001],
    "mode": "orbit"
  }
}

矢印は相対位置に基づいて、正しいエッジに自動で接続されます。

開発

git clone https://github.com/maaker-ai/excalidraw-mcp.git
cd excalidraw-mcp
uv sync --dev
uv run pytest

ライセンス

MIT