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

作成日: 2024/03/03, 更新日: 2024/03/03

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 に登録する手順を解説します。ステップとしては、以下の2つのステップに分かれます。
- ステップ①: AWSのアイコンをダウンロードする
- ステップ②: Visual Studio Code のユーザー設定にカスタムを登録する

設定手順

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

m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons から必要な XML ファイルをダウンロードします。
- この記事の作成時点の最新版は、 AWS Architecture Icons 20230428.xml です。

ダウンロードした XML ファイルを任意のディレクトリに保存します。
- 僕の場合、ユーザーディレクトリに vscode-drawio というディレクトリを作成し、その中に保存しました。
- パスは /Users/user01/vscode-drawio/AWS Architecture Icons 20230428.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-20230428", //https://github.com/m-radzikowski/diagrams-aws-icons
                  "libName": "AWS-20230428",
                  "file": "/Users/user01/vscode-drawio/AWS Architecture Icons 20230428.xml"
              }
          ]

設定が完了したら、Visual Studio Code を再起動します。再起動後、適当な Draw.io （例: test.drawio ）を作成し開きます。

左ペインにある「その他の図形」をクリックします。

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

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

参考

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