markdown-Mermaid语法整理

最新推荐文章于 2025-10-15 10:59:32 发布

原创最新推荐文章于 2025-10-15 10:59:32 发布 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#markdown #mermaid

Mermaid是一种用于创建图表的简单标记语言，常用于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;
节点背景、边框颜色、粗细