Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。

1. mermaid 定义

2. 流程图

语法格式如下: graph LR; # 其中LR指的是方向 A --> B # 不同的箭头表示

a. 方向和箭头含义

b. 节点含义

默认方形
    id1[方形]
    id2(圆边矩形)
    id3([体育场形])
    id4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))
	id1{
          
   菱形}
	id2{
          
   {
          
   六角形}}
	id3[/平行四边形/]
	id4[反向平行四边形]
	id5[/梯形]
	id6[反向梯形/]

c. 示例

graph LR;
	A>"Ubuntu<br>(Linux)"] -.soft.-> C{
          
   TV}
	B["MAC"] ==> D((ARM64))
	D--> C
	A --> B

graph LR
	a---b
	b--文本1!---c
	c---|文本2|d
	d===e
	e==文本3===f
	f-.-g
	g-.文本.-h

延长连线： 增加相应字符即可，如下图中的B到E，连线中增加了一个 - 。字符可多次添加。

graph LR
    A[Start] --> B{
          
   Is it?};
    B -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B --->|No| E[End];

多重链

graph LR
   a --> b & c--> d
   
   A & B--> C & D
   
    X --> M
    X --> N
    Y --> M
    Y --> N

注释 %%这是一条注释，在渲染图中不可见 子图

%%这是一条注释，在渲染图中不可见
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