【提示】如何在Visual Studio Code的Draw.io中使用最新的AWS圖示

📅 發布日: 2025/01/04, 更新日: 2025/06/17 ⏱️ 預計閱讀時間約3分鐘 (1,152字)

透過使用Visual Studio Code的「Draw.io整合」外掛，可以在本地環境中使用Draw.io。
Draw.io是使用HTML5和JavaScript開發的圖表繪製軟體。
它對於建立AWS架構圖、UML流程圖、網路圖等非常有用。Draw.io中預設提供的AWS圖示通常已過時，最新的圖示可能不可用。
在本文中，我們將介紹如何在Visual Studio Code中在Draw.io中使用最新的AWS圖示。

設定概述
設定步驟
1. 第 1 步：下載 AWS 圖示
2. 步驟 2：在 Visual Studio Code 使用者設定中註冊自定義庫
參考

設定概述

本指南假設您安裝了 Visual Studio Code 擴充套件“Draw.io Integration”。
透過此擴充套件，您可以將 XML 格式的圖示註冊為自定義庫。
在網站 https://app.diagrams.net/ 上，您可以透過建立自定義庫來新增預設情況下未包含的圖示。
但是，VS Code 擴充套件不允許您直接建立自定義庫。
要在 VS Code 中新增自定義圖示，首先需要在網站上建立並下載自定義庫，然後將其註冊到 Draw.io 整合擴充套件中。

在本指南中，我們將介紹如何下載在 m-radzikowski/diagrams-aws-icons：帶有 AWS 架構圖示的diagrams.net 形狀庫上釋出的 XML 檔案並將其註冊到 Draw.io 整合擴充套件中。
該過程包含兩個步驟：第 1 步是下載 AWS 圖示，第 2 步是在 Visual Studio Code 使用者設定中註冊自定義庫。

設定步驟

第 1 步：下載 AWS 圖示

首先，從 m-radzikowski/diagrams-aws-icons：帶有 AWS 架構圖示的diagrams.net 形狀庫下載所需的 XML 檔案。
在撰寫本文時，最新版本是 AWS Architecture Icons 20240206.xml 。
下載後，將 XML 檔案儲存到您喜歡的任何目錄中。例如，您可以在使用者目錄中建立一個名為“vscode-drawio”的目錄並將其儲存在那裡。
該路徑可能類似於“/Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml”。

步驟 2：在 Visual Studio Code 使用者設定中註冊自定義庫

接下來，開啟 Visual Studio Code 並按以下鍵開啟使用者設定（Windows： Ctrl + , ，Mac： Command + , ）。在搜尋框中輸入“drawio”，然後選擇“Drawio：自定義庫”。然後，單擊“在 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”，則表示設定已完成。

參考

關於使用 Digital Agency 釋出的插圖和圖示材料以及 VSCode 的 Draw.io 外掛 #VSCode - Qiita
注：上面連結的相關材料是用日語寫的。