drawgent – ライブExcalidrawキャンバス上のAIコーディングエージェント

TL;DR

drawgentは、独自のClaude Code、Codex、またはopencodeインスタンスをExcalidrawホワイトボードに接続し、キャンバス上で AGENT: メモを入力したりレーザーゾーンを使用したりすることで、LLMに図をライブ編集させることができます。これにより、視覚的なブレインストーミングがコードを認識した図の更新を直接促進する双方向のワークフローが実現します。

drawgentの機能

ライブキャンバス編集 – エージェントがスクリーンショットとシーンのスナップショットを監視し、MCPツール呼び出し（要素の追加、更新、削除）を発行し、完了するとメモを DONE: とマークします。
複数のバックエンド – それぞれのACPアダプターを介してClaude Code、Codex、opencodeをサポートします。エージェントのバイナリはバンドルされておらず、独自のCLIを提供します。
2つのインタラクションモード –
1. チャットパネル – Web UIの右側にあり、テキストによるリクエスト用。
2. キャンバス上のトリガー (AGENT: テキストメモまたはレーザーゾーン) – 短い一時停止の後、自動的にエージェントを呼び出します。
バージョン管理された図 – --diagram を使用すると、キャンバスはクリーンな .excalidraw ファイルとして保存され、Gitにコミットでき、変更時にはライブビューに同期されます。

クイックスタートチェックリスト

サポートされているエージェント（claude、codex、opencode）のいずれかをインストールしてログインします。
drawgent setup <agent> を実行します。このコマンドはCLI、ログイン状態、ACPブリッジ、キャンバスツール、Chromeレンダラーを検証し、~/.config/drawgent/config.toml を書き込みます。

リポジトリディレクトリでセッションを開始します：

drawgent up               # 新しいエージェントセッションを起動し、キャンバスを開く
# または既存のセッションにアタッチする
drawgent up --attach

オプションで図を永続化します：

drawgent up --diagram docs/architecture.excalidraw

アーキテクチャの概要

drawgent architecture

ブラウザUI – チャットパネルとレーザーゾーン処理を備えたReactベースのエディタ。
drawgentサーバー (Rust) – ACPセッション、MCPツールサーバー、Chromeレンダラー、WebSocket同期を管理します。
エージェントプロセス – MCP呼び出しを受信する、フォークまたはライブアタッチされたClaude/Codex/opencodeセッション。
Chromeヘッドレス – ビジョン (get_screenshot) と要素のジオメトリのためにキャンバスをレンダリングします。

主要コマンド

コマンド	目的
`drawgent setup <agent>`	環境の検証、ACPアダプターのインストール、Chromeの設定、`config.toml` の書き込みを行います。
`drawgent up`	新しいエージェントセッションを開始し、UIを起動し、`127.0.0.1:7300` でキャンバスを提供します。
`drawgent up --attach [id]`	UIをすでに実行中のエージェントセッション（Claudeフォーク、opencodeライブTUI、またはCodexキュー）に接続します。
`drawgent up --diagram <path>`	ライブキャンバスをGitで追跡される `.excalidraw` ファイルに永続化します。
`drawgent up --room <url>`	既存のExcalidraw.comルームにコラボレーティブボット (`🤖 Agent`) として参加します。
`drawgent mcp`	カスタムスクリプト用のキャンバスツールを公開するスタンドアロンMCPサーバー。
`drawgent serve`	コンテナ化されたデプロイメント用の低レベルサーバー。`--agent` フラグでエージェントを指定します。

キャンバスの効果的な使用方法

AGENT: メモ – 図形の横にプレフィックスを配置するか、図形に向かって矢印を描きます。入力を停止すると、drawgentは約2.5秒待機し、ターゲットを解決して緑色の DONE: メモで返信します。
レーザーゾーン – Excalidrawのレーザー (K) をアクティブにして領域を囲むと、赤い輪郭が表示されます。チャットパネルが開き、カバーされた要素（例: 🔴 Laser zone · API, Redis）をリストするチップが表示されます。次のメッセージはゾーンデータと一緒に送信され、エージェントが終了すると輪郭は消えます。
権限モデル – デフォルトでは、描画ツールは自動承認されます (canvas 権限)。その他のアクション（ファイル書き込みなど）は、チャットパネルでの明示的な承認が必要です。

永続化とコラボレーション

Gitで追跡される図 – .excalidraw ファイルにはライブ要素のみが含まれ、プリティプリントされており、キャンバスが変更されたときにのみ更新されるため、クリーンな差分が得られます。
ルームモード – Excalidraw.comのルームURLを指定すると、drawgentはコラボレーターとして参加します。トラフィックはルームキーでエンドツーエンド暗号化され、ローカルUIはリモートルームをミラーリングします。
Dockerオプション – docker compose up --build は、エージェントなしでキャンバスサーバー（drawgent + Chromium）を実行します。共有ホワイトボードやルームブリッジに便利です。

ビルドと配布

ソースから – npm ci && npm run build でWebアセットをビルドし、cargo install --path . でバイナリを生成します。
静的Linux – make musl は完全に静的なx86_64バイナリを作成します。ARMの場合は MUSL_TARGET を設定してください。
macOSユニバーサル – make darwin はZigを使用してLinuxからユニバーサルバイナリ（Intel + Apple Silicon）をクロスビルドします。arm64スライスはアドホック署名されます。
依存関係 – レンダリングにはChrome/Chromiumが必要です。インストーラーはヘッドレスシェルをダウンロードするか、システムパッケージマネージャーを使用できます。

Hacker Newsからのコミュニティの洞察

seemaze は、ExcalidrawがすでにファーストパーティのMCPエンドポイントとサーバー (https://mcp.excalidraw.com) を提供していることを指摘しています。drawgentのカスタムMCPレイヤーは、公式エンドポイントがまだ公開していないClaudeとCodexのライブアタッチ機能を追加しています。

armanj はObsidian内でMermaidを使用する個人的なワークフローを共有し、Mermaidは「エージェントフレンドリー」ですが、drawgentはキャンバスを直接編集することでより豊かな視覚的フィードバックループを提供すると述べています。

4ndrewl は、図解の真の価値はそれが引き起こす思考にあると強調しており、drawgentはLLMがスケッチを即座に反復できるようにすることでこの原則をサポートしています。

raesene9 は代替案としてExcalidraw Obsidianプラグインに言及していますが、drawgentの図をリポジトリに永続化し、既存のエージェントセッションにアタッチする機能は、コードベースとのより緊密な統合を提供します。

bad_haircut72 は、アーキテクチャ図生成の別の選択肢としてwhiteboard-mcpサービス (whiteboard-mcp.com) を推奨しており、MCP互換ツールの成長するエコシステムを強調しています。

brumar は、実装のアイデアやdrawgentのExcalidrawおよびマルチエージェントサポートへの注力との対比として検討できる類似プロジェクト whiteboard-agents をリリースしました。

ramoz は、HTMLベースのホワイトボードの方がExcalidrawのようなJSON重視のフォーマットよりもエージェントに豊かなセマンティクスを提供できる可能性があると主張していますが、drawgentはすでにLLMがExcalidrawのJSONモデルを効果的に操作できることを実証しています。

注意すべき制限事項

Chromeへの依存 – 現在のレンダラーはChrome/Chromiumバイナリに依存しています。ネイティブレンダラーが計画されていますが、まだ利用できません。
Claudeアタッチモデル – Claude CodeにはパブリックなインジェクションAPIがないため、drawgentはキャンバスアタッチごとに新しいClaudeセッションをフォークします。
Codexライブアタッチ – 実装されていますが、執筆時点ではログイン済みのCodexアカウントで完全にはテストされていません。
ワークスペースごとに1つのシーン – 1つのライブキャンバスと1つの .excalidraw ファイルのみがサポートされています。画像やその他のアセットは同期されません。

参加方法

テストスイートの実行 – cargo test はフラクショナルインデックスとルーム暗号化をカバーしています。Nodeスクリプト (smoke.mjs、e2e-browser.mjs など) はエンドツーエンドのキャンバスインタラクションを検証します。
貢献 – リポジトリは主にRust（コードの約77%）で、小さなJavaScript/HTMLフロントエンドがあります。ネイティブレンダリング、マルチシーンサポート、またはより広範なMCP互換性に関する課題が良い入り口となります。
ワークフローの共有 – コミュニティメンバーはすでに代替のホワイトボードツール、Mermaidベースのプラグイン、カスタムMCPサーバーを投稿しています。具体的なユースケースを共有することで、プロジェクトの成熟に役立ちます。