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

📅 发布日: 2025/01/04, 更新日: 2025/06/17 ⏱️ 预计阅读时间约3分钟 (1,138字)

通过使用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
注：上面链接的相关材料是用日语写的。