Typora使用Mermaid绘制各种图

发表于 | 分类于
Typora使用Mermaid绘制各种图

前言

官网

https://mermaid.js.org/

在线编辑器

https://mermaid.live/edit

Mermaid能绘制哪些图？

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

基本格式

1
2
3
```mermaid
pie
```

Pie(饼图)

语法——仅供参考，建议直接看实例

  • 从pie关键字开始图表

  • 然后使用title关键字及其在字符串中的值，为饼图赋予标题。（可选）

  • 数据部分

    • 在" "内写上分区名。
    • 分区名后使用:作为分隔符
    • 分隔符后写上数值，最多支持2位小数——数据会以百分比的形式展示
1
2
3
4
5
pie
    title 为什么总是宅在家里？
    "喜欢宅" : 15
    "天气太热或太冷" : 20
    "穷" : 500

效果

image-20230804114243615

Sequence diagram(时序图)

其中

  • 实线 ->>
  • 虚线-->

示例

1
2
3
4
5
6
7
8
sequenceDiagram
participant 用户A
participant WS
participant 用户B
用户A->>WS: 1. 创建offer并发送 sdp type:offer
WS->>用户B: 2. sdp type:offer
用户B->>WS: 3. sdp type:answer
WS-->>用户A: 4. sdp type:answer

效果

image-20230804114321257

使用别名

1
2
3
4
5
6
7
8
9
sequenceDiagram
participant A as 用户A
participant WS as WS
participant B as 用户B

A->>WS: 1. 创建offer并发送 sdp type:offer
WS->>B: 2. sdp type:offer
B->>WS: 3. sdp type:answer
WS->>A: 4. sdp type:answer

效果

image-20230804114347109

Flowchart(流程图)

方向

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

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

左右布局

1
2
3
4
5
6
graph LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

效果

image-20230804114142258

上下布局

1
2
3
4
5
6
graph TB

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

效果

image-20230804114206739

结点

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

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

1
2
3
4
5
6
7
8
graph
    默认方形
    id1[方形]
    id2(圆边矩形)
    id3([体育场形])
    id4[[子程序形]]
    id5[(圆柱形)]
    id6((圆形))

效果

image-20230602124817074 

1
2
3
4
5
6
7
graph
	id1{菱形}
	id2{{六角形}}
	id3[/平行四边形/]
	id4[\反向平行四边形\]
	id5[/梯形\]
	id6[\反向梯形/]

效果

image-20230602124842275

连线样式

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

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

效果

image-20230804114423853

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

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

效果

image-20230804114442353

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

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

效果

image-20230804114459802

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

1
2
3
4
5
6
7
8
graph LR
a---b
b--文本1!---c
c---|文本2|d
d===e
e==文本3===f
f-.-g
g-.文本.-h

效果

image-20230804114606347

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

1
2
3
4
5
6
flowchart LR
    A o--o B
    B <--> C
    C x--x D
    
    旧连线 --文本--> 也会不同

效果

image-20230804114625460

延长连线：增加相应字符即可，如下图中的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];

效果

image-20230804114651279

连线形式

直链

1
2
graph LR
   A -- text --> B -- text2 --> C

效果

image-20230804114100076

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

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

效果

image-20230804114041718

子图

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

效果

image-20230804114020930

Gantt chart(甘特图)

1
2
3
4
5
6
7
8
gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

效果

image-20230804113953426

StateDiagram(状态图)

语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束。

1
2
3
4
5
6
stateDiagram
    [*] --> s1
    s1 --> s2
    s1 --> s3
    s2 --> [*]
    s3 --> [*]

效果

image-20230804113732297

设置方向

1
2
3
4
5
6
7
stateDiagram
direction LR
BI --> 表
BI --> 业务主题
BI --> 数据集
数据集 --> 数据模型
数据集 --> 指标模型

效果

image-20230804114747779

Class diagram(类图)

语法解释：<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

效果
image-20230804113828726