0%

示例Mermaid画流程图语法

在markdown下使用mermaid绘制流程图flowchart,通过javascript实现图表的生成,是一种简便实用的方法。

基本语法分类

  • 方向申明
  • 节点与形状
  • 连接线
  • 特殊语法
  • 子图语法
  • 基础fontawesome支持语法

方向申明

graph 方向代码

方向代码有:

  • TB: top-bottom 从上到下
  • BT: bottom-top从下到上
  • RL: right-left从右到左
  • LR: left-right从左到右
  • TD: same as TB从上到下

例如:

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

          A-->B

节点与形状

分为:

  • 默认节点:仅有id
  • 文本节点:又称矩形节点,用id[文本内容]
  • 圆角节点:用id(文本内容)
  • 圆节点:用id((文本内容))
  • 右向旗帜节点:用id>文本内容]
  • 菱形节点:用id{文本内容}

例如:

1
2
3
4
5
6
7
graph TB
​ id1
​ id2[这是矩形节点]
​ id3(这是圆角节点)
​ id4((这是圆节点))
​ id5>这是右向旗帜节点]
​ id6{这是菱形节点}

    graph TB
        id1
        id2[这是矩形节点]
        id3(这是圆角节点)
        id4((这是圆节点))
        id5>这是右向旗帜节点]
        id6{这是菱形节点}

连接线

节点间的连接线有多种形状,并可以在连接线中加入标签:

箭头形连接

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

无箭头连接

1
2
graph LR
​ A---B
graph LR
    A---B

带标签连接

1
2
graph LR
​ A--这是标签---B

需注意,标签前面是两短横,后面是三短横。

graph LR
    A--这是标签---B

带箭头标签连接

1
2
graph LR
​ A--这是标签-->B

需注意,标签前面是两短横,后面是两短横与一”>”号。

graph LR
    A--这是标签-->B

虚线连接

虚线带箭头连接
1
2
graph LR
​ A-.->B
graph LR
    A-.->B
虚线无箭头连接
1
2
graph LR
​ A-.-B
graph LR
    A-.-B
虚线带标签连接
1
2
graph LR
​ A-.这是标签.-B
graph LR
    A-.这是标签.-B
虚线带标签带箭头连接
1
2
graph LR
​ A-.这是标签.->B
graph LR
    A-.这是标签.->B

粗实线连接

语法与上类似,只是将其中“-”改为“=”即可。示例略。

特殊语法

  • 使用引号可以抑制一些特殊的字符使用,避免歧义。
  • 转义字符可以使用

子图语法(subgraph)

1
2
3
4
5

subgraph title
​ graph definition
end

示例:

1
2
3
4
5
6
7
8
9
10
11
12
graph TB
subgraph 子图1
a1 --> a2[fa:fa-ban forbidden]
end
subgraph 子图2
b1 --> b2[fa:fa-spinner spinner]
end
subgraph 子图3
c1 --> c2["fa:fa-twitter for peace"]
end
c1 --> a2

graph TB
subgraph 子图1
a1 --> a2[fa:fa-ban forbidden]
end
subgraph 子图2
b1 --> b2[fa:fa-spinner spinner]
end
subgraph 子图3
c1 --> c2["fa:fa-twitter for peace"]
end
c1 --> a2

基础fontawesome支持语法

要加入来自fontawesome的图表字体,需要作如上引用。

引用的语法为:fa:#icon class name#

以上内容摘自网络

欢迎关注我的其它发布渠道