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

作成日: 2024/03/03, 更新日: 2025/06/17

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

設定までの流れ
設定手順
1. ステップ①: AWSのアイコンをダウンロードする
2. ステップ②: Visual Studio Code のユーザー設定にカスタムを登録する
参考

設定までの流れ

本ガイドは、Visual Studio Code の拡張機能 Draw.io Integration がインストールされていることを前提に解説します。
Draw.io Integration 拡張機能では、XML形式のアイコンをカスタムライブラリとして登録できます。
Web サイト https://app.diagrams.net/ ではカスタムライブラリを作成することで、標準で用意されていないアイコンも追加できますが、拡張機能側ではカスタムライブラリを直接作成することはできません。
一度 Web サイトでカスタムライブラリを作成し、そのライブラリをダウンロードして拡張機能 Draw.io Integration に登録することで、Visual Studio Code 環境にもアイコンを追加できます。

今回は、 m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons で公開されている XML ファイルをダウンロードし、拡張機能 Draw.io Integration に登録する手順を解説します。
手順は「ステップ①: AWSのアイコンをダウンロードする」と「ステップ②: Visual Studio Code のユーザー設定にカスタムを登録する」の2つです。

設定手順

ステップ①: AWSのアイコンをダウンロードする

まず、 m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons から必要な XML ファイルをダウンロードします。この記事の作成時点の最新版は AWS Architecture Icons 20240206.xml です。
ダウンロードした XML ファイルは任意のディレクトリに保存してください。例えば、ユーザーディレクトリに vscode-drawio というディレクトリを作成し、その中に保存するのも良いでしょう。パスは /Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml となります。

ステップ②: Visual Studio Code のユーザー設定にカスタムを登録する

次に、Visual Studio Code を開き、以下のキー（Windows: Ctrl + , 、Mac: Command + , ）を押してユーザー設定を開きます。検索ボックスに drawio と入力し、 Drawio: Custom Libraries を選択します。その後、 Edit in settings.json をクリックしてください。

settings.json に以下の設定を追加します。 entryId と libName は任意の値を指定し、 file にはダウンロードした XML ファイルのパスを指定してください。

"hediet.vscode-drawio.customLibraries": [
    {
        "entryId": "AWS-20240206", //https://github.com/m-radzikowski/diagrams-aws-icons
        "libName": "AWS-20240206",
        "file": "/Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml"
    }
]

設定が完了したら、Visual Studio Code を再起動します。再起動後、適当な Draw.io ファイル（例: test.drawio ）を作成し開いてください。
左ペインにある「その他の図形」をクリックします。

カスタムライブラリにある libName に付けた名前（例: AWS-20240206）のチェックボックスにチェックを入れ、適用をクリックします。（僕の環境の場合、なぜかライブラリ名が黒く表示されてしまいました。）

左側のパネルに AWS-20240206 が表示されていれば、設定が完了です。

参考

デジタル庁が公開したイラスト・アイコン素材を VSCode の Draw.io プラグインで使えるようにしたメモ #VSCode - Qiita