基础语法

图及方向

  1. # graph 代指流程图,固定写法
  2. # TD等同于 TB（Top to Bottom）, 就是说自上而下的流程图
  3. graph TD
  4.     Start --> Stop

Flowchart(流程图) - 图1 支持的方向有这么些:
**

  • TB - top bottom(自上而下)
  • BT - bottom top(自下而上)
  • RL - right left(自右向左)
  • LR - left right(自左向右)
  • TD - same as TB(自上而下)

节点

默认节点

不加修饰的节点就是默认节点，展示风格为方框

  1. graph LR
  2.     id

Flowchart(流程图) - 图2

文本节点

文本节点的展示就是加上一个修饰符 []

  1. graph LR
  2.     id[我是一个文本节点]

Flowchart(流程图) - 图3

圆角节点

圆角节点的展示就是加上一个修饰符()

  1. graph LR
  2.     id(我是一个圆角节点)

Flowchart(流程图) - 图4

圆形节点

圆角节点的展示就是加上一个修饰符(())

  1. graph TD
  2.     test((我是一个圆形节点))

Flowchart(流程图) - 图5

书签形状节点

官方的叫法(A node in an asymetric shape-> 轴形节点？测量形节点）,还备注了该形式在未来可能会变化。

该节点的展示就是加上一个修饰符>]

  1. graph TD
  2.     test>我是书签形的节点]

Flowchart(流程图) - 图6

菱形节点

菱形节点的展示就是加上一个修饰符{}

  1. graph TD
  2.     test{我是一个菱形节点}

Flowchart(流程图) - 图7

六边形节点(非等宽)

六边形节点的展示就是加上一个修饰符{{}}

  1. graph TD
  2.     test{{我是一个六边形节点}}

Flowchart(流程图) - 图8

平行四边形节点

平行四边形节点的展示就是加上一个修饰符[//]

  1. graph TD
  2.     test[/我是一个平行四边形节点/]

Flowchart(流程图) - 图9

反向平行四边形节点

反向平行四边形节点的展示就是加上一个修饰符[\]

  1. graph TD
  2.     test[\我是一个反向平行四边形节点\]

Flowchart(流程图) - 图10

梯形节点

梯形节点的展示就是加上一个修饰符[/]

  1. graph TD
  2.     test[/我是一个梯形节点\]

Flowchart(流程图) - 图11

反向梯形节点

反向梯形节点的展示就是加上一个修饰符[\/]

  1. graph TD
  2.     test[\反向梯形节点/]

Flowchart(流程图) - 图12

节点链接

带箭头的单向链接

两节点之间增加修饰符—>

  1. graph LR
  2.     A --> B

Flowchart(流程图) - 图13

不带箭头连接线

两节点之间增加修饰符—-

  1. graph LR
  2.     A --- B

Flowchart(流程图) - 图14

带文本信息的连接线

两节点之间增加修饰符—text—, 亦或者—- |text|

  1. # 姿势1
  2. graph LR
  3.     A -- 我是线条文本 --- B
  5. # 姿势2
  6. graph LR
  7.     A ---|我是线条文本| B

Flowchart(流程图) - 图15

带箭头和文本单向链接

两节点之间增加修饰符—text—>, 亦或者—>|text|

  1. # 姿势1
  2. graph LR
  3.     A -- 我是线条文本 --> B
  5. # 姿势2
  6. graph LR
  7.     A -->|我是线条文本| B

Flowchart(流程图) - 图16

带箭头的虚线单向链接

两节点之间增加修饰符-.->

  1. graph LR
  2.     A -.-> B

Flowchart(流程图) - 图17

带箭头和文本的虚线单向链接

两节点之间增加修饰符-.->

  1. graph LR
  2.     A -. 我是文本内容 .-> B

Flowchart(流程图) - 图18

带箭头加粗单向链接

两节点之间增加修饰符==>

  1. graph LR
  2.     A ==> B

Flowchart(流程图) - 图19

连续线

这个就是综合运用了

  1. graph LR
  2.     A ==> B 
  3.   B --我是测试文本--> C
  4.   C -.我也是测试文本.-> A
  5.   A ==唉==> D((惊喜不))

Flowchart(流程图) - 图20

文本传入特殊字符

传入一些默认会被转义的，可以用双引号括起来，包括 unicode

  1. graph TD
  2.     A ==> B[/"🎹emoji 也支持"\] 
  3.   B --"(呵呵哒)"--> C
  4.   C -."给你一颗心:#9829;".-> A
  5.   A ==唉==> D((惊喜不))

Flowchart(流程图) - 图21

子图(组)

简单点理解就是拆成小组合,可以画出更复杂的图（图与图之间的联系）

  1. # 子组写法, 这样一个闭合就是一个子组
  2. subgraph 名字
  3.     流图 do sth ...
  4. end
  7. graph TD
  8.     subgraph 组合1
  9.         A ==> B[/"🎹emoji 也支持"\] 
  10.   end
  11.   subgraph 组合2
  12.   B --"(呵呵哒)"--> C
  13.   C -."给你一颗心:#9829;".-> A
  14.   end
  15.   subgraph 组合3
  16.   A ==唉==> D((惊喜不))
  17.   D --你好啊--> B
  18.   end

Flowchart(流程图) - 图22

注释

mermaid里面的注释只支持单行注释, 采用修饰符%%开头

  1. graph BT
  2. %% 这是一条注释,我在页面上不渲染
  3.    A -- "听说你很吊？" --> B

Flowchart(流程图) - 图23

节点行内样式

节点支持样式装饰，支持调整的属性是 svg 的填充属性

  1. graph BT
  2. %% 这是一条注释,我在页面上不渲染
  3.    A -- "听说你很吊？" --> B
  4.    style A fill:#F00,stroke:#CCC,color:#FFF
  5.    style B fill:#C3F,stroke-width:2px,stroke-dasharray: 5, 5

Flowchart(流程图) - 图24 当然也支持 class(类)来装饰，不过这个就要耦合外部文件了，不喜欢

节点图标

mermaid 节点支持调用 fontawesome 的图标库，修饰符["fa:fa-twitter text"],

在语雀上展示不出来，没有这个字库。

  1. graph  TD
  2.     A-->B[\"fa:fa-ban 谷歌"/]
  3.   B-->C(("fa:fa-user 用户"))

Flowchart(流程图) - 图25

总结

mermaid 是 js 实现的，所以也支持事件交互，不过用的场景不多。

这里就不扯了，我不用。