ウェブ画面設計検討のためのドキュメントの作成に draw.io XML を使う(Claude Sonnet 4)

手描きしたウェブ画面（画像）を次のプロンプトで draw.io 用の XML を生成してもらいました。 その結果です。

この手のニーズは高いのでよく学習しているのであろうか。 とても助かる。

手書きでベースとなるウェブ画面イメージを描く:

これを Github Copilot で Claude Sonnet 4 に見せた状態から このプロンプト:

Can you generate code this image to drawio xml?

すると draw.io 用のXMLコードが生成されるので、適当なファイル たとえば pokemon-form.drawio に保存して、 あとは draw.io でこのファイルを開くだけです。

実は最初は HTML で記述してブラウザでレンダリングした結果のスクリーンショットを渡して draw.io 用の XML を生成したのですが、 難なくこなしたので、これは手描きでもいけるのでは？と思って試した次第。

少し驚いたのはこの HTML で記述して・・・方式ではカチッとした draw.io の作図を生成した一方で、 今回の手描き画像を入力とした場合は、 ラインを微妙にゆらして元絵の手描き風味を生かして生成してきたこと。 そこまでわかるの？ まだ試していないけれど、カチッとした（英語でなんといえばいいのやら）線で作図して、という 指示を入れれば手描き風味をなくした XML を生成してくれるのかな。

まとめ