Mermaid 转载：语法记录

mizuhokaga

已于 2023-07-16 23:30:04 修改

阅读量279

点赞数

分类专栏：总结文章标签： mermaid

于 2022-10-10 14:27:49 首次发布

原文链接：https://www.cnblogs.com/hellohhy/p/13960692.html

版权

总结专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用Mermaid语法创建流程图和其他图表。通过简单的文本描述即可生成复杂的视觉化内容，包括不同类型的节点、连线及子图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Mermaid

Mermaid 可以使用文本和代码的方式来构建图表和可视化效果，在markdown中常用于生成流程图等图表。语法小册：https://mermaid-js.github.io/mermaid/
官网：https://mermaid.js.org

demo效果：

demo配套代码:

graph LR;
    A--111-->B;
    A--->|s1|C;
    B-->D;
    C-->D;

Graph

关键字graph表示一个流程图的开始，同时需要指定该图的方向。例如
```
graph LR
A --- B
```
方向

TB（top bottom）: 从上到下
BT（bottom top）: 从下到上
RL（right left）: 从右到左
LR（left right）: 从左到右
TD 与 TB 一样表示从上到下
节点类型

默认节点 node
文本节点 B[node]
圆角节点 C(node)
圆形节点 D((node))
非对称节点 E>node]

菱形节点 F{node}
```
graph TB
    A
    B[bname]
    C(cname)
    D((dname))
    E>ename]
    F{fname}
```
连线：连线有多种选择并且可以在连接线中加入标签

箭头连接 A1 --> B1
开放连接 A2 --- B2
标签连接 A3 --text--- B3 或者 A3 ---|text|B3
箭头标签连接 A4 --text--> B4 或者 A4 -->|text| B4
虚线开放连接 A5 .- B5 或者 A5 -.- B5 或者 A5 ..- B5
虚线箭头连接 A6 .-> B6 或者 A6 -.-> B6 或者 A6 ..-> B6
标签虚线连接 A7 -.text.- B7
标签虚线箭头连接 A8 -.text.-> B8
粗线开放连接 A9 === B9
粗线箭头连接 A10 ==> B10
标签粗线开放连接 A11 ==text=== B11
标签粗线箭头连接 A12 ==text==> B12
同时对于线的长短也是可以调整的，只需要多加几个-就行了，但是不能再少了。
```
graph TB
    A1 --> B1
    A2 --- B2
    A3 --text--- B3
    %% A3 ---|text| B3
    A4 --text--> B4
    %% A4 -->|text| B4
    A5 .- B5
    %% A5 -.- B5
    %% A5 ..- B5
    A6 .-> B6
    %% A6 -.-> B6
    %% A6 ..-> B6
    A7 -.text.- B7
    A8 -.text.-> B8
    A9 === B9
    A10 ==> B10
    A11 ==text=== B11
    A12 ==text==> B12
    A13 ---> B13	
```

子图

使用subgraph建子图，必须以end为结尾。
```
graph TB
    subgraph one
        A1 --> B1
    end
    subgraph two
        A2 --> B2
    end
    subgraph three
        A3 --> B3
    end
```