draw.ioファイルをAIに作らせてみた


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

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

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

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

### プロンプト

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/0d7c5180-3655-4a85-9bb1-5c88988b7a8b.png)


## 試したAI

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

### ChatGPT 4o

![image 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/5a0f85db-0db6-4076-8994-4470a6601680.png)

作成された [draw.io](http://draw.io) ファイルを読み込んでみました。

![image 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/69674969-434d-42dd-aaea-6f74dc9d22bf.png)


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

### ChatGPT o4-mini

![image 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/39feadcd-0e57-4665-a179-d9ec3981ba2f.png)


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

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

![image 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/1e09de4a-5412-4ee3-9779-8e642ef581cb.png)


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

### ChatGPT4.5

![image 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/9454a515-4a15-4491-a811-d71be839219a.png)


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

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

![image 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/af250737-4d02-4041-a771-7fa6faac6b17.png)


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

### ChatGPT o3

![image 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/7f2eab6c-4cae-419e-914c-d20974637fdc.png)


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

![image 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/b88cd8db-3784-4a0c-b4b2-8f92dc8b6b36.png)

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

### gemini 2.5 Pro

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

![image 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/ebde3bbd-f65b-4d2f-876e-7e0e83c33a0e.png)

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

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

![image 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/c8cd96fc-416e-4dec-839f-c2b83690c725.png)

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

```jsx
        {/* ヘッダー */}
        <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>
```

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

![image 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/d41f5203-6a50-486f-b4fa-ba24e934a0c7.png)


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

![image 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/379b218d-241e-414f-a98e-a3c2343326c0.png)

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

### genspark super agent

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/53909855-c6e0-4b67-8f25-6112c71c5bab.png)

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

![image 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/4f5f4b6c-ee4a-436f-af19-a3847dea7bb5.png)

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

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

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

![image 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/09297d8f-f123-4b2b-815f-646ae3d7b138.png)


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

![image 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498107/1429ff0e-d0bf-4fbd-8217-6acad9c0a399.png)

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

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

### まとめ

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

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が出力までの時間、再現性の高さで採用したいなと思いました。それぞれの用途に合わせて、うまく使い分けしていきたいですね。

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