csdn - mermaid

https://blog.csdn.net/sandalphon4869/article/details/89341443
https://blog.csdn.net/swinfans/article/details/89393853
https://zhuanlan.zhihu.com/p/614018391
https://blog.csdn.net/qq_42491125/article/details/114005171
https://www.cnblogs.com/leween/p/12945751.html#_label4

方向

TB = TD - top bottom -从上到下
BT - bottom top - 从下到上
LR - left right - 自左向右
RL - right left - 自右向左

graph TB
	A[TB]---TD---B[top bottom]---从上到下

---

graph BT
	A[BT]---B[bottom TOP]---从下到上

---

graph LR
	LR --- B[left right] --- 自左向右

---

节点样式

https://blog.csdn.net/sandalphon4869/article/details/89341443

形状

矩形 [内容]
圆角矩形 (内容)
圆形 ((内容))
菱形 {内容}
旗帜 >内容]

graph LR

id1["[矩形]<br>长方形"] --- Id(("((圆))")) ---C{"{菱形}"} --- E>">旗帜]"]

id2("(圆角)") -->
id3[["[[subroute process]]"]] -->
id4[("[(圆柱形)]")]

id5(["([椭圆])"])  -->
id9{{"{{六边形}}"}} 

id10[/"[/This is the text in the box/]"/]  -->
id11[\"[\This is the text in the box\]"\]  -->
 A[/"[/Christmas\]"\] -->
 B[\"[\Go shopping/]"/]

箭头

子图

流程图

http://flowchart.js.org/

类图

uml图

甘特图