markdown-Mermaid语法整理

Mermaid语法

语法:

```mermaid 内容 ```

例子:

graph TD:

TD表示画一张自上而下的图(Top-Down)， 自左而右为graph LR

格式：

节点名[显示内容]–关联词->节点名[显示内容]，->表示箭头方向已经被定义的节点可以直接使用，可以省略[显示内容]

格式：

class节点名(中间用英文逗号隔开)internal-link

方向：

TB/TD - top bottom
BT - bottom top
eRL - right left
LR - left right

节点：

□-方形文本框
1-菱形文本框
() -边角圆滑文本框
((""))-圆形文本框
1.id[带文字节点]
2.id((圆形节点))
3.id(菱形节点
4.id(圆角节点)
5.id>不对称节点]

连接线：

—：实线
-.-：虚线
===：粗线

1.实线，有箭头，文字：A–文字–>B
2.虚线，有箭头，文字：A.文字.->B
3.大箭头，文字：A文字>B
4.实线，有箭头，无文字：A–>B
5.大箭头，无文字：A==>B
6.实线，无箭头，文字：A–文字—B
7.实线，无箭头，无文字：A–B
8.虚线，箭头，无文字：A–>B

特殊语法：
引号：用来转义；

子图：

subgraph 子图标题
a1 --> a2
end

样式：

linkStyle
linkStyle O stroke:#0ff,stroke-width:2px; 蓝色
黑色：#000
红色：#F00
绿色：#OFO
蓝色：#OOF
黄色：#FFO
青色：#OFF
紫色：#FOF
灰色：#888
白色：#FFF
默认样式集：
classDef default fill:#ff0,stroke:#888,stroke-width:2px;
节点背景、边框颜色、粗细

• Mermaid能绘制哪些图？
• 饼状图：使用pie关键字，具体用法后文将详细介绍
• 流程图：使用graph关键字，具体用法后文将详细介绍
• 序列图：使用sequenceDiagram关键字
• 甘特图：使用gantt关键字
• 类图：使用classDiagram关键字
• 状态图：使用stateDiagram关键字
• 用户旅程图：使用journey关键字

例子:

• 注释：在行首加入%%即可。

参考:
https://mermaid-js.github.io/mermaid/#/
https://zhuanlan.zhihu.com/p/355997933
https://www.cnblogs.com/luomit/p/13874158.html