VSCode + Codex + draw.ioでAWSアーキテクチャ図を描いてみた

はじめに

「あれ、このシステムってアーキテクチャ図なくない？」
「とりあえず構成洗い出そうとしたら関係してるサービス多すぎない？」
「システムの図を描きたいけど、何から描けばいいんだ？」

皆様悩んでおられますよね。私も大変悩んでおります。

そんな中、インターネットという電子の海を流されるままに漂っていたところ、以下の記事を見つけました。

この記事で紹介されているアーキテクチャ図の生成をやってみたいなと思いましたが、私は普段Claude Codeを使用しておらず、VSCode内でCodexを使用しています。
では、Claude CodeをCodexで代用したとき、どんな手順でやればよいのだろうか？ということで、実際にVSCode内でCodexを使ってdraw.io形式のAWSアーキテクチャ図を生成できないかを試してみました！

本記事では、以下の流れで実際にやってみた内容をまとめます。

• 前提
• やりたいこと
• やったこと
• 実際に使ってみて感じたこと
• まとめ

前提

• エディタ: Visual Studio Code
• AI: Codex（VSCode内で使用）
• 図作成ツール: draw.io（VSCode拡張機能）
• 目的: AWS のアーキテクチャ図を作る

やりたいこと

• AWSの構成を自然言語で指示
• Codexにdraw.io 形式（.drawio /.xml）で図を生成してもらう
• VSCode内でそのまま開いて編集・調整する

「チャットをする」感覚で
「Architecture as Diagram」ができる世界を目指す

やったこと

1. draw.io 拡張機能を VSCode にインストール

まずはVSCodeにDraw.io Integrationを追加します。

• VSCode 拡張検索でdraw.ioを検索
• Draw.io Integrationをインストール

これで、.drawioファイルをVSCode上で直接編集・表示できるようになります。

---

2. draw.ioのSkillをCodexにインストール

次に、Codexにdraw.io用のSkillを追加します。
CodexにはデフォルトでSkill InstallerというSkillが入っています。このSkillを呼び出すことにより、Skillをインストールすることができます。
draw.ioのSkillはGitHubに公開されており、そのSKILL.mdのリンクをSkill Installerに渡してあげることでSKillをインストールしました。

https://github.com/jgraph/drawio-mcp/blob/main/skill-cli/drawio/SKILL.md
これをインストールしたい

これにより、Codexがdraw.ioのXML構造、図形（AWSアイコン・レイヤ・コネクタ）を意識したアウトプットを出せるようになります。

3. Web3層アーキテクチャを試しに書いてもらう

準備ができたので、Codex にこんな感じで指示しました。

EC2、RDS、ElastiCacheを使用した3層アーキテクチャの図を作成してください。

すると、draw.io XML形式のファイルが生成され、そのまま .drawio ファイルとして保存されます。
これをVSCodeで開くと、以下のようなファイルが生成されていました。

果たしてこの構成が本当に正しいかは一旦置いておくものとします。
指示通り、EC2・RDS・ElastiCacheは含まれていることがわかります。（ElastiCacheがそこにいるんかいという気持ち is ある）
しかしながら、せっかくAWSアーキテクチャ図を作成しているのでAWSのアイコンを使ってほしいですよね。

参考にさせていただいたDevelopersIOの記事の中にも同じ悩みが書かれており、筆者の方はSKILL.mdにガイドラインを追加することで解決したようです。

4. SKILL.mdにガイドラインを追記する

では、SKILL.mdにガイドラインを追記してみようと思います。
SKILL.mdは以下のように格納されています。
CodexのSkillの格納場所を覚えておくと何かの役に立つかもしれません。

.codex
  ∟ skills
    ∟ drawio
      ∟ SKILL.md

SKILL.mdには、AWSのアーキテクチャ図としての見た目を整えるためのルールを追加しました。
たとえば以下のような観点です。

• AWS公式アイコンを使う
• アイコンの配置やサイズに一定のルールを持たせる
• 境界やまとまりをグループで表現する
• 通信の向きや線の意味を揃える
• 図全体のレイアウトを一方向に統一する

細かい記述はかなり長くなるため省略しますが、「どんな図にしたいか」をルールとして明示すると出力の安定感がかなり上がりました。

5. Web3層アーキテクチャを描き直してもらう

では、実際に先ほどのアーキテクチャ図を描き直してもらいましょう。
以下のように指示してみます。

drawio skillのSKILL.mdをアップデートしました。それに従って図を書き直したものを新しく作成してください。

先ほどと同様に、生成された.drawioファイルを見てみると、以下のようなファイルでした。

かっこいいデザインで非常にうれしい限りです。
RDSのReplicaが追加されていたり、相変わらずElastiCacheが変なところにいたりなど、色々突っ込みどころはありますが、たたき台としては十分なものなのではないでしょうか。

補足

なぜAWSアイコンがデフォルトで使われないのか

先にも記述した通り、draw.io Skillを使うとCodexはdraw.ioのXML構造や図形要素を理解して図を生成できます。
しかし、1回目の試行のように、何も指示しなければAWSアイコンは使用されません。

これはdraw.io Skillの仕様によるものです。
SKILL.mdの中には

draw.io が持つ図形ライブラリのうち
SKILL.md に明示的に記載されているものだけを使用対象とする

というルールが記載されています。

そのため、AWSアイコンを使うという旨をSKILL.mdに記載していない場合、Codexは安全側に倒れてクラウド非依存の要素だけで図を構成します。

AWSアイコンのダウンロードは必要なのか

結論としては、必要ありません。
draw.io自体がAWS、Azure、GCPなど多くの公式アイコンセットを内包しています。
したがって、draw.io Skillを入れた場合、これらの公式アイコンセットが読み込まれます。

SKILL.md に指定を書くと何が変わるのか

では、AWSアーキテクチャ図らしい見た目にしたい場合はどうすればよいのでしょうか。

1つの解決策は、2回目の試行で行ったようにSKILL.mdにガイドラインとしてAWSアイコンを使用してほしいと記載することです。
SKILL.md を単なる Skill の説明書ではなく、

このSkillではこういうAWSアーキテクチャ図を書いてほしい

という作図ルール定義として扱うことで、汎用的な図形ベースの出力からAWSアーキテクチャ図らしいアウトプットへと変わります。

その他にも、チャットでCodexに指示するときにAWSアイコンを使ってくださいという旨を加えるという方法もあります。
しかし、これだとアイコンのルール等がその都度のプロンプトに依存してしまうため、毎回同じ品質で出力させるのが難しくなります。

よって、複数人で同じSkillを使う場合や何度も図を生成し直す場合には、都度チャットで指示するよりもSKILL.mdにガイドラインを明示しておく方が再現性が高いです。

実際に使ってみて感じたこと

• ゼロから配置するより圧倒的に速い
• 図の「たたき台」を作る用途にかなり向いている
• VSCode内で完結するのが楽
• AWS アイコンの細かい指定はまだ調整が必要
• 命名・整列は最後に人間が手を入れる前提になる

サクッと書いてみるとか、AWS認定試験の勉強に使うときにはめっちゃいいな！という感想です。
これって実際どう作ればいいんだ？のヒントになり得るものだと思います。

まとめ

VSCode・Codex・draw.ioを組み合わせることで、自然言語からAWSアーキテクチャ図を対話ベースで作成するという体験ができました。

設計初期のラフ作成やレビュー用の叩き図、AWS認定試験の勉強にはかなり有効だと感じています。

まだまだ試行錯誤の途中ですが、アーキテクチャ図をAIに描かせるための一つのアプローチとして記録しておきます。