VSCode・CursorでAWS構成図を作成する方法！最新のAWSアイコンを使おう

2025.02.03

この記事をシェアする

はじめに

はじめまして！
クラウドビルダーズのKawabataと申します。

AWSの構成図を作成するのに、draw.ioを使っている方も多いと思いますが、VSCodeで直接編集できたら便利ですよね！

今回は、VSCode上でdraw.ioを使って、最新のAWSアイコンで構成図を作成する方法をご紹介します！

Draw.io Integration拡張機能について

VSCodeには「Draw.io Integration」という拡張機能があります！
この拡張機能を使うことで、VSCode上でdraw.ioを使った図の作成・編集が可能になります。

marketplace.visualstudio.com

Draw.io Integration - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Extension for Visual Studio Code - This unofficial extension integrates Draw.io into VS Code.

ただし、デフォルトでは最新のAWSアイコンが利用できません…
そこで、最新のAWSアイコンを使えるようにしていきましょう！

最新のAWSアイコンを使えるようにする

今回の手順は以下ブログを参考にしています。
Kanjiさん、ありがとうございます！

Moderniser.repo

【Tips】Visual Studio Code の Draw.io で最新の AWS のアイコンを利用する方法 |...

https://moderniser.repo.cont-aid.com/TIPS-How-to-use-the-latest-AWS-icon-in-Drawio-of-Visual-Studio-Code.html

Visual Studio Code のプラグイン「Draw.io Integration」を利用することで、ローカル環境で Draw.io を利用することができます。Draw.io は HTML5 と JavaScript で開発されたグラフ描画ソフトウェアです。AWS の構成図や UML でフローチャート、ネットワーク図などを描く際に利用することができます。Draw.io に標準で用意されている AWS のアイコンは古いバージョンのものが多く、最新のアイコンが利用できないことがあります。本記事では、Visual Studio Code の Draw.io で最新の AWS のアイコンを利用する方法を記載いたします。

公式のAWSアイコンからdraw.io用のXMLファイルを作成するツールがあるので、それを使って最新のAWSアイコンを使えるようにします。
Maciej Radzikowskiさん、素晴らしいツールをありがとうございます！

Amplify UI

Storage Browser for Amazon S3 | Amplify UI for React

https://ui.docs.amplify.aws/react/connected-components/storage/storage-browser

The StorageBrowser component gives your end users a simple, visual interface for working with data stored in S3.

アイコン生成ツールの準備

まずは、AWSアイコンをdraw.io用のXMLファイルに変換するツールをセットアップします。

# リポジトリのクローン
git clone https://github.com/m-radzikowski/icons-asset-generator.git
cd icons-asset-generator

# Python 3.9.10のインストール（pyenvを使用）
pyenv install 3.9.10

# Poetryのインストール
curl -sSL https://install.python-poetry.org | python3 -

# 依存パッケージのインストール
poetry install

AWSアイコンのダウンロードと変換

AWS公式サイトから最新のアイコンパッケージをダウンロード

2. ダウンロードしたZIPファイルをリポジトリ直下に配置

3. ダウンロードしたZIPファイルを展開

unzip <zipファイル名> -d ./Asset-Package_06072024

アイコンの変換を実行

poetry run icons-asset-generator \
    --filename-includes _48 \
    --filename-excludes Dark \
    --image-name-remove "Light Arch_ Res_ _48 . - _" \
    --library-name-remove ". - _" \
    --path ./Asset-Package_06072024 \
    diagrams.net

実行すると、libraryフォルダにAsset-Package_06072024.xmlが生成されます。
このXMLファイルが、draw.ioで使用するAWSアイコンライブラリになります！

5. 生成されたxmlファイルを自身が管理しやすいパスに配置

VSCodeの設定

VSCodeの設定を開く
「Hediet › Vscode-drawio: Custom Libraries」を検索

3. Edit in settings.jsonをクリック

4. settings.jsonのhediet.vscode-drawio.customLibrariesを以下の設定に変更

{
  "hediet.vscode-drawio.customLibraries": [
    {
      "entryId": "AWS-20240607",
      "libName": "AWS-20240607",
      "file": "/Users/kawabata/drawio/Asset-Package_06072024.xml" //作成したxmlファイルのパス
    }
  ]
}

これで準備完了です！

使ってみよう

draw.ioファイル（.drawio）を作成
「More Shapes」をクリック

3. 「AWS-20240607」を選択してApplyをクリック

4. AWS-20240607を開くとAWSのアイコンが表示される

これで最新のAWSアイコンを利用する準備が整いました！

よく見る構成を書いてみました
使い勝手もWEB版と大差なく今後は多用しそうです！

まとめ

今回の手順で実現できること：

VSCode上でのdraw.io編集
最新のAWSアイコンの利用
バージョン管理システムとの連携（.drawioファイルはテキストベース）

特に以下のようなメリットがあります：

エディタを切り替えることなく構成図の作成が可能
常に最新のAWSアイコンを使用可能
チーム内での構成図の共有・バージョン管理が容易

おわりに

VSCodeでAWS構成図が作成できるようになると、ドキュメント作成の効率が格段に上がります。
また、AWSアイコンの更新にも対応できるので、常に最新のアイコンを使えるようになります。

Cursorを使っている方は、AIの支援を受けながら構成図を作成できるので、より効率的に作業できます。
よく見る構成で紹介した構成図は実はAIに書いてもらったものになります…！

次回は自然言語でAWS構成図を作成する方法を紹介したいと思います！

参考リンク