8.1.20250803 Mermaid流程图语法详解

#mermaid

布局方向

流程图布局方向,由四种基本方向组成,分别是英文单词: top(上), bottom(下),left(左)和 right(右).其中可选值: TB (从上到下),BT (从下到上),LR (从左往右)和 RL (从右往左)四种.

核心: 仅支持上下左右四个垂直方向,是英文单词首字母大写缩写.

+ TB 从上到下: from Top to Bottom
+ BT 从下到上: from **B**ottom to **T**op
+ LR 从左往右: from **L**eft to **R**ight
+ RL 从右往左: from **R**ight to **L**eft

形状

流程图节点形状,默认支持矩形和圆两种基本形状,包括基本形状的简单变体,支持嵌套组合形式,其中 [] 表示矩形,() 表示圆弧,{} 表示尖角(窃以为 <> 更适合)等等.

• 节点形状

  • [矩形]
    • [[暂不支持]]
    • [(圆柱)]
    • [{暂不支持}]
    • [/平行四边形/]
    • [\平行四边形]
    • [/梯形]
    • [\梯形/]
  • (圆角矩形)
    • ((圆形))
    • ([体育场])
    • ({暂不支持})
  • {菱形}
    • {{六边形}}
    • {[暂不支持]}
    • {(暂不支持)}

  • 不对称矩形

• 矩形

graph TD

1[矩形]

• 圆角

graph TD

1(dddd)

• 体育场

一般格式: ([node description]) ,() 小括号嵌套 [] 中括号表示节点是大弧度的圆角矩形形状,也就是体育场形状,node description 是节点的描述文本.

graph TD

1([体育场])

• 圆形

flowchart LR
    id1((这是一个圆圈))

连接线

+ 实线/虚线
    - --
    - -.
+ 有箭头/无箭头
    - >
    - -
+ 有描述/无描述
    - 实线
        + --描述文字
        + |描述文字|
    - 虚线
        + -.描述文字
        + |描述文字|
+ 加粗
    - ==
+ 组合形式
    - -->
    - ---
    - -.->
    - -.-
    - 有描述实线有箭头
        + --描述文字-->
        + -->|描述文字|
    - 有描述实线无箭头
        + --描述文字---
        + ---|描述文字|
    - 有描述虚线有箭头
        + -.描述文字-.->
        + -.->|描述文字|
    - 有描述虚线无箭头
        + -.描述文字-.-
        + -.-|描述文字|
    - ==>
    - ===
    - 有描述加粗实线有箭头(2)
        + ==描述文字==>
        + ==>|描述文字|
    - 有描述加粗实线无箭头(2)
        + ==描述文字===
        + ===|描述文字|

经典案例

案例1：竖向图

源码:

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

效果:

graph TD
  A[圣诞节] -->|赚钱| B(购物)
  B --> C{思考买什么}
  C -->|第1种选择| D[手提电脑]
  C -->|第2种选择| E[手机]
  C -->|第3种选择| F[车子]

案例2：横向图

源码:

graph LR
    A(接口请求) --> B[参数校验]
    B[参数校验] --> C{校验通过?}
    C{校验通过?} -- 通过 --> d[处理业务逻辑]
    C{校验不通过} -- 不通过 --> e[结束]
    d[处理业务逻辑] --> e(结束)

效果

graph LR
    A(接口请求) --> B[参数校验]
    B[参数校验] --> C{校验通过?}
    C{校验通过?} -- 通过 --> d[处理业务逻辑]
    C{校验不通过} -- 不通过 --> e[结束]
    d[处理业务逻辑] --> e(结束)

案例3：时序图

源码:

sequenceDiagram
A-->A: 文本1
loop 循环1
loop 循环2
A->B: 文本3
end
loop 循环3
B -->>A: 文本4
end
end

效果:

sequenceDiagram
A-->A: 文本1
loop 循环1
loop 循环2
A->B: 文本3
end
loop 循环3
B -->>A: 文本4
end
end

参考资料

• 官方案例：Flowcharts - Basic Syntax | Mermaid
• 快速上手Mermaid流程图 · 雪之梦
• 官方的编辑和预览器

ob地址：笔记