mermaid.js:フローチャート - pogi-log

mermaid.js:フローチャート

code:mermaidと書いて、次の行にflowchart <フローチャートの流れ>の形式で書く

横方向がデフォルト

四角の部分がノード(node)、矢印部分がエッジ(edge)

左から右に流すならflowchart LR

LRはLeft Right

code:memo

flowchart LR

id1text1-->|edge1|id2text2

code:memo.mermaid

flowchart LR

id1text1-->|edge1|id2text2

並列に書く

&でつなげる

code:memo

flowchart LR

a --> b & c --> d

code:memo.mermaid

flowchart LR

a --> b & c --> d

縦に書く

flowchart TD

TDはTop Bottom

code:memo

flowchart TD

id1text1-->|edge1|id2text2

code:memo.mermaid

flowchart TD

id1text1-->|edge1|id2text2

グループ(サブグラフ)で分ける

code:memo

flowchart TB

c1-->a2

subgraph one

a1-->a2

end

subgraph two

b1-->b2

end

subgraph three

c1-->c2

end

code:mermaid

flowchart TB

c1-->a2

subgraph one

a1-->a2

end

subgraph two

b1-->b2

end

subgraph three

c1-->c2

end

改行やダブルクォート"を入れる

ノードに書く場合:

改行はHTMLの<br>を使う

["<br>"]

ダブルクォートを書きたい場合、HTMLの特殊文字"を使う

["""]

code:memo

flowchart LR

leanString"Lean String<br>"let a := 2"" -->|Parsing| leanSyntaxObject"Lean Syntax Object<br>(Concrete Syntax Tree)"

code:mermaid

flowchart LR

code:mermaid

flowchart LR

leanString"Lean String<br>"let a := 2"" -->|Parsing| leanSyntaxObject"Lean Syntax Object<br>(Concrete Syntax Tree)"

参考

Flowcharts Syntax | Mermaid