【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

Setup Flow
Setting Procedure
1. Step 1: Download the AWS Icons
2. Step 2: Register the Custom Library in Visual Studio Code User Settings
Reference

Setup Flow

It is assumed that the Visual Studio Code extension Draw.io Integration is installed.
The Draw.io Integration extension allows you to register XML-style icons as custom libraries.
On the website https://app.diagrams.net/ , you can add icons that are not provided as standard by creating a custom library. However, the extension itself cannot create a custom library.
Once you create a custom library on the website, download the library and register it in the Draw.io Integration extension to add icons to the Visual Studio Code environment.
This guide explains the procedure to download from m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons and register it in the Draw.io Integration extension. The process is divided into the following two steps:
- Step 1: Download the AWS Icons
- Step 2: Register the Custom Library in Visual Studio Code User Settings

Setting Procedure

Step 1: Download the AWS Icons

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 a directory of your choice.
- 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 2: Register the Custom Library in Visual Studio Code User Settings

Open Visual Studio Code and press the following keys to open user settings.
- Windows: Ctrl + ,
- Mac: Command + ,
Enter Drawio in the search box and select Drawio: Custom Libraries .
Click on 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"
    }
]

Once the settings are complete, restart Visual Studio Code. After restarting, create and open a Draw.io file (e.g., test.drawio ).
Click on “Other Shapes” in the left pane.

Check the checkbox for the name (e.g., AWS-20240206) given to libName in the custom library and click Apply.
- In my environment, the library name was displayed in black for some reason.

If AWS-20240206 is displayed in the left panel, the setup is complete.

Reference

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