画面のプロトタイプをAIで作成・提示して、顧客ともイメージ確認できた。
次はこれを画面仕様書に落として、エンジニアに渡したい。

そんなときに今までなら、画面イメージを見ながら、一生懸命draw.ioファイルに落としていました。

ただいまなら、生成AIに頼めば、draw.ioファイル（でインポートできるXML）も作成してくれるはず。

ということで試してみました。

プロンプト

あなたはdraw.ioという描画ツールで読み込めるXMLファイルを作成することはできますか？
添付の画面イメージの画像をdraw.ioファイルで編集可能な形にしたいと考えています。

画面イメージを読み込んで、draw.ioファイルのXMLを出力してください。

試したAI

ChatGPT 4o
ChatGPT o4-mini
ChatGPT 4.5
ChatGTP o3
gemini 2.5 Pro
genspark super agent

ChatGPT 4o

作成された draw.io ファイルを読み込んでみました。

色などは反映していませんが、なかなかの再現度でした。

ChatGPT o4-mini

生成されたXMLファイルをコピーして、draw.io拡張子で保存。

それをdraw.ioで読み込んでみました。

文字の色は少し再現されていました。表の罫線はなさそうでした。

ChatGPT4.5

生成されたXMLファイルをコピーして、draw.io拡張子で保存。

それをdraw.ioで読み込んでみました。

ChatGPT4.5は推論などが得意そうなので、draw.ioファイル生成はあまり得意じゃないかもしれないですね。

ChatGPT o3

最後エラーメッセージ出ていますが、XMLファイル生成は問題なくされたので、そのXMLを保存、draw.ioファイルで読み込んでみました。

ちょっと横長ですが、かなり再現度高いですね。

gemini 2.5 Pro

会社ではGoogle workspaceを契約してもらっているので、geminiにも試してもらいました。

生成されたXMLをコピーして、ファイル保存。draw.ioで読み込みました。

下記のエラーが発生してしまいました。

生成されたファイルの中身を見てみたところ、コメント文が以下のように記載されてました。

        {/* ヘッダー */}
        <mxCell id="header-title" value="AI分析・アクションレポート" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="40" width="400" height="30" as="geometry" />
        </mxCell>

こちらを指摘して、再生成してもらいました。

再度読み込むと下記です。

コメントミスはあったけど、再現度高い！！
gemini 2.5 Proにはコメントだけ最初に指示出せばいいかな。

genspark super agent

最近、スライド作成でお世話になっている gensparkにも作成してみてもらいました。
gensparkはわざわざHTML画面も生成してくれました。

XMLをコピーして、ファイル保存。draw.ioで読み込みました。

こちらも再現度高いいですね。

右下のページ表示が抜けちゃったぐらい。

ちなみにHTML画面で「draw.ioを開く」をクリックすると、ブラウザ上でdraw.ioを開いてくれました。XMLは読み込んでくれないので、手動でインポートする必要があります。

また1回出力したHTMLからのコピーでは気に入らなかったのか、XMLでも再出力していました。こちらを同じくコピー・保存して読み込んでみたところ、下記の通りでした。

今後は右下のページ表示も再現しているようでした。

表のタイトル部分もこちらのほうが再現度は高そうです。

まとめ

いかがでしたでしょうか？

draw.ioのXML出力はすべての生成AIでできましたが、出力精度は様々でした。

生成AI	生成時間	draw.io作成可否	再現度
ChatGPT 4o	普通	✅	高（色以外の要素を再現）
ChatGPT o4-mini	普通	✅	中（文字色のみ再現、罫線なし）
ChatGPT 4.5	普通	✅	低（基本的な要素のみ）
ChatGPT o3	遅め（2分以上）	✅	高（横長だが再現度高い）
gemini 2.5 Pro	普通	✅	かなり高い（コメントミス修正後は非常に高い再現度）
genspark super agent	遅め（2分以上）	✅	かなり高い（2回目の出力で完全な再現）

今のところ（2025/5/3現在）は、gemini 2.5 Proが出力までの時間、再現性の高さで採用したいなと思いました。それぞれの用途に合わせて、うまく使い分けしていきたいですね。

ここまで読んでいただき、ありがとうございました。