Claude Code に draw.io の構成図を描いてもらうときの4つの確認

AWS に作った生成AIアプリケーション（チャット、MCP、RAG）の構成図を、Claude Code に draw.io（無料で使える作図ツール）の形式で描いてもらいました。AWS の公式アイコンを使った図が、指示だけでできあがります。

このページでは、アプリの入れ方と、Claude Code への指示のしかたをまとめます。

できあがった図は GenU とデジタル庁の「源内」を比べて、社内の IP だけで使う構成を考えた に載せています。

アプリを入れる

draw.io の VS Code 拡張（Draw.io Integration）を入れます。これで、.drawio のファイルを VS Code の中で開いて、見たり編集したりできます。

  1. VS Code の左端のアイコンから「拡張機能」を開く（Ctrl + Shift + X でも開きます）
  2. 検索欄に Draw.io Integration と入力する
  3. 作者が hediet のものを選び、「インストール」を押す

Claude Code 側に入れるものはありません。draw.io のファイルは文字だけでできている（中身は XML という文字の形式）ので、Claude Code がそのまま書けます。アイコンの名前（例：mxgraph.aws4.lambda）を指定すると、AWS の公式アイコンが表示されます。

Claude Code に頼む

次の文を、構成図の材料（手順書やコードのある場所）と一緒に渡します。

draw.io の構成図を作ってください。
- AWS の公式アイコンを使う。アイコンの名前が存在するか確認する
- 部品のつながりは、資料ではなくコードと実際の環境で確かめる。根拠も書く
- 完成と言う前に、図を描いて画面で確認する。図は外部のサイトに送らない
  （VS Code の draw.io 拡張に入っている本体を、この PC の中だけで動かして見る）
- 線が全部あるか、文字の重なり・はみ出しが無いかを見て、直してから報告する
- 配置を大きく変えるときは、変える前に方針を聞く

この指示の意味は、次の4つの確認です。

  1. 線が全部あるか：ファイルの中を見ただけで「できました」と言われ、矢印が1本も描かれていなかったことがありました。実際に描いた画面で確かめてもらいます。
  2. 文字が重なっていないか：矢印の説明や枠の線に文字が重なることがあります。「描く → 画面で見る → 直す」を、無くなるまで繰り返してもらいます。
  3. つながりが実際と合っているか：資料には部品の名前はあっても、どこからどこを呼ぶかは書かれていないことがあります。コードと実際の環境で確かめてもらいます。
  4. 頼んだ以上に変えていないか：枠を足すだけの修正で、アイコンや矢印まで動かされることがありました。大きく変えるときは、先に方針を聞いてもらいます。

ブログ用の画像にする

記事に載せる画像（PNG）も、同じ方法で書き出してもらいました。draw.io の本体には画像に書き出す機能があるので、ブラウザで開いた draw.io にその機能を実行させ、できた画像をこの PC に保存しました。

構成図を、ブログに載せる PNG にしてください。
文字が読める大きさ（1.5倍）で、右端の文字が切れないように余白を取ってください。
書き出した画像を開いて、切れや欠けがないか確認してから渡してください。

出典（確認日：2026-10-18）

コメント

タイトルとURLをコピーしました