【Tips】How to use the latest AWS icon in Draw.io of Visual Studio Code

Created date: 2025/01/04, Update date: 2025/01/20

By using the Visual Studio Code plug -in "Draw.io Integration", you can use Draw.io in a local environment.
Draw.io is a graph drawing software developed by HTML5 and JavaScript.
It can be used to draw a flowchart, network diagram, etc. with AWS configuration and UML.
Many AWS icons provided in Draw.io are used in old versions, and the latest icons may not be available.
This article describes how to use the latest AWS icon in Visual Studio Code Draw.io.

Table of contents

Flow to setting
Setting procedure
1. Step ①: Download the AWS icon
2. Step ②: Register custom in Visual Studio Code user settings
Reference

Flow to setting

It is assumed that Visual Studio Code extensions Draw.io Integration are installed.
The extension Draw.io Integration allows you to register XML -style icons as custom libraries.
https://app.diagrams.net/ on the website can add an icon that is not provided as standard by creating a custom library.However, the extension cannot create a custom library.
Once you create a custom library on the website, download the library and register it in the extension Draw.io Integration, you can add icons to the Visual Studio Code environment.
This time, Explains the procedure to download from m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons and register for the extension Draw.io Integration.The steps are divided into the following two steps.
- Step ①: Download the AWS icon
- Step ②: Register custom in Visual Studio Code user settings

Setting procedure

Step ①: Download the AWS icon

Download the required XML files from m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons .
- The latest version at the time of creation of this article is AWS Architecture Icons 20240206.xml .

Save the downloaded XML file to any directory.
- In my case, I created a directory called vscode-drawio in the user directory and saved it.
- The path is /Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml .

Step ②: Register custom in Visual Studio Code user settings

Open Visual Studio Code and press the following key to open user settings.
- Windows: Ctrl + ,
- Mac: Command + ,

Enter Drawio in the search box and select Drawio: Custom Libraries .

Click Edit in settings.json .

Add the following settings to settings.json .
- entryId specifies any value.
- libName specifies an arbitrary value.
- file specifies the path of the downloaded XML file.


          "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"
              }
          ]

When the setting is completed, restart Visual Studio Code.After restarting, create and open an appropriate Draw.io (eg test.Drawio ).

Click “Other Figures” in the left pane.

Check the check box of the name (eg, AWS-20240206) given to libName in the custom library and click the adaptation.
- In my environment, the library name was displayed black for some reason.

If AWS-20240206 is displayed on the left panel, the setting is complete.

Reference

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