前言

今天在B站给我推荐了一个绘制流程图的视频，其中提到了开源项目terrastruct，本来想尝试来着，结果评论区居然一直在推荐使用mermaid与xmind（哭笑）。我记得Typora是支持mermaid的，只是我一直没有绘图需求来着，看评论区说语法简单，想着以后写文章如果用到，那就可以直接使用mermaid绘制一些图像，省掉了上传图像的麻烦，于是就有了学习mermaid绘图的想法。

看了下官方文档，感觉自己常用到的基本就只有三种图：流程图、饼图、时间轴。

官方文档:Flowcharts Syntax | Mermaid

FlowChart（流程图）

关键字：flowchart

图的方向

  • TB - top to buttom
  • TD - top-down
  • BT - buttom to top
  • RL - right to left
  • LR - left to right

例子1 TB：

1
2
flowchart TB
    a --> b & c --> d

例子2 LR：

1
2
flowchart LR
    a --> b & c --> d

图的样式

  • round edges - ()
  • shaped node(胶囊) - ([])
  • subroutine shape - [[]]
  • cyclinderical shape(圆柱) - [()]
  • cicle - (())
  • asymmetric shape(旗帜) - >]
  • rhombus(菱形) - {}
  • hexagon(六边形) - {{}}
  • parallelogram(平行四边形) - [//] [\\]
  • traoezoid(梯形) - [/\] [\/]
  • double circle - ((()))

例子：

1
2
flowchart TB
    A([one]) --> B{{two}} & c[(three)] --> d[/hello/]

连线样式

  • arrow head - -->
  • open link - ---
  • text on links - --This is a text!-- ---|This is the text|
  • dotted links - -.->
  • thick link - ==>
  • invisible link - ~~~
  • new arrow types - --o --x
  • multi directional arrows(双向箭头) - o--o <--> x--x
  • 延长方式 - ---->

例子：

1
2
3
4
5
flowchart TB
    a[start] --> b{Is it?}
    b -->|Yes| c[OK]
    c --> d[Rethink] --> b
    b ---->|No| e[End]

特殊符号显示

用引号包含住内容，一般可以表示括号内容，如果有更加复杂的需求，可以使用:# ;

例子：

1
2
flowchart LR
    a["This is a text(#3556;)"] --> b["A dec char:#9829;"]

多图（Subgraphs）

语法

1
2
3
subgraph title
    graph definition
end

例子：

1
2
3
4
5
6
7
8
9
10
11
flowchart TB
    subgraph one
    a1 --> a2
    end
    subgraph two 
    b1 --> b2
    end
    subgraph three
    c1 --> c2
    end
    c1 --> a2

多图的情况下可以使用图到图的连接,也可以实现图外连接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    q["你干嘛"] --> one
    one --> two & e["哎呦"]
    three --> two
    two --> c2

也可以用direction来规定子图的方向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

互动

可以将单击事件绑定到节点，单击可能导致 javascript 回调或将在新的浏览器选项卡中打开的链接。其实就是实现类似按钮的功能，其中回调功能不做概述。

语法：

1
click 对象 “网址” “注释”

例子：

1
2
3
4
5
6
flowchart LR
    A-->B
    B-->C
    C-->D
    click A callback "Tooltip for a callback"
    click B "https://www.gcnanmu3125.xyz" "我的博客地址"

对fontawesome的基本支持

可以从字体添加图标。这些图标可通过语法 fa:icon类名访问。

1
2
3
4
5
flowchart TD
    B["fab:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)

Pie（饼图）

关键字:pie

属性：

  • title
  • 元素
  • 元素值（如果不是比例，会根据数量直接生成比例）

简单的例子：

1
2
3
4
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

如果想显示数据，可以通过showdata关键字在图例显示具体值

1
2
3
4
5
6
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  6

Timeline（时间轴）

关键字: timeline

基本写法为：

1
2
3
timeline 
    title XXX
    {time period} : {event}

简单演示：

发现Typora只支持到mermaid 9.1.2，所以无法绘制时间轴，因此不展示后续。

1
2
3
4
5
6
7
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

动手实践

流程图：https://blog.csdn.net/cc920095705/article/details/113769741

1
2
3
4
flowchart TD
    a[Start] --- b[Your Operation]
    b --- c{Yes or No?} ---|Yes| d([End])
    a ---|No| c

饼图

数据来源：国家统计局：2022年居民收入和消费支出情况-新华网 (xinhuanet.com)

1
2
3
4
5
6
7
8
9
10
pie showdata
    title 2022年居民人均消费基础及构成(单位：元)
    "其他用品及服务" : 595
    "食品烟酒" : 7481
    "衣着" : 1365
    "居住" : 5882
    "生活用品及服务" : 1432
    "交通通信" : 3195
    "教育文化娱乐" : 2469
    "医疗保健" : 2120

学习下来感觉使用起来还是很方便的，语法也非常简单，适合简单作图与思路分析的场合，但是大多数软件及网站无法及时跟进Mermaid的更新速度，不像LaTex公式一样随处可用，这一点也制约着它的发展。