はじめに
Mermaidのバージョンアップにより、flowchartで使用できるノードの形状やアイコン、画像の指定方法が充実してきたため、備忘録としてまとめて紹介します。
また、Mermaidそのものの紹介については下記を参照ください。
ノードの形状を変える
ノードに指定できる形状として、デフォルトで使える形状(Node shapes)と拡張された形状(Expanded Node Shapes)があります。
デフォルトで使える形状(Node shapes)
デフォルトで使える形状は、記号を用いてノードの形状を指定します。
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 |  |
[square] |
| 2 | round |  |
(round) |
| 3 | diamond |  |
{diamond} |
| 4 | stadium |  |
([stadium]) |
| 5 | odd |  |
>odd] |
| 6 | cylinder |  |
[(cylinder)] |
| 7 | doublecircle |  |
(((doublecircle))) |
| 8 | trapezoid |  |
[/trapezoid\] |
| 9 | inv_trapezoid |  |
[\inv_trapezoid/] |
| 10 | lean_right |  |
[/lean_right/] |
| 11 | lean_left |  |
[\lean_left\] |
| 12 | subroutine |  |
[[subroutine]] |
| 13 | hexagon |  |
{{hexagon}} |
バージョンが上がると形状の種類も増える可能性があるので、現在使える形状は公式ドキュメントやGithubのコードを参考にしてください。
拡張された形状(Expanded Node Shapes)
バージョン11.3.0から、拡張された形状(Expanded Node Shapes)が使えるようになりました。
(ノード名称)@{ shape: (形状名) }フォーマットでノードの形状を指定します。
flowchart LR
N1@{ shape: lin-cyl }
N2@{ shape: h-cyl }
N3@{ shape: doc }
N1 --- N2 --- N3
また、指定できる形状は下記になります。
| No | 形状名 | イメージ | Mermaid記法 |
|---|---|---|---|
| 1 | rect |  |
N@{ shape: rect} |
| 2 | rounded |  |
N@{ shape: rounded} |
| 3 | stadium |  |
N@{ shape: stadium} |
| 4 | fr-rect |  |
N@{ shape: fr-rect} |
| 5 | cyl |  |
N@{ shape: cyl} |
| 6 | circle |  |
N@{ shape: circle} |
| 7 | diam |  |
N@{ shape: diam} |
| 8 | hex |  |
N@{ shape: hex} |
| 9 | lean-r |  |
N@{ shape: lean-r} |
| 10 | lean-l |  |
N@{ shape: lean-l} |
| 11 | trap-b |  |
N@{ shape: trap-b} |
| 12 | trap-t |  |
N@{ shape: trap-t} |
| 13 | dbl-circ |  |
N@{ shape: dbl-circ} |
| 14 | text |  |
N@{ shape: text} |
| 15 | notch-rect |  |
N@{ shape: notch-rect} |
| 16 | lin-rect |  |
N@{ shape: lin-rect} |
| 17 | sm-circ |  |
N@{ shape: sm-circ} |
| 18 | fr-circ |  |
N@{ shape: fr-circ} |
| 19 | fork |  |
N@{ shape: fork} |
| 20 | hourglass |  |
N@{ shape: hourglass} |
| 21 | brace |  |
N@{ shape: brace} |
| 22 | brace-r |  |
N@{ shape: brace-r} |
| 23 | braces |  |
N@{ shape: braces} |
| 24 | bolt |  |
N@{ shape: bolt} |
| 25 | doc |  |
N@{ shape: doc} |
| 26 | delay |  |
N@{ shape: delay} |
| 27 | h-cyl |  |
N@{ shape: h-cyl} |
| 28 | lin-cyl |  |
N@{ shape: lin-cyl} |
| 29 | curv-trap |  |
N@{ shape: curv-trap} |
| 30 | div-rect |  |
N@{ shape: div-rect} |
| 31 | tri |  |
N@{ shape: tri} |
| 32 | win-pane |  |
N@{ shape: win-pane} |
| 33 | f-circ |  |
N@{ shape: f-circ} |
| 34 | notch-pent |  |
N@{ shape: notch-pent} |
| 35 | flip-tri |  |
N@{ shape: flip-tri} |
| 36 | sl-rect |  |
N@{ shape: sl-rect} |
| 37 | docs |  |
N@{ shape: docs} |
| 38 | st-rect |  |
N@{ shape: st-rect} |
| 39 | bow-rect |  |
N@{ shape: bow-rect} |
| 40 | cross-circ |  |
N@{ shape: cross-circ} |
| 41 | tag-doc |  |
N@{ shape: tag-doc} |
| 42 | tag-rect |  |
N@{ shape: tag-rect} |
| 43 | flag |  |
N@{ shape: flag} |
| 44 | odd |  |
N@{ shape: odd} |
| 45 | lin-doc |  |
N@{ shape: 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" }
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" }
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" }
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" }
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" }
バージョンが上がると形状の種類も増える可能性があるので、現在使える形状は公式ドキュメントやGithubのコードを参考にしてください。
また、v11.3.0のNew Flowchart Shapes (with new syntax) #5825 Pull Requestがありますので、詳細を追いかけたい方は参考にしてください。
ノードに画像やアイコンを使う
画像URL指定
バージョン11.3.0からノードに画像のURLを指定できるようになりました。
下記のフォーマットでノードを指定します。
(ノード名称)@{
img: (画像URL),
label: (テキストラベル),
pos: (ラベル位置 t/b),
w: (画像横幅),
h: (画像縦幅),
constraint: (アスペクト比維持 on/off)
}
画像URLにはsvgやpngなどの代表的な画像ファイルだけでなく、Webサイトのfavicon(icoファイル)なども使用できます。
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
なお、~~~はノード同士を繋ぐリンクを非表示にする指定で、ノードの位置を変更したい場合などに活用できます。
公式ドキュメントやv11.3.0のNew Flowchart Shapes (with new syntax) #5825 Pull Requestがありますので、詳細を追いかけたい方は参考にしてください。
アイコンパック指定
バージョン11.1.0から、IcônesなどのIconifyJSON形式のアイコンパックのSVG画像が使えるようになりました。
本手法はQiitaやGithubなどのWebサービスでは利用できません。
使用をするにはCDNから直接JSONファイルを使用するか、npmでアイコンパッケージをインストールする必要があります。
下記のフォーマットでノードの画像を指定します。
(ノード名称)@{
icon: (アイコンパックのアイコン名称),
label: (テキストラベル),
pos: (ラベル位置 t/b),
h: (画像縦幅)
}
<!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>
また、自前のSVGファイルをIconifyJSON形式のアイコンパックに変換したい場合は下記を参考にしてください。
公式ドキュメント - アイコンパック登録、公式ドキュメント - アイコン形状指定や
v11.1.0のfeat: Support Iconify Icons Pull Request #5793がありますので、詳細を追いかけたい方は参考にしてください。
AWS画像URL・アイコン名称一覧
IcônesのアイコンパックやIconify APIの中で、AWSに関連するアイコン名称や画像URLの一覧を記載します。
画像URL指定やアイコンパック指定でAWS構成図を書く際にご利用ください。
おわりに
本記事では、Mermaidのflowchartで使用できるノード形状変更や画像、アイコンを指定の方法について紹介しました。
特にシステム構成やアーキテクチャの可視化を目的とした内容を紹介しましたが、v11.1.0以降ではArchitecture Diagrams（β版）が利用可能となっています。今後、この機能が実用段階まで拡充されれば、flowchartからArchitecture Diagramsへの移行を検討するのも良いかもしれません。
詳細は公式ドキュメントをご覧ください。