概述

  • 什么是Mermaid？

  • 怎么使用Mermaid？

    • 使用特定的Mermaid渲染器；
    • **使用集成了Mermaid渲染功能的Markdown编辑器，如Typora。**使用时，需要将代码块的语言选择为Mermaid。

    Typora是宇宙第一笔记软件，不接受反驳

  • Mermaid能绘制哪些图？

    • 饼状图：使用pie关键字，具体用法后文将详细介绍
    • 流程图：使用graph关键字，具体用法后文将详细介绍
    • 序列图：使用sequenceDiagram关键字
    • 甘特图：使用gantt关键字
    • 类图：使用classDiagram关键字
    • 状态图：使用stateDiagram关键字
    • 用户旅程图：使用journey关键字

  • 实例：朱元璋家谱简图，圆圈代表皇帝

graph LR
emperor((朱八八))-.子.->father(朱五四)-.子.->朱四九-.子.->朱百六
朱雄英–长子–>朱标–长子–>emperor
emperor2((朱允炆))–次子–>朱标
朱樉–次子–>emperor
朱棡–三子–>emperor
emperor3((朱棣))–四子–>emperor
emperor4((朱高炽))–长子–>emperor3

以上是概述，下面详细介绍饼状图和流程图的语法。其他图的语法可访问上文给出的项目地址，自行学习。（记得挂梯子）

饼状图

  • 在线渲染器：Online FlowChart & Diagrams Editor（需要梯子）

  • 语法

    • 从pie关键字开始图表
    • 然后使用title关键字及其在字符串中的值，为饼图赋予标题。（这是可选的）
    • 数据部分
      • 在" "内写上分区名。
      • 分区名后使用:作为分隔符
      • 分隔符后写上数值，最多支持2位小数——数据会以百分比的形式展示

  • 实例

pie
title 为什么总是宅在家里？
“喜欢宅” : 15
“天气太热或太冷” : 20
“穷” : 500

流程图

实例

graph LR
A[Start] –> B{Is it?};
B – Yes –> C[OK];
C –> D[Rethink];
D –> B;
B – No —-> E[End];

方向

用于开头，声明流程图的方向。

  • graph或graph TB或graph TD：从上往下
  • graph BT：从下往上
  • graph LR：从左往右
  • graph RL：从右往左

结点

  • 无名字的结点：直接写内容，此时结点边框为方形；节点内容不能有空格
  • 有名字的结点：节点名后书写内容，内容左右有特定符号，结点边框由符号决定；节点内容可以有空格

下面的实例中，没有为graph指定方向，因此默认是从上往下的。但是由于各个结点之前没有箭头，所以他们都处于同一排。

graph
默认方形
id1[方形]
id2(圆边矩形)
id3([体育场形])
id4[[子程序形]]
id5[(圆柱形)]
id6((圆形))

graph
id1{菱形}
id2{{六角形}}
id3[/平行四边形/]
id4[\反向平行四边形\]
id5[/梯形\]
id6[\反向梯形/]

连线样式

  • 实线箭头：分为无文本箭头和有文本箭头，有文本箭头有2种书写格式

graph LR
a–>b–文本1–>c–>|文本2|d

  • 粗实线箭头：分为无文本箭头和有文本箭头

graph LR
a==>b==文本==>c

  • 虚线箭头：分为无文本箭头和有文本箭头

graph LR
a-.->b-.文本.->c

  • 无箭头线：即以上三种连线去掉箭头后的形式

graph LR
a—b
b–文本1—c
c—|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h

  • 其他连线：需要将graph关键字改为flowchart，除了新增加的连线形式外，上面三种线的渲染效果也会不同

flowchart LR
A o–o B
B <–> C
C x–x D 

旧连线 --文本--> 也会不同
  • 延长连线：增加相应字符即可，如下图中的B到E，连线中增加了一个-。字符可多次添加。

graph LR
A[Start] –> B{Is it?};
B –>|Yes| C[OK];
C –> D[Rethink];
D –> B;
B —>|No| E[End];

连线形式

  • 直链

graph LR
A – text –> B – text2 –> C

  • 多重链：可以使用&字符，或单个描述

graph
a –> b & c–> d

A & B–> C & D 

X --> M  
X --> N  
Y --> M  
Y --> N

其他

  • 子图：需要将graph关键字改为flowchart，在代码段的开始加入subgraph，尾部加入end

flowchart TB
c1–>a2
subgraph one
a1–>a2
end
subgraph two
b1–>b2
end
subgraph three
c1–>c2
end
one –> two
three –> two
two –> c2

  • 注释：在行首加入%%即可。

graph LR
%%这是一条注释，在渲染图中不可见
A[Hard edge] –>|Link text| B(Round edge)
B –> C{Decision}
C –>|One| D[Result one]
C –>|Two| E[Result two]