概述
怎么使用Mermaid?
- 使用特定的Mermaid渲染器;
- 使用集成了Mermaid渲染功能的Markdown编辑器,如Typora 。使用时,需要将代码块的语言选择为Mermaid。
Typora是宇宙第一笔记软件,不接受反驳
Mermaid能绘制哪些图?
- 饼状图:使用
pie
关键字,具体用法后文将详细介绍
- 流程图:使用
graph
关键字,具体用法后文将详细介绍
- 序列图:使用
sequenceDiagram
关键字
- 甘特图:使用
gantt
关键字
- 类图:使用
classDiagram
关键字
- 状态图:使用
stateDiagram
关键字
- 用户旅程图:使用
journey
关键字
实例:朱元璋家谱简图,圆圈代表皇帝
1 2 3 4 5 6 7 8 9 10
| graph LR emperor((朱八八))-.子.->father(朱五四)-.子.->朱四九-.子.->朱百六
朱雄英--长子-->朱标--长子-->emperor emperor2((朱允炆))--次子-->朱标 朱樉--次子-->emperor 朱棡--三子-->emperor emperor3((朱棣))--四子-->emperor emperor4((朱高炽))--长子-->emperor3
|
以上是概述,下面详细介绍饼状图和流程图的语法。其他图的语法可访问上文给出的项目地址,自行学习。(记得挂梯子)
饼状图
1 2 3 4 5
| pie title 为什么总是宅在家里? "喜欢宅" : 15 "天气太热或太冷" : 20 "穷" : 500
|
流程图
实例
1 2 3 4 5 6
| 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指定方向,因此默认是从上往下的。但是由于各个结点之前没有箭头,所以他们都处于同一排。
1 2 3 4 5 6 7 8
| graph 默认方形 id1[方形] id2(圆边矩形) id3([体育场形]) id4[[子程序形]] id5[(圆柱形)] id6((圆形))
|
1 2 3 4 5 6 7
| graph id1{菱形} id2{{六角形}} id3[/平行四边形/] id4[\反向平行四边形\] id5[/梯形\] id6[\反向梯形/]
|
连线样式
- 实线箭头:分为无文本箭头和有文本箭头,有文本箭头有2种书写格式
1 2
| graph LR a-->b--文本1-->c-->|文本2|d
|
1 2
| graph LR a<span style="font-weight: bold;" class="mark">>b</span>文本<span style="font-weight: bold;" class="mark">>c
|
1 2 3 4 5 6 7 8
| graph LR a---b b--文本1---c c---|文本2|d d</span>=e e<span style="font-weight: bold;" class="mark">文本3</span>=f f-.-g g-.文本.-h
|
- 其他连线:需要将
graph
关键字改为flowchart
,除了新增加的连线形式外,上面三种线的渲染效果也会不同
1 2 3 4 5 6
| flowchart LR A o--o B B <--> C C x--x D
旧连线 --文本--> 也会不同
|
- 延长连线:增加相应字符即可,如下图中的B到E,连线中增加了一个
-
。字符可多次添加。
1 2 3 4 5 6
| graph LR A[Start] --> B{Is it?}; B -->|Yes| C[OK]; C --> D[Rethink]; D --> B; B --->|No| E[End];
|
连线形式
1 2
| graph LR D[Rethink1<br/>Rethink2] -- text --> B -- text2 --> C
|
1 2 3 4 5 6 7 8 9
| graph a --> b & c--> d
A & B--> C & D
X --> M X --> N Y --> M Y --> N
|
其他
- 子图:需要将
graph
关键字改为flowchart
,在代码段的开始加入subgraph
,尾部加入end
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| 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
|
1 2 3 4 5 6
| graph LR %%这是一条注释,在渲染图中不可见 A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]
|