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 組