はじめに
とあるプロジェクトで情報共有の1つとして，GithubでMermaidを利用する機会がありました．意外とMermaidを（日本語で）まとめている記事が少なかったので，この機会にまとめたいと思います．
長くなり，編集時にエラーが発生するようになったので，本記事ではフローチャートのみを取り扱います．（もしかしてMermaidを沢山載せているのが原因かも？）
最新の情報は公式ドキュメントを参照して下さい．
ちなみに，こういう図が扱えます．（例はテキトーです．）
ノードの作成
node
flowchart
id1[text]
id2["Unicode ★ text"]
id3["`Markdown
text`"]
ノード間のリンク
矢印
arrow
flowchart
id1[node1]
id2[node2]
id1 --> id2
丸矢印
circle
flowchart
id1[node1]
id2[node2]
id1 --o id2
バツ矢印
cross
flowchart
id1[node1]
id2[node2]
id1 --x id2
双方向矢印
bidirectional
flowchart
id1[node1]
id2[node2]
id1 <--> id2
線
line
flowchart
id1[node1]
id2[node2]
id1 --- id2
点線
dot
flowchart
id1[node1]
id2[node2]
id1 -.- id2
太線
thick
flowchart
id1[node1]
id2[node2]
id1 === id2
不可視のリンク
invisible
flowchart
id1[node1]
id2[node2]
id3[node3]
id1 ~~~ id2
id1 --> id3
ノードの位置関係を揃えたいけど，線は引きたくないというときに利用する．
テキストを挿入
arrow
flowchart
id1[node1]
id2[node2]
id1-->|text|id2
リンクの連鎖
series
flowchart
id1[node1]
id2[node2]
id3[node3]
id1 --> id2 --> id3
parallel
flowchart
id1[node1]
id2[node2]
id3[node3]
id1 --> id2 & id3
ノードの複数のリンクを簡潔に記述するのに便利．
comparison
flowchart
id1[node1]
id2[node2]
id3[node3]
id4[node4]
id1 --> id3
id1 --> id4
id2 --> id3
id2 --> id4
これを並列で書くと以下の通り．
comparison
flowchart
id1[node1]
id2[node2]
id3[node3]
id4[node4]
id1 & id2 --> id3 & id4
いずれも以下のような出力になります．
グラフの方向
top2bottom
flowchart TB
id1[text1]
id2[text2]
id1 --> id2
bottom2top
flowchart BT
id1[text1]
id2[text2]
id1 --> id2
right2left
flowchart RL
id1[text1]
id2[text2]
id1 --> id2
left2right
flowchart LR
id1[text1]
id2[text2]
id1 --> id2
| タグ | 説明 |
|---|---|
| TB | Top to Bottom（上から下へ） |
| TD | Top Down（上から下へ） |
| BT | Bottom to Top（下から上へ） |
| RL | Right to Left（右から左へ） |
| LR | Left to Right（左から右へ） |
ノードの形状
四角形
box
flowchart
box[四角形]
角丸四角形
round_box
flowchart
round_box(角丸四角形)
スタジアム形
stadium
flowchart
stadium([スタジアム形])
サブルーチン
subroutine
flowchart
subroutine[[サブルーチン]]
円筒形
cylindrical
flowchart
cylindrical[(円筒形)]
円形
circle
flowchart
circle((円形))
非対称形
asymmetric
flowchart
asymmetric>非対称形]
斜方形
rhombus
flowchart
rhombus{斜方形}
六角形
hexagon
flowchart
hexagon{{六角形}}
平行四辺形 & 台形
parallelogram_and_trapezoid
flowchart
parallelogram[/平行四辺形/]
parallelogram_alt[\平行四辺形\]
trapezoid[/台形\]
trapezoid_alt[\台形/]
二重円
double_circle
flowchart
double_circle(((二重円)))
Comments
Let's comment your feelings that are more than good