はじめに
とあるプロジェクトで情報共有の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(((二重円)))