Gemini CLIで手書きの図からDraw.ioの図を生成する

経緯

仕事でDraw.ioの図の作成を多用するので、Gemini CLIで手書きの図から Draw.ioの図を生成させたら、仕事早くなるよね、と考えました。
Twitterで流れてきた情報によると、これは実際出来るらしく。

用意した手書きの図

まずは、元となる手書きの図を用意します。

Gemini CLIにお願い (1回目)

draw_image.png は私の作成した手書きの図です。
この手書きの図の情報を参考に、表示を綺麗にしたDrawioのファイルを生成してください。
ファイルの拡張子は.drawioにしてください。

Gemini CLI回答：

この手書き図に描かれている「商品」「UI」「API」「DB」「認証」の要素とそれらの関係性を元に、Drawioファイルを生成します。
生成するファイル名はdrawio-diagram.drawio とします。

・・・なんだって？

全然違う。
どのように処理していたか見ていませんでしたが、処理中に変なファイルを読んでしまったのかもしれないですね。

Gemini CLIにお願い (2回目)

環境をクリアにして、変なファイルを読み込まないように修正して、再トライ。
@マークを使って、読み込むファイルを教えることにしました。

@draw_image.png
このdraw_image.png は私の作成した手書きの図です。
この手書きの図を綺麗なDrawioのファイルにしたいです。
生成するファイルの拡張子は.drawioにしてください。

おしい

生成した図を修正させる

Gemini CLIに追加で修正させます。

生成した図を作り直して欲しいです。
矢印の根元は、Claude Codeの枠の左側、Gemini CLIの左側から生やして欲しい。
矢印の先っぽは、Kiro Taskの枠の右側につけてください。

なかなかの出来です。

Gemini CLIにお願い (3回目)

手書きの画像を渡すだけでなく、
図が表現している内容をテキストでも説明してみました。

・draw_image.png は私の作成した手書きの図です。
・図の内容は、
Kiro Task <-- use -- Claude Code
          <-- use -- Gemini CLI
です。
この二つの情報を参考に、表示を綺麗にしたDrawioのファイルを生成してください。
ファイルの拡張子は.drawioにしてください。

良さそうです。
ちょっと手間ですが、手書き画像だけでなく、
図の説明も入れるとスムーズに図の生成ができそうですね。

おわり

おわりです！！