mermaid.js:フローチャート
code:mermaid と書いて、次の行に flowchart <フローチャートの流れ> の形式で書く
横方向がデフォルト
四角の部分がノード(node)、矢印部分がエッジ(edge)
左から右に流すなら flowchart LR
LRはLeft Right
memo flowchart LR
id1[text1]-->|edge1|id2[text2]
並列に書く
&でつなげる
memoflowchart LR
a --> b & c --> d
縦に書く
flowchart TD
TDはTop Bottom
memoflowchart TD
id1[text1]-->|edge1|id2[text2]
グループ(サブグラフ)で分ける
memoflowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
mermaidflowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
改行やダブルクォート " を入れる
ノードに書く場合:
改行はHTMLの <br> を使う
["<br>"]
ダブルクォートを書きたい場合、HTMLの特殊文字 " を使う
["""]
memoflowchart LR
leanString["Lean String<br>"let a := 2""] -->|Parsing| leanSyntaxObject["Lean Syntax Object<br>(Concrete Syntax Tree)"]
mermaidflowchart LR
leanString["Lean String<br>"let a := 2""] -->|Parsing| leanSyntaxObject["Lean Syntax Object<br>(Concrete Syntax Tree)"]
参考