楽してアーキテクト図を描きたい

アプリやシステムの構成を説明するときに「アーキテクト図を描くのが面倒だな」と思うことはありませんか？ 特に、AWS・Google・APIなど複数のサービスを組み合わせると、 「どの矢印がどこにつながっていたか」「Lambdaの中で何をしてるか」などを手で描くのは意外と時間がかかります。

そんなときに便利なのが AI × Draw.io（diagrams.net） の組み合わせです。 今回は、以前作った 小遣い管理アプリ の構成図を例にして、 AIとCursorを使って自動でアーキテクト図を生成した話を紹介します。

「Draw.io（正式名称：diagrams.net）」とは、

無料で使えるクラウド型の図作成ツールです。 フローチャート、アーキテクト図、ネットワーク構成図、業務フローなど、 さまざまな図をブラウザ上で簡単に描くことが出来ます。

今回描かせたい構成

  • ユーザーがLINEで「昼ごはん500円」などと送信
  • LINE Messaging API が Webhook 経由で AWS API Gateway に転送
  • API Gateway が Lambda関数 を実行
  • Lambdaが gspread 経由で Googleスプレッドシート に記録
  • Lambdaが同時にスプレッドシートを読み出して「今月残り◯◯円」と算出
  • LINE Messaging API 経由でそのメッセージをユーザーへ返信

つまり、LINE → AWS → Googleスプレッドシート → 再びLINEへ戻るという流れです。

cursorを使って、Claude-4.5-sonnetに「以下の構成のアプリケーションのアーキテクト図を描きたい。」と命じて上の構成文を渡すと、、、

ご依頼のLINE家計簿アプリケーションのアーキテクト図をdraw.io形式で作成します。

と、拡張子が「.drawio」のファイルを作成してくれました。

https://www.drawio.com/　に移動し、 「ファイル → 開く → デバイスから」を選択。 作成したファイルを読み込むと、、、

architect１

完成です！！！

素晴らしい。何がいいって、このまま編集も可能です。文章はもちろんのこと、配置、各パーツの大きさ、形、色、構成も好きにブラウザ上で変更できます。素敵すぎる！！

さらに、AWSのアイコンを使ってくれないかとお願いしてみました。すると、

スクリーンショット 2025-10-08 0.02.11

再度読み込みました。

architect２

スプレッドシートが緑の四角なところがやや気になりますが、取って出しでこれはすごい。

AI × Draw.io の良さ

自然言語から図を生成できる 　→ 設計書を描く時間が激減

手作業で修正が可能 　→ 欲しい資料に合わせた形に整えられる

AWS/GCP/Azureアイコンも使える

今回はcursorで作りましたが、チャットAIでもコードのみ書かせて、自分でテキストファイルに貼り付け→「.drawio」という拡張子で保存することでも同じことができます。（ただ、なんとなくOpenaiよりClaudeの方が精度良く作ってくれる気がしてます。）

まとめ

AIとDraw.ioを組み合わせることで、 「思考をそのまま構成図にする」ことが簡単にできるようになりました。

これからは、アイデアを言葉で伝えて、AIが図にしてくれる時代ですね。

ぜひお試しあれ。