PPTを作ったり、レポートを書いたり、論文をまとめたりする中で、いちばんつらいのは文章を書くことではなく、図を用意することです。
下手な図は、自分で見ても耐えられません。複雑な図は、一度修正するだけで全体が崩れます。ネットで画像を探しても、透かしが入っていたり、拡大するとモザイクのようにぼやけたりします。では、AIに描かせればいい？ PNGを1枚出してくれますが、見てみると矢印の向きが逆で、文字も間違っている——しかも修正できません。固定画像だからです。
そんな問題を回避できる方法を、今見つけました。AIに、パソコン上のDraw.ioで直接図を描かせるのです。
画像を1枚生成して見せるのではありません。本当にその作図ソフト上で、図形を1つずつ描いていきます。完成後のファイルはあなたの .drawioで、ダブルクリックすれば編集できます。PNG、SVG、PDFへの書き出しも自由です。
AIが支援し、人が主導する。この言葉はスローガンではありません。本当に、自分で編集できるのです。
この方法は、もともとCodexから始まった
最初にXで、沐陽さんが投稿した動画を見ました。タイトルはとても率直で、「Codexが図を描くのを見ていると、本当に気持ちいい」というものでした。開いてみると、Draw.ioのキャンバス上でAIが科学研究用の図を一筆ずつ組み立てていて、矢印、区切り、文字のすべてを編集できます。かなり惹きつけられる光景でした。
ただ、Codexは誰もがインストールしているわけでも、使い慣れているわけでもありません。
その後、背後で使われているツールを見つけました。GitHubで icebird1998 さんが作った drawio-scientific-illustratorです。原版はCodexのプラグインですが、実体は2つのMCPサーバーです。一方、WorkBuddyはもともとMCPに対応しています。それならCodexをインストールする必要はなく、直接接続すればいい。この記事は、私がこれをWorkBuddyに移植した後の攻略メモです。
ついでに、全員が遭遇するとは限らない落とし穴も紹介します。サンドボックス環境で初めてDraw.ioを起動したとき、キャンバスが立ち上がらず、GPU crashedやTarget crashedというエラーが出ました。調べたところ、サンドボックス内でGPUの子プロセスがクラッシュし、デバッグポートを起動できなかったことが原因でした。起動パラメータに --no-sandbox を1行追加すると解決しました。この問題は後ほど予備策として説明しますが、今のところ遭遇する可能性は高くありません。
仕組みはどうなっているのか
2つのMCPサーバーを使います。どちらもローカルPC上で動作し、 127.0.0.1 のみにバインドされたローカル通信経由で、Draw.io自身の図形モデルAPIを直接呼び出します。
drawio-live —— 目で確認できるDraw.ioウィンドウを開きます。AIがリアルタイムでキャンバスに図形を追加し、線をつなぎ、スクリーンショットを撮り、保存します。一筆ずつ描いていく様子を見守れます。
drawio-file-utils —— ウィンドウを表示せず、 .drawio ファイルを直接生成・検証し、PNG、SVG、PDF、JPGにも書き出せます。とにかく早く図を出したいなら、これだけで十分です。
重要なポイントが1つあります。これが「ワンクリックで画像を生成する」方法との最大の違いです。マウスやキーボードをシミュレートせず、XMLを先に出力してDraw.ioで開くこともしません。図は本当にキャンバス上で一筆ずつ描かれ、描き終わってから現在のキャンバスをあなたの .drawio ファイルとして保存します。つまり、手に入るのは固定画像ではなく、編集可能なプロジェクトファイルです。
MCPとは何でしょうか。一言でいえば、AIがローカルPCのソフトウェアを直接操作できるようにするプロトコルです。接続後は、AIに話しかけるだけでDraw.ioを操作してくれます。
あなたはどのタイプ？
完全な初心者で、すぐに編集可能な図が欲しい：
drawio-file-utilsを使いましょう。AIに「実験フロー図を描いて」と言えば、Draw.ioのウィンドウを開かなくても、.drawioとPNGを直接出力してくれます。少し慣れていて、AIがどう描くか見ながら随時中断したい：
drawio-liveを使いましょう。キャンバス上でAIが一歩ずつ描く様子を見られ、気に入らなければその場で「この線をこちらに移して」と指示できます。学生やプロジェクトを指導していて、図の品質もデータの外部流出も心配：安心してください。公式では安全面の基本方針が明確に定められています。デバッグポートは
127.0.0.1のみにバインドされ、Draw.io/diagrams.netのページだけに接続し、システムレベルのマウスやキーボードは使いません。テレメトリもクラウドサービスもありません。図は最初から最後までPC上にあり、外部に出ることはありません。起動に失敗した場合に追加する--no-sandboxも、サンドボックス内でDraw.ioを起動できるようにするためのローカル設定にすぎず、データの安全性とは関係ありません。
接続は、実は2ステップだけ
まず1つ確認してください。パソコンに Draw.ioデスクトップ版がインストールされていることです。
Releases · jgraph/drawio-desktop
お使いのパソコンに対応するバージョンを見つけてください。
次にWorkBuddyの MCPサービス管理を開き、AIにそのまま次のように伝えます。
drawio-liveとdrawio-file-utilsの2つのMCPサービスをインストールしてください。
自動でダウンロードと設定が行われます。その後、「マイMCP」に2つのサービスが追加され、ステータスが「信頼の確認待ち」になっているはずです。スクリーンショットのように、それぞれ右側の信頼をクリックします。2つとも完了したら、会話を開き直せば使えるようになります。
たった2ステップです。Draw.ioをインストールし、WorkBuddyで2回信頼をクリックするだけです。
以前のチュートリアルには、リポジトリをcloneし、 mcp.json を編集し、サンドボックス用のパッチを追加すると書かれているものもありますが、それは古いやり方です。現在のWorkBuddyは指示を直接理解し、こうした面倒な作業を自動で処理できます。
インストール後にDraw.ioの起動に失敗した場合、多くはサンドボックス内でGPUの子プロセスがクラッシュしている（
GPU crashed/Target crashedと表示される）ことが原因です。起動パラメータに--no-sandboxを1行追加してください。また、DRAWIO_PATHも正しく設定する必要があります（通常はC:\Program Files\draw.io\draw.io.exeで、AppData内のものではありません）。間違えるとENOENTが表示されます。この2つの落とし穴には私もインストール時に遭遇しました。上記のように追加すれば大丈夫で、基本の2ステップには影響しません。
使い方
最も一般的な使い方は、まず参考画像を1枚渡し、それを編集可能な図として描き直してもらうことです。PNG、JPEG、SVG、またはPDFから書き出したページをアップロードし、AIに「この画像をもとに、Draw.ioの図形として描き直して」と伝えると、キャンバスを開いて参考画像に沿って組み立ててくれます。科学研究用のイラストや、矢印や区切りを含む参考図に特に向いています。
私が普段使っている指示は次のとおりです（WorkBuddyで直接伝えるだけで、Codexなどのプラグイン名を出す必要はありません）。
drawio-liveでDraw.ioを起動し、この参考画像を描き直してください。100ms間隔で段階的に描画し、文字や接続線はすべて編集可能にしてください。完了後、.drawioとして保存し、2000pxのPNGに書き出してください。
書き出しには、もう1つ便利な方法があります。Draw.ioに付属するコマンドラインを直接使えば、MCPで書き出す際にたまに起きるパスの問題を回避できます。
"C:/Program Files/draw.io/draw.io.exe" "入力.drawio" --export --format png --width 2000 --output "出力.png"
典型的な流れは、次の一言で覚えられます。参考画像をアップロード → キャンバスを起動 → 段階的に描く様子を確認 → チェックと微調整 → 保存 → 書き出し。
正直に言うと、限界もあります。リアルタイムツールが現在主に扱えるのは、Draw.io自体の図形です。顕微鏡写真、ヒートマップ、複雑なデータ図などは、現時点では専用ツールに頼るか、描画後に手動で貼り付ける必要があります。再現度も、参考画像がどれだけ鮮明かに左右されます。あらかじめ伝えておくので、ぼやけた画像で試して、あとから私を責めないでください。
実際に何を描かせたのか
口で説明するだけでは不十分なので、その日に3枚描かせました。すべて .drawio のソースファイルで、文字や接続線を編集でき、2000pxのPNGに書き出しました。
データエンジニアリング図：28個の図形と12本の接続線。中央にスマートビッグデータセンターを配置し、外側にデータ共有プラットフォーム、公安・文化観光・気象などの外部連携、一体化データ基盤プラットフォームを接続しました。
5段階の能力＋2つの実行プラットフォーム構成：データセンシング → 予測評価 → 柔軟負荷マイニング → 協調意思決定 → 実行配信。その下に2つの実行プラットフォーム（コンピューティングネットワーク、電力網／エネルギー）を配置しました。
コンピューティングパワー・エネルギー協調ディスパッチ構成：64個の図形と13本の接続線を、78ステップで描き終えました。協調意思決定層、柔軟負荷マイニング層、データセンシング層を順に展開しています。
最も複雑な78ステップの図も止まることなく、完成後はそのままダブルクリックして編集できました。