Github Copilot で手描きデータを drawio に変換

以前のポスト ウェブ画面設計検討のためのドキュメントの作成に draw.io XML を使う(Claude Sonnet 4) でそれを試したのですが、 ならばもっと別の手描きデータならどうなるか調べました。

メタモンが化けているピカチュウみたいな絵になってしまった。

変換方法は、Github Copilot と連携している VSCode でこの画像を指定して Agent モードにした状態で 簡単なプロンプトで drawio の XML データに変換しています。

Claude Sonnet 4

Prompt:

please convert this image to drawio xml data

イラストの部分まで再現できました。 ピチューとピカチューの違いが判然としません、まあその点では自分が描いたイラストと大差ない。

4o mini

Prompt:

can you convert this image to drawio xml data?

Sonnet 4 とは異なり 絵の部分は文字列で置き換えてきました。

別の手描きデータで試す

もっと実践的な絵が変換できるのか試してみました。 Bullet Journal の Key をアップロードすると Key の種類を判別してくれる架空のウェブサービスのフロー図を手描きしてそれを変換してみます。

プロンプトはメモするのを忘れました。 たぶん、さきほどとだいたい同じような適当な英語のプロンプトを使いました。

まとめ

すごいはすごいのだが、特定のシナリオで作業効率が上がるかという観点から判断すると、 draw.io の操作になれて最初からスクラッチで描いた方がはやいかもしれない。 draw.io よりは手描きで自在にイラストをかきつつ、最終的にできあがったものを 仕上げとして draw.io のXMLに変換する、それをそのまま客先提出する・・・と考えた場合 この品質でよければよいのだが、ここから手直しがはいるとなると作業コストが高い。 そうなると draw.io の操作を覚えてちゃちゃっと仕上げた方がトータルで作業コストが低い、ということにもなりかねない。