開発者向けの新しい道具は、見た目が派手でも中身が薄いことがあります。ですが今回の drawgent は、ただのデモではなく、Excalidraw のキャンバスに接続した実用寄りのエージェントとして作り込まれていました。コードや図を同じ画面で扱いながら、対話で修正し、さらに手描きのジェスチャーまで入力にしてしまう発想が面白いです。しかも更新履歴を見ると、UI の飾りよりも、実際に使えるようにするための細かな改良がかなり詰め込まれています。
drawgent で進んでいたこと元記事は Tangled 上のリポジトリ yanndegat.tngl.sh/drawgent を見せています。説明欄は空で、README の冒頭だけが見えている状態ですが、そこからはこのプロジェクトが何を目指しているかは読み取れます。drawgent は「自分の Claude Code、Codex、opencode」を Excalidraw のホワイトボードにつなぎ、チャット欄で「図を描いて」と頼んだり、図の横に AGENT: と書いてその部分を直させたりできる仕組みです。エージェントはキャンバスのスクリーンショットと scene を見て、その場で編集し、結果を確認してから反映します。
更新履歴には、かなり具体的な改良が並んでいます。たとえば、Gesture poll offers 2-3 agent tasks that fit what the gesture is on, plus Other というコミットでは、手で引いたジェスチャーに応じて 2〜3 個の作業候補を出す方式に変えています。以前のような直接実行の apply ではなく、gesture::options がジェスチャーと対象に応じて「drill down」「check against the code」「trace A -> B in the code」「cut a dependency」「extract to a board」「merge」「tidy」「expand」「find its code」「propose what goes here…」といったタスクを選ぶようになりました。コードに結びついた図形の上でなければコード系のタスクは出さず、1 つ選ぶとゾーン付きでエージェントに送られます。Other... を押すとチャット入力が開きます。
別の更新では、レーザーのようなジェスチャーに対して、apply / cancel / chat のポーリングを出すようにしています。最後のストロークから 2 秒たつと、チャット欄にそのジェスチャー名と「消す」「つなぎ直す」「隙間を閉じる」「スペースを作る」「動かす」「接続する」といった動作予定が出ます。Apply を押すとそのまま 1 回の undoable change として実行され、Cancel や Esc で破棄できます。さらに、ストロークには要素ラベルが載るようになっています。
ほかにも、赤い小さな線としてジェスチャーの意味を一覧できるヘルプカード、キャンバス内の要素を消したときに矢印や接続をつなぎ直す挙動、図の一部に余白を作る make_space、エージェント編集だけを Undo できる履歴管理、.gitignore を考慮したファイル一覧取得、レイアウト検査 check_layout、自動配置 add_graph、変更差分だけ返す get_scene など、単なる試作を越えた実装が進んでいます。Git の履歴を見ると、main のほかに refactor/kiss-module-layout というブランチもあり、モジュール配置の整理まで進んでいることが分かります。
このプロジェクトで一番おもしろいのは、最終目標が「きれいな図を自動生成すること」ではなさそうな点です。むしろ、図を中心にして会話、修正、コード参照、配置調整を行き来する作業環境を作ろうとしている。そこが普通のAI描画ツールと違います。多くの生成ツールは、入力して出力を眺めるところで止まります。でも drawgent は、描いたあとに「この矢印は消してつなぎ直したい」「ここは詰まりすぎだから空けたい」「この部品はコード上のどこに対応するのか知りたい」という、実際の作業で出る面倒に踏み込んでいる。私はここがかなり本質的だと思います。
しかも、ジェスチャーを「実行命令」ではなく「候補を出すきっかけ」にしているのが巧いです。手描きの線は曖昧なので、いきなり確定動作にすると誤爆しやすい。そこで、ジェスチャーから複数のタスク候補を出し、必要なら Other で会話に流す。これは、直感的な入力と安全な確認の折り合いを取る設計です。AI に全部を任せるのではなく、人間が最後に選べる余地を残している。道具としてはむしろ健全です。
更新履歴を読むと、見た目の派手さよりも Undo や check_layout のような地味な機能がかなり重要視されているのが分かります。これは実用品としてとても大事です。生成系のツールは、1 回うまく動くより、失敗したあとに取り返せるほうがずっと価値があります。drawgent はエージェント編集を journal 化し、最後の編集やターン単位で戻せるようにしている。人間がその後に触った要素は保護されるようで、ここにも「AI の変更を無条件で上書きしない」という姿勢が見えます。
check_layout も単なる飾りではありません。重なり、途中で切れた単語、矢印ラベルが長すぎる、図形の上に矢印が乗っている、フォントが小さすぎる、コントラストが低い、といった問題を検査して、必要なら update_elements のパッチを返すようです。これは、AI が作った図は見られるけれど読みづらい、というありがちな失敗を防ぐための仕組みです。私はここに、生成 AI を「賢い助手」ではなく「雑に仕事を増やす可能性がある存在」と見て、その雑さをシステム側で抑え込もうとしている意図を感じます。
drawgent が刺さる相手は、単にアプリを実装したい人より、設計や構造を図で考える人だと思います。アーキテクチャ図、コンポーネントの依存関係、処理の流れ、あるいは「このブロックをどこへ移すか」といった判断を、テキストのチャットだけでなくキャンバス上でやりたい人です。とくに、コードと図が往復する場面では強そうです。図の上に AGENT: と書いてその場を直させるのは、コードレビューでコメントを付ける感覚に近い。説明よりも、位置関係そのものを使って指示できるからです。
一方で、こうした道具は設計思想が強いぶん、普及の壁もあると思います。ジェスチャー、ポーリング、ヘルプカード、Undo、チャット、図形の意味づけまで揃っているので、理解するまで少し学習が要るはずです。誰でもすぐ使える汎用ツールというより、使い方を知っている人ほど気持ちよく動かせるタイプでしょう。だからこそ、README の説明やヘルプの見せ方が重要になります。機能そのものより、迷わず使える導線が採用の分かれ目になるはずです。
最後に、Tangled 上で公開されている点にも触れておきたいです。drawgent の更新履歴はかなり細かく、コミットメッセージも実装の意図をそのまま書いています。これは、完成品を見せるというより、作っている途中の判断をそのまま外に出す文化に近い。一般的な製品ページなら、ユーザーは出来上がった機能しか見ません。でもここでは、どんな取捨選択があり、どこに苦労しているかまで追える。開発者にとってはありがたい透明性ですし、読む側にとっても「このツールは何を大事にしているか」が伝わりやすい。
私は、drawgent は「AIで図を描く」話を一段進めた例だと思います。出力の見た目より、作業の往復をどう減らすか。そこに焦点を置くと、AI は派手な自動生成機ではなく、キャンバス上の面倒を肩代わりする相棒になります。まだ道具立ては増え続けている途中ですが、その方向性はかなり筋がいいです。