Mermaidのflowchartでノードの形状変更や画像 / アイコンを指定する方法

# はじめに

Mermaidのバージョンアップにより、flowchartで使用できるノードの形状やアイコン、画像の指定方法が充実してきたため、備忘録としてまとめて紹介します。

また、Mermaidそのものの紹介については下記を参照ください。

https://qiita.com/b-mente/items/97a4296666faccd53a72

https://qiita.com/b-mente/items/b17275090176d63d1d69

# ノードの形状を変える

ノードに指定できる形状として、デフォルトで使える形状(Node shapes)と拡張された形状(Expanded Node Shapes)があります。

## デフォルトで使える形状(Node shapes)

デフォルトで使える形状は、記号を用いてノードの形状を指定します。

```:mermaid記法サンプル
flowchart
 N01[square]
 N02(round)
 N03{diamond}
 N04([stadium])
 N05>odd]
 N06[(cylinder)]
 N07(((doublecircle)))
 N08[/trapezoid\]
 N09[\inv_trapezoid/]
 N10[/lean_right/]
 N11[\lean_left\]
 N12[[subroutine]]
 M13{{hexagon}}
```

```mermaid
flowchart
 N01[square]
 N02(round)
 N03{diamond}
 N04([stadium])
 N05>odd]
 N06[(cylinder)]
 N07(((doublecircle)))
 N08[/trapezoid\]
 N09[\inv_trapezoid/]
 N10[/lean_right/]
 N11[\lean_left\]
 N12[[subroutine]]
 M13{{hexagon}}
```

|No|形状名|イメージ|Mermaid記法|
|---|---|---|---|
|1|square|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/10af61da-4b8d-fbfe-4128-f8e5e84a084b.png" width="100">|`[square]`|
|2|round|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/6ea8f1f1-1cb9-52a2-1ab9-f6dbb748c93d.png" width="100">|`(round)`|
|3|diamond|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/75c96af5-31ac-4a6c-294a-6333f14331f6.png" width="100">|`{diamond}`|
|4|stadium|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/8baeaf41-634d-baed-5df1-71e17e607dbe.png" width="100">|`([stadium])`|
|5|odd|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/e2640ef0-7467-7c7a-2dfb-920d28586af2.png" width="100">|`>odd]`|
|6|cylinder|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c1afc84c-e9f5-0018-390e-b08dd4da730c.png" width="100">|`[(cylinder)]`|
|7|doublecircle|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/0be31ef1-fc19-32ff-08da-3a39f92f5cf9.png" width="100">|`(((doublecircle)))`|
|8|trapezoid|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/0c3033db-e38f-f582-6700-110e67008c86.png" width="100">|`[/trapezoid\]`|
|9|inv_trapezoid|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/36be008e-5ff9-ee01-8c41-6e00ea7474bd.png" width="100">|`[\inv_trapezoid/]`|
|10|lean_right|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/f3a5c49e-19c6-10b1-b1a9-a50b9b652a06.png" width="100">|`[/lean_right/]`|
|11|lean_left|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/3a9d4847-d126-4516-9f6f-fb7063734b2c.png" width="100">|`[\lean_left\]`|
|12|subroutine|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c711c267-292f-6efb-7d29-01d52ab4fa43.png" width="100">|`[[subroutine]]`|
|13|hexagon|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/131697ef-db70-18b3-ef95-1b070b1939ea.png" width="100">|`{{hexagon}}`|

:::note info

バージョンが上がると形状の種類も増える可能性があるので、現在使える形状は[公式ドキュメント](https://mermaid.js.org/syntax/flowchart.html#node-shapes)や[Githubのコード](https://github.com/mermaid-js/mermaid/blob/df636c6d0a127a5ce3270672499dd7e230ce33fc/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js#L331)を参考にしてください。

:::

## 拡張された形状(Expanded Node Shapes)

バージョン11.3.0から、拡張された形状(Expanded Node Shapes)が使えるようになりました。

`(ノード名称)@{ shape: (形状名) }`フォーマットでノードの形状を指定します。

```:mermaid記法サンプル
flowchart LR
  N1@{ shape: lin-cyl }
  N2@{ shape: h-cyl }
  N3@{ shape: doc }

  N1 --- N2 --- N3
```

```mermaid
flowchart LR
  N1@{ shape: lin-cyl }
  N2@{ shape: h-cyl }
  N3@{ shape: doc }

  N1 --- N2 --- N3
```

また、指定できる形状は下記になります。

|No|形状名|イメージ|Mermaid記法|
|---|---|---|---|
|1|rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/4ccb252c-c891-6c64-8cb9-fbf446b8cc57.png" width="100">|N@{ shape: rect}|
|2|rounded|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/a35801bf-9d90-4c42-91d2-2ba7228fcace.png" width="100">|N@{ shape: rounded}|
|3|stadium|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/a858f037-038f-b3e3-7b90-aaf38237556b.png" width="100">|N@{ shape: stadium}|
|4|fr-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c39730c3-951c-432c-5170-feacd2ea3998.png" width="100">|N@{ shape: fr-rect}|
|5|cyl|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/56194c80-04e4-5245-b8f4-24bf44f7bac0.png" width="100">|N@{ shape: cyl}|
|6|circle|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c2910e68-ce5a-844a-41b9-922badc6805f.png" width="100">|N@{ shape: circle}|
|7|diam|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/1c9db3ff-115e-34d8-a8f8-6ddac72a02b4.png" width="100">|N@{ shape: diam}|
|8|hex|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/4fc43643-d46a-61eb-594d-c66948f875fe.png" width="100">|N@{ shape: hex}|
|9|lean-r|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/310680de-dfed-f7a5-a2b8-d94d92ddfcce.png" width="100">|N@{ shape: lean-r}|
|10|lean-l|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/4a968b4e-66a2-05b8-52e5-f2c72b931b90.png" width="100">|N@{ shape: lean-l}|
|11|trap-b|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/43ae8c78-a70f-512f-a1a6-5537a8996709.png" width="100">|N@{ shape: trap-b}|
|12|trap-t|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/69574b38-6751-fe3d-fb6f-1c196c72833e.png" width="100">|N@{ shape: trap-t}|
|13|dbl-circ|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/2ad39959-652a-9463-2bf9-6c658f74f265.png" width="100">|N@{ shape: dbl-circ}|
|14|text|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/e9d668c4-8f6a-54cd-c39d-962c80fb2434.png" width="100">|N@{ shape: text}|
|15|notch-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/6e501ff3-15ee-af7d-c9b7-a0e1072bacba.png" width="100">|N@{ shape: notch-rect}|
|16|lin-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/ce78779a-0ec7-78f6-4ad4-a9dd4549f710.png" width="100">|N@{ shape: lin-rect}|
|17|sm-circ|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/955dd1cf-7d21-d0cd-0cb2-4c6e673fa00e.png" width="100">|N@{ shape: sm-circ}|
|18|fr-circ|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/7a70e6f5-cb68-4681-456f-46769826dce8.png" width="100">|N@{ shape: fr-circ}|
|19|fork|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/a815a8aa-48bf-2d9a-da03-823561864bfe.png" width="100">|N@{ shape: fork}|
|20|hourglass|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/d3e07a2b-fe43-bb2d-b54e-8b2b883ac3bb.png" width="100">|N@{ shape: hourglass}|
|21|brace|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c6692099-12a3-3296-59e3-3d0dc1de1373.png" width="100">|N@{ shape: brace}|
|22|brace-r|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c33488fc-f8a8-f9de-9ba9-1ca9189dd7b6.png" width="100">|N@{ shape: brace-r}|
|23|braces|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/441ba39b-df65-5b74-89f7-07d2c0dd890e.png" width="100">|N@{ shape: braces}|
|24|bolt|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c1ed907a-bf89-8b4b-d612-3b7a3c16146c.png" width="100">|N@{ shape: bolt}|
|25|doc|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/cebd20b5-cf40-b4f7-555c-5c961d65475b.png" width="100">|N@{ shape: doc}|
|26|delay|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/173f10c5-7e2b-62b5-6c61-ef2c78f1c7f2.png" width="100">|N@{ shape: delay}|
|27|h-cyl|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/b2f954c3-1493-558d-641c-5ed84a5075fc.png" width="100">|N@{ shape: h-cyl}|
|28|lin-cyl|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/3fa4eaf4-02a7-bcbc-4eda-7fadff3750e1.png" width="100">|N@{ shape: lin-cyl}|
|29|curv-trap|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/620c5bd4-2c71-5d07-a044-6c72af6be972.png" width="100">|N@{ shape: curv-trap}|
|30|div-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/d8ea65e1-424f-cd77-9e2f-fe561f85e68a.png" width="100">|N@{ shape: div-rect}|
|31|tri|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/28528a6c-f835-527b-faae-d38483d03149.png" width="100">|N@{ shape: tri}|
|32|win-pane|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/01c191e6-cbcd-5dc2-4387-3d3f849f79c3.png" width="100">|N@{ shape: win-pane}|
|33|f-circ|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/b48ed135-fb5e-f0e2-96d1-f5bc4e3badc2.png" width="100">|N@{ shape: f-circ}|
|34|notch-pent|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/3fd6716b-63df-c868-4685-2b25a75f8fa3.png" width="100">|N@{ shape: notch-pent}|
|35|flip-tri|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/2698a312-4ab8-15be-1c01-32b99e53b063.png" width="100">|N@{ shape: flip-tri}|
|36|sl-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/d0f00cda-a953-1935-1036-324bf7fd86c7.png" width="100">|N@{ shape: sl-rect}|
|37|docs|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/5f7c0ac7-2840-7d7e-1664-8a187ea77466.png" width="100">|N@{ shape: docs}|
|38|st-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/dba377e4-7f68-9308-a349-d84ad04618f3.png" width="100">|N@{ shape: st-rect}|
|39|bow-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/22687432-ccc3-13ee-4f02-3e3082585775.png" width="100">|N@{ shape: bow-rect}|
|40|cross-circ|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/778c3ebe-488a-14c3-09cb-2528900ad0be.png" width="100">|N@{ shape: cross-circ}|
|41|tag-doc|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/391ed4df-ad87-06b7-fded-9ea478b33544.png" width="100">|N@{ shape: tag-doc}|
|42|tag-rect|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/d7fc4a32-604f-d495-ccb9-1f8230048d3b.png" width="100">|N@{ shape: tag-rect}|
|43|flag|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/afafe420-ac64-ecd0-dcc2-60a9f60063ec.png" width="100">|N@{ shape: flag}|
|44|odd|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/ef0bbb3f-a145-73b9-3bd7-974d8d09d131.png" width="100">|N@{ shape: odd}|
|45|lin-doc|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/0002fe2d-3340-fbab-6773-0327a9dafbc1.png" width="100">|N@{ shape: lin-doc}|

<details><summary>mermaid記法 全ての形状</summary><div>

```:mermaid記法
flowchart
  N1@{ shape: rect, label: "rect" }
  N2@{ shape: rounded, label: "rounded" }
  N3@{ shape: stadium, label: "stadium" }
  N4@{ shape: fr-rect, label: "fr-rect" }
  N5@{ shape: cyl, label: "cyl" }
  N6@{ shape: circle, label: "circle" }
  N7@{ shape: diam, label: "diam" }
  N8@{ shape: hex, label: "hex" }
  N9@{ shape: lean-r, label: "lean-r" }
  N10@{ shape: lean-l, label: "lean-l" }
```

```:mermaid記法
flowchart
  N11@{ shape: trap-b, label: "trap-b" }
  N12@{ shape: trap-t, label: "trap-t" }
  N13@{ shape: dbl-circ, label: "dbl-circ" }
  N14@{ shape: text, label: "text" }
  N15@{ shape: notch-rect, label: "notch-rect" }
  N16@{ shape: lin-rect, label: "lin-rect" }
  N17@{ shape: sm-circ, label: "sm-circ" }
  N18@{ shape: fr-circ, label: "fr-circ" }
  N19@{ shape: fork, label: "fork" }
  N20@{ shape: hourglass, label: "hourglass" }
```

```:mermaid記法
flowchart
  N21@{ shape: brace, label: "brace" }
  N22@{ shape: brace-r, label: "brace-r" }
  N23@{ shape: braces, label: "braces" }
  N24@{ shape: bolt, label: "bolt" }
  N25@{ shape: doc, label: "doc" }
  N26@{ shape: delay, label: "delay" }
  N27@{ shape: h-cyl, label: "h-cyl" }
  N28@{ shape: lin-cyl, label: "lin-cyl" }
  N29@{ shape: curv-trap, label: "curv-trap" }
  N30@{ shape: div-rect, label: "div-rect" }
```

```:mermaid記法
flowchart
  N31@{ shape: tri, label: "tri" }
  N32@{ shape: win-pane, label: "win-pane" }
  N33@{ shape: f-circ, label: "f-circ" }
  N34@{ shape: notch-pent, label: "notch-pent" }
  N35@{ shape: flip-tri, label: "flip-tri" }
  N36@{ shape: sl-rect, label: "sl-rect" }
  N37@{ shape: docs, label: "docs" }
  N38@{ shape: st-rect, label: "st-rect" }
  N39@{ shape: bow-rect, label: "bow-rect" }
  N40@{ shape: cross-circ, label: "cross-circ" }
```

```:mermaid記法
flowchart
  N41@{ shape: tag-doc, label: "tag-doc" }
  N42@{ shape: tag-rect, label: "tag-rect" }
  N43@{ shape: flag, label: "flag" }
  N44@{ shape: odd, label: "odd" }
  N45@{ shape: lin-doc, label: "lin-doc" }
```

--- 
```mermaid
flowchart
  N1@{ shape: rect, label: "rect" }
  N2@{ shape: rounded, label: "rounded" }
  N3@{ shape: stadium, label: "stadium" }
  N4@{ shape: fr-rect, label: "fr-rect" }
  N5@{ shape: cyl, label: "cyl" }
  N6@{ shape: circle, label: "circle" }
  N7@{ shape: diam, label: "diam" }
  N8@{ shape: hex, label: "hex" }
  N9@{ shape: lean-r, label: "lean-r" }
  N10@{ shape: lean-l, label: "lean-l" }
```

```mermaid
flowchart
  N11@{ shape: trap-b, label: "trap-b" }
  N12@{ shape: trap-t, label: "trap-t" }
  N13@{ shape: dbl-circ, label: "dbl-circ" }
  N14@{ shape: text, label: "text" }
  N15@{ shape: notch-rect, label: "notch-rect" }
  N16@{ shape: lin-rect, label: "lin-rect" }
  N17@{ shape: sm-circ, label: "sm-circ" }
  N18@{ shape: fr-circ, label: "fr-circ" }
  N19@{ shape: fork, label: "fork" }
  N20@{ shape: hourglass, label: "hourglass" }
```

```mermaid
flowchart
  N21@{ shape: brace, label: "brace" }
  N22@{ shape: brace-r, label: "brace-r" }
  N23@{ shape: braces, label: "braces" }
  N24@{ shape: bolt, label: "bolt" }
  N25@{ shape: doc, label: "doc" }
  N26@{ shape: delay, label: "delay" }
  N27@{ shape: h-cyl, label: "h-cyl" }
  N28@{ shape: lin-cyl, label: "lin-cyl" }
  N29@{ shape: curv-trap, label: "curv-trap" }
  N30@{ shape: div-rect, label: "div-rect" }
```

```mermaid
flowchart
  N31@{ shape: tri, label: "tri" }
  N32@{ shape: win-pane, label: "win-pane" }
  N33@{ shape: f-circ, label: "f-circ" }
  N34@{ shape: notch-pent, label: "notch-pent" }
  N35@{ shape: flip-tri, label: "flip-tri" }
  N36@{ shape: sl-rect, label: "sl-rect" }
  N37@{ shape: docs, label: "docs" }
  N38@{ shape: st-rect, label: "st-rect" }
  N39@{ shape: bow-rect, label: "bow-rect" }
  N40@{ shape: cross-circ, label: "cross-circ" }
```

```mermaid
flowchart
  N41@{ shape: tag-doc, label: "tag-doc" }
  N42@{ shape: tag-rect, label: "tag-rect" }
  N43@{ shape: flag, label: "flag" }
  N44@{ shape: odd, label: "odd" }
  N45@{ shape: lin-doc, label: "lin-doc" }
```

</div></details>

:::note info

バージョンが上がると形状の種類も増える可能性があるので、現在使える形状は[公式ドキュメント](https://mermaid.js.org/syntax/flowchart.html#expanded-node-shapes-in-mermaid-flowcharts-v11-3-0)や[Githubのコード](https://github.com/mermaid-js/mermaid/blob/df636c6d0a127a5ce3270672499dd7e230ce33fc/packages/mermaid/src/rendering-util/rendering-elements/shapes.ts#L85)を参考にしてください。

また、v11.3.0の[New Flowchart Shapes (with new syntax) #5825 Pull Request](https://github.com/mermaid-js/mermaid/pull/5825)がありますので、詳細を追いかけたい方は参考にしてください。

:::

# ノードに画像やアイコンを使う

## 画像URL指定

バージョン11.3.0からノードに画像のURLを指定できるようになりました。

下記のフォーマットでノードを指定します。

```:画像指定フォーマット
(ノード名称)@{
    img: (画像URL),
    label: (テキストラベル),
    pos: (ラベル位置 t/b),
    w: (画像横幅),
    h: (画像縦幅),
    constraint: (アスペクト比維持 on/off)
}
```

画像URLにはsvgやpngなどの代表的な画像ファイルだけでなく、Webサイトのfavicon(icoファイル)なども使用できます。

```:mermaid記法サンプル
flowchart LR
  N1@{ img: "https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico", w: 60, h: 60, constraint: "on" }

  subgraph GC[AWS Cloud]
    N2@{ img: "https://api.iconify.design/logos/aws-elb.svg", label: "ELB", pos: "t", w: 60, h: 60, constraint: "on" }
    N3@{ img: "https://api.iconify.design/logos/aws-ecs.svg", label: "ECS", pos: "t", w: 60, h: 60, constraint: "on" }
    N4@{ img: "https://api.iconify.design/logos/aws-iam.svg", label: "IAM", pos: "t", w: 60, h: 60, constraint: "on" }
  end

  N1 --- N2 --- N3 ~~~ N4

  style GC fill:none,color:#345,stroke:#345
```

```mermaid
flowchart LR
  N1@{ img: "https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico", w: 60, h: 60, constraint: "on" }

  subgraph GC[AWS Cloud]
    N2@{ img: "https://api.iconify.design/logos/aws-elb.svg", label: "ELB", pos: "t", w: 60, h: 60, constraint: "on" }
    N3@{ img: "https://api.iconify.design/logos/aws-ecs.svg", label: "ECS", pos: "t", w: 60, h: 60, constraint: "on" }
    N4@{ img: "https://api.iconify.design/logos/aws-iam.svg", label: "IAM", pos: "t", w: 60, h: 60, constraint: "on" }
  end

  N1 --- N2 --- N3 ~~~ N4

  style GC fill:none,color:#345,stroke:#345
```

なお、`~~~`はノード同士を繋ぐリンクを非表示にする指定で、ノードの位置を変更したい場合などに活用できます。

:::note info

[公式ドキュメント](https://mermaid.js.org/syntax/flowchart.html#image-shape)や[v11.3.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.3.0)の[New Flowchart Shapes (with new syntax) #5825 Pull Request](https://github.com/mermaid-js/mermaid/pull/5825)がありますので、詳細を追いかけたい方は参考にしてください。

:::

## アイコンパック指定

バージョン11.1.0から、[Icônes](https://icones.js.org/)などの[IconifyJSON形式](https://iconify.design/docs/types/iconify-json.html)のアイコンパックのSVG画像が使えるようになりました。

:::note warn

本手法はQiitaやGithubなどのWebサービスでは利用できません。
使用をするにはCDNから直接JSONファイルを使用するか、npmでアイコンパッケージをインストールする必要があります。

:::

下記のフォーマットでノードの画像を指定します。

```:画像指定フォーマット
(ノード名称)@{
    icon: (アイコンパックのアイコン名称),
    label: (テキストラベル),
    pos: (ラベル位置 t/b),
    h: (画像縦幅)
}
```

```html:htmlサンプル(CDNから直接JSONファイルを使用する方法)
<!DOCTYPE html>
<head>
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
  <div class="mermaid">
    flowchart LR
      N1@{ icon: "logos:slack-icon", form: "square", h: 60 }
    
      subgraph GC[AWS Cloud]
        N2@{ icon: "logos:aws-elb", form: "square", label: "ELB", pos: "t", h: 60 }
        N3@{ icon: "logos:aws-ecs", form: "square", label: "ECS", pos: "t", h: 60 }
        N4@{ icon: "logos:aws-iam", form: "square", label: "IAM", pos: "t", h: 60 }
      end
    
      N1 --- N2 --- N3 ~~~ N4
    
      style GC fill:none,color:#345,stroke:#345
  </div>
  <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>
</body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/4c18d413-0063-47e4-5ca5-53ac1c79ec78.png)

また、自前のSVGファイルをIconifyJSON形式のアイコンパックに変換したい場合は下記を参考にしてください。

https://iconify.design/docs/libraries/tools/examples/import-mdi.html

:::note info

[公式ドキュメント - アイコンパック登録](https://mermaid.js.org/config/icons.html)、[公式ドキュメント - アイコン形状指定](https://mermaid.js.org/syntax/flowchart.html#icon-shape)や
[v11.1.0](https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.1.0)の[feat: Support Iconify Icons Pull Request #5793](https://github.com/mermaid-js/mermaid/pull/5793)がありますので、詳細を追いかけたい方は参考にしてください。

:::

## AWS画像URL・アイコン名称一覧

Icônesのアイコンパックや[Iconify API](https://iconify.design/docs/api/)の中で、AWSに関連するアイコン名称や画像URLの一覧を記載します。

画像URL指定やアイコンパック指定でAWS構成図を書く際にご利用ください。

|No|イメージ|Icônesアイコン|Iconify API URL|
|---|---|---|---|
|1|<img src="https://api.iconify.design/logos/aws.svg" width="50">|logos:aws|https://api.iconify.design/logos/aws.svg|
|2|<img src="https://api.iconify.design/logos/aws-amplify.svg" width="50">|logos:aws-amplify|https://api.iconify.design/logos/aws-amplify.svg|
|3|<img src="https://api.iconify.design/logos/aws-api-gateway.svg" width="50">|logos:aws-api-gateway|https://api.iconify.design/logos/aws-api-gateway.svg|
|4|<img src="https://api.iconify.design/logos/aws-app-mesh.svg" width="50">|logos:aws-app-mesh|https://api.iconify.design/logos/aws-app-mesh.svg|
|5|<img src="https://api.iconify.design/logos/aws-appflow.svg" width="50">|logos:aws-appflow|https://api.iconify.design/logos/aws-appflow.svg|
|6|<img src="https://api.iconify.design/logos/aws-appsync.svg" width="50">|logos:aws-appsync|https://api.iconify.design/logos/aws-appsync.svg|
|7|<img src="https://api.iconify.design/logos/aws-athena.svg" width="50">|logos:aws-athena|https://api.iconify.design/logos/aws-athena.svg|
|8|<img src="https://api.iconify.design/logos/aws-aurora.svg" width="50">|logos:aws-aurora|https://api.iconify.design/logos/aws-aurora.svg|
|9|<img src="https://api.iconify.design/logos/aws-backup.svg" width="50">|logos:aws-backup|https://api.iconify.design/logos/aws-backup.svg|
|10|<img src="https://api.iconify.design/logos/aws-batch.svg" width="50">|logos:aws-batch|https://api.iconify.design/logos/aws-batch.svg|
|11|<img src="https://api.iconify.design/logos/aws-certificate-manager.svg" width="50">|logos:aws-certificate-manager|https://api.iconify.design/logos/aws-certificate-manager.svg|
|12|<img src="https://api.iconify.design/logos/aws-cloudformation.svg" width="50">|logos:aws-cloudformation|https://api.iconify.design/logos/aws-cloudformation.svg|
|13|<img src="https://api.iconify.design/logos/aws-cloudfront.svg" width="50">|logos:aws-cloudfront|https://api.iconify.design/logos/aws-cloudfront.svg|
|14|<img src="https://api.iconify.design/logos/aws-cloudsearch.svg" width="50">|logos:aws-cloudsearch|https://api.iconify.design/logos/aws-cloudsearch.svg|
|15|<img src="https://api.iconify.design/logos/aws-cloudtrail.svg" width="50">|logos:aws-cloudtrail|https://api.iconify.design/logos/aws-cloudtrail.svg|
|16|<img src="https://api.iconify.design/logos/aws-cloudwatch.svg" width="50">|logos:aws-cloudwatch|https://api.iconify.design/logos/aws-cloudwatch.svg|
|17|<img src="https://api.iconify.design/logos/aws-codebuild.svg" width="50">|logos:aws-codebuild|https://api.iconify.design/logos/aws-codebuild.svg|
|18|<img src="https://api.iconify.design/logos/aws-codecommit.svg" width="50">|logos:aws-codecommit|https://api.iconify.design/logos/aws-codecommit.svg|
|19|<img src="https://api.iconify.design/logos/aws-codedeploy.svg" width="50">|logos:aws-codedeploy|https://api.iconify.design/logos/aws-codedeploy.svg|
|20|<img src="https://api.iconify.design/logos/aws-codepipeline.svg" width="50">|logos:aws-codepipeline|https://api.iconify.design/logos/aws-codepipeline.svg|
|21|<img src="https://api.iconify.design/logos/aws-codestar.svg" width="50">|logos:aws-codestar|https://api.iconify.design/logos/aws-codestar.svg|
|22|<img src="https://api.iconify.design/logos/aws-cognito.svg" width="50">|logos:aws-cognito|https://api.iconify.design/logos/aws-cognito.svg|
|23|<img src="https://api.iconify.design/logos/aws-config.svg" width="50">|logos:aws-config|https://api.iconify.design/logos/aws-config.svg|
|24|<img src="https://api.iconify.design/logos/aws-documentdb.svg" width="50">|logos:aws-documentdb|https://api.iconify.design/logos/aws-documentdb.svg|
|25|<img src="https://api.iconify.design/logos/aws-dynamodb.svg" width="50">|logos:aws-dynamodb|https://api.iconify.design/logos/aws-dynamodb.svg|
|26|<img src="https://api.iconify.design/logos/aws-ec2.svg" width="50">|logos:aws-ec2|https://api.iconify.design/logos/aws-ec2.svg|
|27|<img src="https://api.iconify.design/logos/aws-ecs.svg" width="50">|logos:aws-ecs|https://api.iconify.design/logos/aws-ecs.svg|
|28|<img src="https://api.iconify.design/logos/aws-eks.svg" width="50">|logos:aws-eks|https://api.iconify.design/logos/aws-eks.svg|
|29|<img src="https://api.iconify.design/logos/aws-elastic-beanstalk.svg" width="50">|logos:aws-elastic-beanstalk|https://api.iconify.design/logos/aws-elastic-beanstalk.svg|
|30|<img src="https://api.iconify.design/logos/aws-elastic-cache.svg" width="50">|logos:aws-elastic-cache|https://api.iconify.design/logos/aws-elastic-cache.svg|
|31|<img src="https://api.iconify.design/logos/aws-elasticache.svg" width="50">|logos:aws-elasticache|https://api.iconify.design/logos/aws-elasticache.svg|
|32|<img src="https://api.iconify.design/logos/aws-elb.svg" width="50">|logos:aws-elb|https://api.iconify.design/logos/aws-elb.svg|
|33|<img src="https://api.iconify.design/logos/aws-eventbridge.svg" width="50">|logos:aws-eventbridge|https://api.iconify.design/logos/aws-eventbridge.svg|
|34|<img src="https://api.iconify.design/logos/aws-fargate.svg" width="50">|logos:aws-fargate|https://api.iconify.design/logos/aws-fargate.svg|
|35|<img src="https://api.iconify.design/logos/aws-glacier.svg" width="50">|logos:aws-glacier|https://api.iconify.design/logos/aws-glacier.svg|
|36|<img src="https://api.iconify.design/logos/aws-glue.svg" width="50">|logos:aws-glue|https://api.iconify.design/logos/aws-glue.svg|
|37|<img src="https://api.iconify.design/logos/aws-iam.svg" width="50">|logos:aws-iam|https://api.iconify.design/logos/aws-iam.svg|
|38|<img src="https://api.iconify.design/logos/aws-keyspaces.svg" width="50">|logos:aws-keyspaces|https://api.iconify.design/logos/aws-keyspaces.svg|
|39|<img src="https://api.iconify.design/logos/aws-kinesis.svg" width="50">|logos:aws-kinesis|https://api.iconify.design/logos/aws-kinesis.svg|
|40|<img src="https://api.iconify.design/logos/aws-kms.svg" width="50">|logos:aws-kms|https://api.iconify.design/logos/aws-kms.svg|
|41|<img src="https://api.iconify.design/logos/aws-lake-formation.svg" width="50">|logos:aws-lake-formation|https://api.iconify.design/logos/aws-lake-formation.svg|
|42|<img src="https://api.iconify.design/logos/aws-lambda.svg" width="50">|logos:aws-lambda|https://api.iconify.design/logos/aws-lambda.svg|
|43|<img src="https://api.iconify.design/logos/aws-lightsail.svg" width="50">|logos:aws-lightsail|https://api.iconify.design/logos/aws-lightsail.svg|
|44|<img src="https://api.iconify.design/logos/aws-mobilehub.svg" width="50">|logos:aws-mobilehub|https://api.iconify.design/logos/aws-mobilehub.svg|
|45|<img src="https://api.iconify.design/logos/aws-mq.svg" width="50">|logos:aws-mq|https://api.iconify.design/logos/aws-mq.svg|
|46|<img src="https://api.iconify.design/logos/aws-msk.svg" width="50">|logos:aws-msk|https://api.iconify.design/logos/aws-msk.svg|
|47|<img src="https://api.iconify.design/logos/aws-neptune.svg" width="50">|logos:aws-neptune|https://api.iconify.design/logos/aws-neptune.svg|
|48|<img src="https://api.iconify.design/logos/aws-open-search.svg" width="50">|logos:aws-open-search|https://api.iconify.design/logos/aws-open-search.svg|
|49|<img src="https://api.iconify.design/logos/aws-opsworks.svg" width="50">|logos:aws-opsworks|https://api.iconify.design/logos/aws-opsworks.svg|
|50|<img src="https://api.iconify.design/logos/aws-quicksight.svg" width="50">|logos:aws-quicksight|https://api.iconify.design/logos/aws-quicksight.svg|
|51|<img src="https://api.iconify.design/logos/aws-rds.svg" width="50">|logos:aws-rds|https://api.iconify.design/logos/aws-rds.svg|
|52|<img src="https://api.iconify.design/logos/aws-redshift.svg" width="50">|logos:aws-redshift|https://api.iconify.design/logos/aws-redshift.svg|
|53|<img src="https://api.iconify.design/logos/aws-route53.svg" width="50">|logos:aws-route53|https://api.iconify.design/logos/aws-route53.svg|
|54|<img src="https://api.iconify.design/logos/aws-s3.svg" width="50">|logos:aws-s3|https://api.iconify.design/logos/aws-s3.svg|
|55|<img src="https://api.iconify.design/logos/aws-secrets-manager.svg" width="50">|logos:aws-secrets-manager|https://api.iconify.design/logos/aws-secrets-manager.svg|
|56|<img src="https://api.iconify.design/logos/aws-ses.svg" width="50">|logos:aws-ses|https://api.iconify.design/logos/aws-ses.svg|
|57|<img src="https://api.iconify.design/logos/aws-shield.svg" width="50">|logos:aws-shield|https://api.iconify.design/logos/aws-shield.svg|
|58|<img src="https://api.iconify.design/logos/aws-sns.svg" width="50">|logos:aws-sns|https://api.iconify.design/logos/aws-sns.svg|
|59|<img src="https://api.iconify.design/logos/aws-sqs.svg" width="50">|logos:aws-sqs|https://api.iconify.design/logos/aws-sqs.svg|
|60|<img src="https://api.iconify.design/logos/aws-step-functions.svg" width="50">|logos:aws-step-functions|https://api.iconify.design/logos/aws-step-functions.svg|
|61|<img src="https://api.iconify.design/logos/aws-systems-manager.svg" width="50">|logos:aws-systems-manager|https://api.iconify.design/logos/aws-systems-manager.svg|
|62|<img src="https://api.iconify.design/logos/aws-timestream.svg" width="50">|logos:aws-timestream|https://api.iconify.design/logos/aws-timestream.svg|
|63|<img src="https://api.iconify.design/logos/aws-vpc.svg" width="50">|logos:aws-vpc|https://api.iconify.design/logos/aws-vpc.svg|
|64|<img src="https://api.iconify.design/logos/aws-waf.svg" width="50">|logos:aws-waf|https://api.iconify.design/logos/aws-waf.svg|
|65|<img src="https://api.iconify.design/logos/aws-xray.svg" width="50">|logos:aws-xray|https://api.iconify.design/logos/aws-xray.svg|

# おわりに

本記事では、Mermaidのflowchartで使用できるノード形状変更や画像、アイコンを指定の方法について紹介しました。

特にシステム構成やアーキテクチャの可視化を目的とした内容を紹介しましたが、v11.1.0以降ではArchitecture Diagrams（β版）が利用可能となっています。今後、この機能が実用段階まで拡充されれば、flowchartからArchitecture Diagramsへの移行を検討するのも良いかもしれません。

詳細は公式ドキュメントをご覧ください。

https://mermaid.js.org/syntax/architecture