常用的Mermaid图

前言

1. 以下仅为个人常用到的图形的示例代码
   若有需要请查看：Mermaid文档（英文）

2. 以下展示了实现代码及其效果，所有代码需要写在mermaid中，例如：

```mermaid
[此处为具体实现代码]
```

流程图

demo 1

flowchart TD
	S[Start]
	E[End]
	Q{Is it?}
	A[OK]
	R[Rethink]
	
    S --> Q
    Q --> |Yes| A
    A --> R
    R --> Q
    Q ---->|No| E

demo 2

flowchart TB
	b & c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    c1-->c2
    end

自定义复杂形状

线条形状

flowchart TB
	A-.-B5
	A---B1
	A===B3
	A----B4

参考下表所示规律，长度设置上不封顶

线形\长度	最短	加长	越来越长
直线	---	----	-----
加粗直线	===	====	=====
虚线	-.-	-..-	-...-

图案形状

基本的形状就是下列几种，形状和符号自身的形状对应，他们之间互相组合就可以形成非常丰富的图形。

形状	符号
直角矩形	[ ]
圆角矩形	( )
菱形	{ }
斜边	/ /
箭头	>、<

常用：

flowchart TB
	A1([hello])
	A2(hello)
	A3[hello]
	A4((hello))
	A5{hello}

特殊：

flowchart TB
	A1>hello]
	A2[/hello/]
	A3[\hello\]
	A4[\hello/]
	A5[/hello\]
	A6{{hello}}
	A7[[hello]]
	A8[(hello)]

使用自定义格式
自定义填充颜色，边框颜色形状

flowchart TB
	A(A)
	
	A0(A)
	style A0 color:#a630d9
	
	A1(A)
	style A1 color:#a630d9,fill:#dcc7e1
	
	A2(A)
	style A2 color:#a630d9,fill:#dcc7e1,stroke:#a67eb7
	
	A3(A)
	style A3 color:#a630d9,fill:#dcc7e1,stroke:#a67eb7,stroke-width:5px
	
	A4(A)
	style A4 color:#a630d9,fill:#dcc7e1,stroke:#a67eb7,stroke-width:5px,stroke-dasharray: 10 5

关键字	作用
style	标志着开始设置样式
color	字体颜色
fill	填充颜色，即背景
stroke	边框颜色
stroke-width	边框宽度
stroke-dasharray	虚线，前一个数字是虚线长，后一个是虚线之间的间隔的长

如果需要批量修改为某自定义格式，可以使用classDef

flowchart TB
	classDef mClass fill:#f96;
	B0
	B1:::mClass 
    B2:::mClass 

时序图

说明

1. 对象 & 生命线

使用 participant 关键字创建，会自动生成生命线，生命线长度取决于交互过程

participant Alice

若对象名字太长太复杂，为方便后续通信，可以用 as 进行重命名

participant A as Alice

2. 发送消息

使用“A->>B”表示A给B发送消息，箭头方向不可更改，必须是“发送方->>接收方”，
但线形可以更改，一个“-”是直线，两个是虚线，三个是你写错了。
自上而下的交互过程和代码中顺序一致

demo 1

最简单的方式，之间按顺序写流程就可以了
可以加上 participant 指明对象，也可以不加

sequenceDiagram
    Alice->>Bob: Hello John, how are you?
  	Bob->>Alice: I'm fine. Thank you, and you?
    Alice->>Bob: Great!

demo 2

相较于1，在开头多了如下两行，这两行代码：

1. 指明了流程中的参与者
2. 为其重命名，如果后续流程很多，打每个参与者的全称会很麻烦，这个时候可以为其设置一个简单的代称。

sequenceDiagram
    participant A as Alice
    participant B as Bob
    
    A->>B: Hello John, how are you?
  	B->>A: I'm fine. Thank you, and you?
    A->>B: Great!

demo 3

展示了一些更复杂的图形绘制

sequenceDiagram
    participant Alice
    participant Bob
    participant John

    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!