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

Drawgent: ライブExcalidrawキャンバス上のコーディングエージェント # drawgentは、Claude Code、Codex、またはopencode（あなたのインストール、ログイン、設定、リポジトリ）をExcalidrawホワイトボードに接続します。チャットパネルで図を要求したり、描画の一部を指してAGENT: …と記述したり、レーザーポインターで指したりできます。エージェントはキャンバス（シーンとスクリーンショット）を見て、ライブで編集し、自身のレイアウトをチェックします。各ボックスは、それが表すコードにリンクされており、描画に合わせてコードを変更することもできます。 # 仕組み サーバー: drawgentは単一のバイナリです。エディタを提供し、ボードを保持し、ヘッドレスChromeを実行してスクリーンショットをレンダリングします。 エージェント: drawgentはエージェントを起動するか、既に実行中のセッションに接続し、MCP経由でキャンバスツールを提供します。 ルーム: 共有のexcalidraw.comルームまたは自己ホスト型のExcalidrawドキュメントで、drawgentはもう一人の共同作業者となります。 # インストール drawgentは単一の静的バイナリです。お使いのプラットフォーム用の最新リリース0.2.1をダウンロードしてください: プラットフォーム ダウンロード チェックサム Linux x86_64 drawgent-0.2.1-x86_64-unknown-linux-musl.tar.gz sha256 Linux arm64 drawgent-0.2.1-aarch64-unknown-linux-musl.tar.gz sha256 macOS Apple Silicon drawgent-0.2.1-aarch64-apple-darwin.tar.gz sha256 macOS Intel drawgent-0.2.1-x86_64-apple-darwin.tar.gz sha256 またはターミナルから（テーブルのプラットフォーム名をtに設定してください）: v=0.2.1 t=x86_64-unknown-linux-musl # または aarch64-unknown-linux-musl, aarch64-apple-darwin, x86_64-apple-darwin base=https://tangled.org/yanndegat.tngl.sh/drawgent/tags/v$v/download curl -fLO $base/drawgent-$v-$t.tar.gz -fLO $base/drawgent-$v-$t.tar.gz.sha256 sha256sum -c drawgent-$v-$t.tar.gz.sha256 # macOS: shasum -a 256 -c … tar xzf drawgent-$v-$t.tar.gz && install drawgent-$v-$t/drawgent ~/.local/bin/ macOS: バイナリは署名されていません。xattr -d com.apple.quarantine ~/.local/bin/drawgent を一度実行してください。 その他のバージョン: 各リリースはタグページにあります。 ソースから: 開発を参照してください。 # クイックスタート インストールおよびログイン済みのエージェントが1つ必要です（claude, codex, または opencode）。それ以外は不要です。Node.jsやDockerも不要です。 drawgent setup claude # エージェントごとに一度実行: CLI、ログイン、ブリッジ、レンダラーをチェックします cd ~/my-repo drawgent up # このリポジトリで新しいエージェントセッションを開始 + ブラウザでキャンバスを表示 drawgent up --attach # または、既に実行中のセッションにキャンバスを接続します その後、次のように尋ねます: "このリポジトリのアーキテクチャを、役割ごとにグループ化し、各ボックスをコードにリンクして描画してください。" インストールとトラブルシューティングを含む完全なウォークスルーは、「はじめに」にあります。 # 機能 描画されている場所でエージェントと対話する チャットパネル: 返信とツールコールがストリームインし、権限プロンプトはボタンとして表示され、Stopでターンをキャンセルします。各ターンの下に、使用したトークン、コンテキストの使用量、コストが表示されます。 AGENT: ノート: キャンバスに書かれたノートは、入力を停止すると、それが指しているものと共にトリガーされます。エージェントは緑色のDONE: ノートで応答します。 元に戻す: エージェントの編集は元に戻すスタックに記録されます。Ctrl+Zで元に戻し、↶ Undoでターン全体を元に戻します。 → キャンバス レーザーポインターで指し、タスクを選択する Excalidrawのレーザーポインター（K）で、図の一部を円で囲む、取り消し線で消す、接続する、または離すことができます。drawgentはジェスチャーとその対象を認識します。2秒後、投票で、手作業では面倒なタスクが2〜3個提示され、その他…も選択肢に入ります。 コードからコンポーネントをドリルダウンする A → Bをコードでトレースする コードへの影響と共にアーキテクチャから削除する スペースを空けてレイアウトを再調整する ボックスを取り消し線で消すことも、エージェントに削除が何に影響するかを伝えます。 → レーザーとジェスチャー コードにリンクされた図 コードリンク: 各ボックスはファイル、行、シンボルを指すことができ、コードタブで開きます。リンクは✅ OK、↕移動済み、⚠古い、❌欠落としてチェックされ、drawgentはリンクが壊れた場合にCIで失敗します。 リポジトリマップ: 🗺 Map repoはワークスペースをトレマップとして描画し、各ファイルがリンクされます。 コードを指す: パスを入力する代わりに、フォルダ、ファイル、行を指します。 🔨 描画したものをビルドする: 図を変更すると、エージェントが変更を実装し、キャンバスに進捗状況をマークします。 → コードと図 ボード、およびリポジトリ内の図 ボード: ワークスペースごとに好きなだけボードを作成できます。ボード間で図を移動またはコピーしたり、フレームごとに分割したりできます。 リポジトリ内: --diagram docs/architecture.excalidraw は、クリーンでdiff可能な.excalidrawファイルにボードを保持し、git pullに従います。 → キャンバス あなたのエージェント、あなたのやり方で エージェント: Claude CodeとCodexはdrawgentに組み込まれたブリッジ経由で、opencodeはネイティブで利用できます。 セッション: 新しいセッションを開始するか、実行中のセッションに--attachします。Claudeセッションはフォークされ、opencodeとCodexセッションはライブで結合されます。 権限: --permissions canvas|ask|all。 → エージェント 共有ドキュメントとブラウザ拡張機能 ルーム: excalidraw.comのルーム、または自己ホスト型Excalidrawの任意のドキュメントに共同作業者として参加します（drawgent remote add、SSOの後ろでもそうでなくても）。 Firefox拡張機能: 開いているドキュメントの隣にdrawgentサイドバーが表示されます。ワンクリックで参加でき、そこでのレーザー操作がジェスチャーになります。 → 共有ルーム・ブラウザ拡張機能 作業場所で実行する バックグラウンド: drawgent up -d、その後 status および down。 キャンバスのみ: --no-workspace、コードベースがない図用。 リモートマシン: ヘッドレスマシンでのssh -Lヒント、公開されているものには--token。 → Drawgentの実行 ドキュメント ページ 内容 はじめに インストール、セットアップ、最初の図、トラブルシューティング ユースケース ウォークスルー: コードベースの理解、機能の設計と構築、PRアーキテクチャのレビュー、アーキテクチャドキュメントの正確性の維持、コードなしでのホワイトボード、チームメイトのドキュメントでの作業 キャンバス チャットパネル、AGENT: ノート、元に戻す、複数のボード、リポジトリ内の.excalidrawファイル レーザーとジェスチャー レーザーゾーン、各ジェスチャーと提示されるタスク、取り消し線、スペースの確保 コードと図 コードリンク、コードタブ、リポジトリマップ、コードのポインティング、描画したもののビルド、drawgentチェック エージェント Claude Code、Codex、opencode: セットアップ、ブリッジ、--attach、権限、その他のMCPエージェント 共有ルーム excalidraw.com、自己ホスト型サーバー、リモート追加、トークン、設定、制限 ブラウザ拡張機能 Firefoxサイドバーのインストールと使用方法、仕組み Drawgentの実行 バックグラウンドモード、キャンバスのみ、リモートマシン、トークン、ファイルの場所、Docker リファレンス すべてのコマンドとオプション、設定ファイル、環境変数、MCPツール、REST API 開発 ビルド、コードレイアウト、テスト、CIとリリース、拡張機能、画像の再生成 コマンド コマンド drawgent setup <claude|codex|opencode|firefox> エージェントを一度セットアップするか、ブラウザ拡張機能をインストールします。 drawgent up [--attach] [-d] [--room LINK] [--diagram FILE] [--no-workspace] エージェントと共にキャンバスを起動します。 drawgent status / drawgent down 実行中のdrawgentのステータス確認/停止。 drawgent remote add LINK / drawgent remote list 自己ホスト型Excalidrawサーバーを追加/リストします。 drawgent check [--fix] CIのために図のコードリンクをチェックします。 drawgent serve, drawgent mcp 明示的なエージェントを持つ低レベルサーバー。MCPサーバーエージェントを起動します。 drawgent licenses ライセンスと第三者通知を表示します。 すべてのオプションはリファレンスに記載されています。 # 制限 Chrome: レンダラーにはChromeまたはChromiumが必要です。setupはそれを見つけるかインストールします。 Claude --attach: Claude Codeには実行中のターミナルセッションにメッセージを注入する公開された方法がないため、フォークされます。 Codex --attach: ログイン済みのCodexに対してライブアタッチはまだテストされていません。 ルーム: ルームは1つのボードをミラーリングし、画像は同期されません。自己ホスト型サーバーでは、ブラウザでドキュメントが開かれている必要があります（保存されます）。共有ルーム > 制限を参照してください。 macOS: ビルドはクロスコンパイルされ、署名されておらず、実際のMacではテストされていません。 # ライセンス drawgentはフリーソフトウェアです: GPL-3.0-or-later、保証なし。drawgent licensesは通知を表示します。バイナリはGPL互換ライセンス（MIT、Apache-2.0、BSD、ISC、フォント用のOFLなど）の下で第三者の作業をバンドルしています。完全なテキストはTHIRD_PARTY_LICENSES.mdにあります。コーディングエージェントとChromeはdrawgentの一部ではありません。それらは独自のインストールから、独自の条件で実行されます。