Kanji
・云架构工程师 / 自由职业 ・1993年出生 ・爱媛县出身 / 现居东京都涩谷区 ・5年 AWS 实战经验 个人资料详情
目录
在Mermaid中使用图像时，主要有两种方法：“①使用 img 标签指定图像URL”和“②使用图标包”。下面介绍如何使用旧的AWS架构图标。
img
参考： 如何在美人鱼流程图中更改节点形状并指定图像/图标#Beginner -奇塔
使用 Mermaid 的“img”标签直接指定 AWS 图标的 URL。
flowchart TB subgraph ACCOUNT[AWS Account] subgraph GRP1[" "] ELB@{ img: "https://api.iconify.design/logos/aws-elb.svg", label: "ELB", pos: "b", w: 60, h: 60, constraint: "on" } end subgraph GRP2[" "] EC2@{ img: "https://api.iconify.design/logos/aws-ec2.svg", label: "EC2", pos: "b", w: 60, h: 60, constraint: "on" } end subgraph GRP3[" "] RDS@{ img: "https://api.iconify.design/logos/aws-rds.svg", label: "RDS", pos: "b", w: 60, h: 60, constraint: "on" } end ELB --- EC2 --- RDS end classDef vpc fill:none,color:#0a0,stroke:#0a0 class ACCOUNT vpc classDef group fill:none,stroke:none class GRP1,GRP2,GRP3 group
当在 Mermaid 中渲染时，它看起来像这样：
另一种方法是使用美人鱼图标包。这样就无需为每个图标指定 URL。
参考：【在美人鱼中注册图标包|美人鱼](https://mermaid.js.org/config/icons.html)
flowchart TB subgraph ACCOUNT[AWS Account] subgraph GRP1[" "] ELB@{ icon: "logos:aws-elb", label: "ELB", pos: "b", h: 60} end subgraph GRP2[" "] EC2@{ icon: "logos:aws-ec2", label: "EC2", pos: "b", h: 60} end subgraph GRP3[" "] RDS@{ icon: "logos:aws-rds", label: "RDS", pos: "b", h: 60} end ELB --- EC2 --- RDS end classDef vpc fill:none,color:#0a0,stroke:#0a0 class ACCOUNT vpc classDef group fill:none,stroke:none class GRP1,GRP2,GRP3 group
但是，这种方法不能在 Qiita 或 GitHub 等 SaaS 平台上使用。 要使用图标包，您需要加载托管在 CDN 或服务器上的 JSON 文件，如下所示：
<script> mermaid.registerIconPacks([ { name: 'logos', loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()), }, ]); mermaid.initialize({startOnLoad:true}); </script>
在此站点上，我们使用使用最新的 AWS 架构图标创建的自定义图标包。
要使用最新的 AWS 架构图标，您需要创建自定义 Mermaid 图标包。 本节介绍如何创建 Mermaid 图标包并使用最新的 AWS 架构图标。
首先，从以下站点下载最新的 AWS 架构图标。 点击【开始】->【图标包】开始下载。
AWS 简单图标 - AWS 架构中心 | AWS 简单图标AWS
下载的文件当前名为“Asset-Package_02072025.dee42cd0a6eaacc3da1ad9519579357fb546f803.zip”。 解压后，您将看到如下所示的文件夹结构。使用这些文件创建您的美人鱼图标包。
Asset-Package_02072025.dee42cd0a6eaacc3da1ad9519579357fb546f803/ ├── Architecture-Group-Icons_02072025 │ ├── _32.png │ ├── _32.svg │ └── ... ├── Architecture-Service-Icons_02072025 │ ├── Arch_Cloud-Financial-Management │ ├── Arch_Compute │ └── ... ├── Category-Icons_02072025 │ ├── Arch-Category_16 │ ├── Arch-Category_32 │ └── ... └── Resource-Icons_02072025 ├── Res_Analytics └── Resource-Icons_02072025 ├── Res_Analytics ├── Res_Application-Integration └── ...
接下来，将以下 Python 脚本保存在适当的目录中（例如“collect_mermaid_icons.py”）。 该脚本仅使用标准库：“re”、“os”、“json”和“argparse”。
Python 进口重新 导入argparse
文件夹_文件_模式 = { “建筑组图标”: “_32.svg”, “架构-服务-图标”: “_48.svg”, “类别图标”: “_48.svg”, “资源图标”: “_48.svg”, }
def get_icon_folders(icon_root): return [os.listdir(icon_root) 中名称的名称 if os.path.isdir(os.path.join(icon_root, name))]
def extract_svg_size(svg_content): m = re.search(r’<svg[^>] 宽度=[“']?()[“']?[^>] 高度=[“']?()[“']?’, svg_content) 如果米： 返回 int(m.group(1)), int(m.group(2))
返回 0, 0
defcollect_svg_icons(icon_root): 图标文件夹 = get_icon_folders(icon_root) 图标 = {} 对于 icon_folders 中的文件夹： print(f”处理文件夹：{folder}“) folder_path = os.path.join(icon_root, 文件夹)
如果不是 os.path.isdir(folder_path): 继续
模式=无 对于 FOLDER_FILE_PATTERNS.items() 中的键、值： 如果文件夹.startswith(key): 模式=值 休息
对于 os.walk(folder_path) 中的 root、dirs、文件： 对于文件中的文件： icon_name = os.path.splitext(文件)[0] Normalized_name = icon_name.replace(pattern.replace(“.svg”, ““).replace(”.png”, ““),”“) if 模式 else icon_name file_path = os.path.join(根目录, 文件)
如果模式： 如果不是 file.endswith(pattern): 继续
svg_内容=“” 尝试： 打开（file_path，“r”，encoding =“utf-8”）作为svg_file： svg_content = svg_file.read() fill_colors = re.findall(r’fill= “' [“']’, svg_content, flags=re.IGNORECASE)
如果填充颜色： main_color = fill_colors[0] if fill_colors else None svg_content = re.sub(r’fill=[“']#fff(?:fff)?[“']‘, f’fill=“{main_color}”’, svg_content, flags=re.IGNORECASE) 除了例外： svg_内容=“”
宽度，高度 = extract_svg_size(svg_content) 图标[标准化名称] = {“body”：svg_content，“宽度”：宽度，“高度”：高度} 继续
返回图标
def main(): parser.add_argument(“–icon-root”, type=str, help=“AWS 架构图标的根目录”) parser.add_argument(“–output-json”, type=str, default=“./icons.json”, help=“输出 JSON 文件的路径（默认：./icons.json）”) parser.add_argument(“–icon-list-txt”, type=str, default=“./icon_list.txt”, help=“图标名称列表 TXT 文件的路径（默认：./icon_list.txt）”) args = parser.parse_args()
错误标志=假 错误消息 = [] 如果不是 args.icon_root 或不是 os.path.isdir(args.icon_root): 错误标志=真 error_messages.append(“图标根目录未正确指定。请使用–icon-root选项。”) 如果不是 args.output_json： 错误标志=真 error_messages.append(“未指定输出 JSON 文件的路径。请使用 –output-json 选项。”) 如果不是 args.icon_list_txt： 错误标志=真 error_messages.append(“未指定图标名称列表TXT文件的路径。请使用–icon-list-txt选项。”)
如果错误标志： 对于 error_messages 中的消息： print(f”错误：{消息}“) 返回
图标=collect_svg_icons(args.icon_root) 输出= {“前缀”：“徽标”，“图标”：图标} 打开（args.output_json，“w”，encoding =“utf-8”）作为f： json.dump(输出，f，ensure_ascii=False，缩进=2)
icon_names = 排序(icons.keys()) 打开（args.icon_list_txt，“w”，encoding =“utf-8”）作为f： 对于 icon_names 中的名称： f.write(名称 + “”)
如果 name == “ main ”: 主要的（）
By running this script, you can collect SVG icons from the specified AWS architecture icon root directory and generate a JSON file in the Mermaid icon pack format. To execute the script, run the following command from the terminal. This will collect icons from the specified directory and generate both `icons.json` and `icon_list.txt` files.
巴什 蟒蛇collect_mermaid_icons.py –icon-root /path/to/Asset-Package_02072025.dee42cd0a6eaacc3da1ad9519579357fb546f803 # 【提示】如何在Mermaid中使用最新的AWS图标（有一些限制） –output-json ./icons.json –icon-list-txt ./icon_list.txt
The generated `icons.json` file can be used as a Mermaid icon pack. Below is an example of the actual icon pack JSON generated by the script. <details> <summary>Generated icon pack JSON</summary>
<路径 d="M42.96,21 C42.96,19.897 42.063,19 40.96,19 C39.857,19 38.96,19.897 38.96,21 C38.96,22.10339.857,23 40.96,23 C42.063,23 42.96,22.103 42.96,21 L42.96,21 Z M37.96,37 C37.96,35.897 37.063,35 35.96,35 C34.857,3533.96,35.897 33.96,37 C33.96,38.103 34.857,39 35.96,39 C37.063,39 37.96,38.103 37.96,37 L37.96,37 Z M28.96,20.5C28.96,19.122 27.839,18 26.46,18 C25.081,18 23.96,19.122 23.96,20.5 C23.96,21.878 25.081,23 26.46,23 C27.839,2328.96,21.878 28.96,20.5 L28.96,20.5 Z M18.131,30.008 L14.522,33.609 L13.109,32.193 L16.65,28.661 C15.994,28.283 15.244,28.0514.435,28.05 C11.967,28.05 9.96,30.057 9.96,32.525 C9.96,34.993 11.967,37 14.435,37 C16.902,37 18.91,34.993 18.91,32.525C18.91,31.592 18.622,30.726 18.131,30.008 L18.131,30.008 Z M21.46,10 C22.839,10 23.96,8.878 23.96,7.5 C23.96,6.122 22.839,521.46,5 C20.081,5 18.96,6.122 18.96,7.5 C18.96,8.878 20.081,10 21.46,10 L21.46,10 Z M44.96,21 C44.96,23.206 43.166,2540.96,25 C40.911,25 40.866,24.987 40.817,24.985 L38.149,33.659 C39.237,34.375 39.96,35.603 39.96,37 C39.96,39.20638.166,41 35.96,41 C33.754,41 31.96,39.206 31.96,37 C31.96,34.794 33.754,33 35.96,33 C36.06,33 36.152,33.02236.25,33.029 L38.901,24.412 C38.035,23.887 37.392,23.048 37.117,22.05 L30.668,22.05 C30.033,23.767 28.395,25 26.46,25C25.523,25 24.654,24.711 23.934,24.22 L19.56,28.583 C20.403,29.676 20.91,31.041 20.91,32.525 C20.91,36.095 18.005,3914.435,39 C10.864,39 7.96,36.095 7.96,32.525 C7.96,28.955 10.864,26.05 14.435,26.05 C15.801,26.05 17.066,26.47818.112,27.202 L22.582,22.743 C22.197,22.08 21.96,21.32 21.96,20.5 C21.96,19.047 22.664,17.766 23.735,16.943L21.611,11.985 C21.56,11.986 21.512,12 21.46,12 C18.979,12 16.96,9.981 16.96,7.5 C16.96,5.019 18.979,3 21.46,3 C23.941,325.96,5.019 25.96,7.5 C25.96,9.219 24.981,10.698 23.56,11.456 L25.548,16.094 C25.843,16.033 26.148,16 26.46,16 C28.787,1630.685,17.782 30.914,20.05 L37.087,20.05 C37.516,18.304 39.083,17 40.96,17 C43.166,17 44.96,18.794 44.96,21 L44.96,21 ZM24.699,27.294 C25.524,28.901 25.96,30.711 25.96,32.53 C25.96,38.86 20.811,44.01 14.481,44.01 C8.15,44.01 3,38.86 3,32.53C3,26.2 8.15,21.05 14.481,21.05 C16.326,21.05 18.088,21.475 19.719,22.313 L18.805,24.092 C17.46,23.4 16.005,23.0514.481,23.05 C9.253,23.05 5,27.303 5,32.53 C5,37.757 9.253,42.01 14.481,42.01 C19.707,42.01 23.96,37.757 23.96,32.53C23.96,31.006 23.61,29.552 22.92,28.208 L24.699,27.294 Z" id="Fill-1" fill="#DD344C"> “, “宽度”：48， “身高”：48 } } }
</details> ### Step 3: Load the Icon Pack in Mermaid Finally, load the Mermaid icon pack. If you want to load the JSON file from your server, add the following code to your HTML file:
On this site, we implement it by writing the contents of the JSON file into the `mermaid-icons-json` element according to the page.
To specify an icon pack, use the icon name after `logos:`. The available icon names in the pack you created are listed in the `icon_list.txt` file. ``` 文本 流程图TB 子图账户[AWS账户] 子图 GRP1[" "] ELB@{ 图标：“logos：Arch_Elastic-Load-Balancing”，标签：“ELB”，位置：“b”，w：60，h：60，约束：“on”} 结尾 子图 GRP2[" "] EC2@{ 图标：“logos：Res_Amazon-EC2_Instance”，标签：“EC2”，位置：“b”，w：60，h：60，约束：“on”} 结尾 子图 GRP3[" "] RDS@{ 图标：“logos：Arch_Amazon-RDS”，标签：“RDS”，位置：“b”，w：60，h：60，约束：“on”} 结尾 ELB --- EC2 --- RDS 结尾 classDef vpc 填充：无，颜色：#0a0，描边：#0a0 类 ACCOUNT vpc classDef 组填充：无，描边：无 类别 GRP1、GRP2、GRP3 组 ``` When displayed in Mermaid, it looks like this: As mentioned at the beginning, the ELB and RDS icons have different colors from the latest AWS architecture icons. This is because the color conversion did not work well when processing the AWS architecture icon SVG files. ``` 美人鱼 流程图TB 子图账户[AWS账户] 子图 GRP1[" "] ELB@{ 图标：“logos：Arch_Elastic-Load-Balancing”，标签：“ELB”，位置：“b”，w：60，h：60，约束：“on”} 结尾 子图 GRP2[" "] EC2@{ 图标：“logos：Res_Amazon-EC2_Instance”，标签：“EC2”，位置：“b”，w：60，h：60，约束：“on”} 结尾 子图 GRP3[" "] RDS@{ 图标：“logos：Arch_Amazon-RDS”，标签：“RDS”，位置：“b”，w：60，h：60，约束：“on”} 结尾 ELB --- EC2 --- RDS 结尾 classDef vpc 填充：无，颜色：#0a0，描边：#0a0 类 ACCOUNT vpc classDef 组填充：无，描边：无 类别 GRP1、GRP2、GRP3 组