目前博客园支持mermaid的graph，subgraph，sequenceDiagram，gantt，classDiagram
mermaid(美人鱼), 是一个类似markdown，用文本语法来描述文档图形的工具。mermaid语法包含在博客园markdown中。
注释为：
%% 注释
插入为：（以下的例如只列举代码）
```mermaid
代码
```
或
<body>
<div class="mermaid">
代码
</div>
</body>
graph(流程图)
关键字graph表示一个流程图的开始，同时需要指定该图的方向。如果内容包含特殊字符，可使用"字符"，或参考这个的markdown转义。
方向
| 代码 | 方向 |
|---|---|
| TB | 从上到下 |
| TD | 从上到下 |
| BT | 从下到上 |
| RL | 从右到左 |
| LR | 从左到右 |
T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
例如：
graph LR;
A-->B;
B-->C;
C-->D;
D-->A;
A-->B;
B-->C;
C-->D;
D-->A;
形状
| 代码 | 形状 |
|---|---|
| 变量 | 默认形状 |
| 变量[内容] | 矩形 |
| 变量(内容) | 圆矩形 |
| 变量((内容)) | 圆形 |
| 变量>内容] | 非对称形 |
| 变量{内容} | 菱形 |
例如：
graph LR
A
B[b]
C(c)
D((d))
E>e]
F{f}
A
B[b]
C(c)
D((d))
E>e]
F{f}
连线
话不多说，上表。注意：中间的符号或多或少都不行
| 代码 | 形状 |
|---|---|
| A-->B | 箭头 |
| A---B | 直连 |
| A--text---B | 注释 |
| A--text-->B | 箭头注释 |
| A-.-B | 虚线直连 |
| A-.->B | 虚线箭头 |
| A-.text.-B | 虚线注释直连 |
| A-.text.->B | 箭头虚线注释 |
| A===B | 加粗直连 |
| A==>B | 加粗箭头 |
| A==text===B | 加粗注释直连 |
| A==text==>B | 加粗注释箭头 |
graph TB
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A6-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
A1-->B1
A2---B2
A3--text---B3
A4--text-->B4
A5-.-B5
A6-.->B6
A7-.text.-B7
A8-.text.->B8
A9===B9
A10==>B10
A11==text===B11
A12==text==>B12
样式
将特定样式例如较粗的边框或不同的背景颜色
graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
大例如
graph LR
A[x]
B["if(x<0)"]
C["x=-x"]
D[return x]
A-->B-->C-->D
C-->D
A[x]
B["if(x<0)"]
C["x=-x"]
D[return x]
A-->B
B-->C
B-->D
C-->D
subgraph(子图)
格式
注意：外层可以使用里层中的节点，可以认为是全局变量
graph LR
subgraph 名称
代码
end
subgraph 名称
代码
end
大例如：
graph LRsubgraph g1
a1-->b1
end
subgraph g2
a2-->b2
end
subgraph g3
a3-->b3
end
b1-->a2
b2-->a3
sequenceDiagram(序列图)
功能
- participant
参与者，相当先定义模块，可通过设定参与者(participant)的顺序控制展示顺序。
例如：
partcipant A
partcipant B
participant A
participant B
partcipant B
partcipant A
participant B
participant A
也可以使用别名：
sequenceDiagram
participant A as A dog
participant B as Bob
A->B:Hello
participant A as A dog
participant B as Bob
A->B:Hello
- note
注释，格式如下
note right of或left of 变量:Text
note over 变量左,变量右 :Text
- 循环
loop 题目
代码
end
- 选择
alt 题目
代码
else
代码
end
在没有else的情况下使用 opt(option,选择)
opt 题目
代码
end
例如：
sequenceDiagram
A->>B: Hello B, how are you?
alt is sick
B->>A:not so good :(
else is well
B->>A:good
end
opt another
B->>A:Thanks for asking
end
A->>B: Hello B, how are you?
alt is sick
B->>A:not so good