mermaid.js
圖表類型
flowchart [directions]
graph [directions]
[directions]
方向
TB
top to bottom
TD
top-down / same as top to bottom
BT
bottom to top
RL
right to left
LR
left to right
節點類型
node_name(text)
round edges
node_name([text])
stadium-shaped
node_name[[text]]
subroutine
node_name[(text)]
cylindrical shape
node_name((text))
circle
node_name>text]
asymmetric shape
node_name{text}
rhombus
node_name{{text}}
hexagon
node_name[/text/]
parallelogram
node_name[\text\]
parallelogram alt
node_name[/text\]
trapezoid
node_name[\text/]
trapezoid alt
node_name(((text)))
double circle
code:mermaid
graph TD
節點
節點2(圓弧形節點)
節點3((圓形節點))
節點4>不對稱形節點]
節點5{菱形節點}
連線類型
---
normal
-->
normal with arrow
===
thick
==>
thick with arrow
-.-
dotted
-.->
dotted with arrow
code:mermaid
graph TD
鈴木-->田中
佐藤---高橋
渡辺---|仲良し|伊藤
中村-->|好き|山本
小林-.->加藤
佐々木-.気になる.->山田
subgraph
code:mermaid
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2