工欲善其事，必先利其器，Markdown和Mermaid的梦幻联动（1）

该文章Github地址：https://github.com/AntonyCheng/typora-notes/tree/master/chapter03-mermaid【有条件的情况下推荐直接访问GitHub以获取最新的代码更新】

在此介绍一下作者开源的SpringBoot项目初始化模板（Github仓库地址：https://github.com/AntonyCheng/spring-boot-init-template【有条件的情况下推荐直接访问GitHub以获取最新的代码更新】& CSDN文章地址：https://blog.csdn.net/AntonyCheng/article/details/136555245），该模板集成了最常见的开发组件，同时基于修改配置文件实现组件的装载，除了这些，模板中还有非常丰富的整合示例，同时单体架构也非常适合SpringBoot框架入门，如果觉得有意义或者有帮助，欢迎Star & Issues & PR！

1.Mermaid 功能

Mermaid可以让我们使用文本和代码创建图表和可视化效果：

它主要包括以下图像的创建：

$$\text{Mermaid}\{\begin{array}{l}\mathbf{Flowchart}-\mathbf{流程图}\\ \mathbf{Sequence}\mathbf{Diagram}-\mathbf{时序图}\\ \mathbf{Class}\mathbf{Diagram}-\mathbf{类图}\\ \mathbf{State}\mathbf{Diagram}-\mathbf{状态图}\\ \mathbf{Entity}\mathbf{Relationship}\mathbf{Diagram}-\mathbf{实体关系图}\\ \mathbf{User}\mathbf{Journey}-\mathbf{用户行程图}\\ \mathbf{Gantt}-\mathbf{甘特图}\\ \mathbf{Pie}\mathbf{Chart}-\mathbf{饼状图}\\ \mathbf{Requirement}\mathbf{Diagram}-\mathbf{需求图}\\ \mathbf{Other}\mathbf{Examples}\cdots \end{array}$$

2.Mermaid介绍

• 它是一种基于 JavaScript 的图表和图表工具，可呈现受 Markdown 启发的文本定义以动态创建和修改图表

• 而在 typora 中我们可以输入 ```mermaid 然后敲击回车，即可初始化一张空白的图。

3.流程图(Flowchart)

• 所有流程图都由节点、几何形状和边缘、箭头或线条组成。 Mermaid 代码定义了这些节点和边的生成和交互方式。
• 它还可以容纳不同的箭头类型、多向箭头以及与子图的链接。

3.1.节点

例如下：

flowchart LR
	id

• 这个节点名为 id ，被展示到了这个盒子里。

3.2.文本节点

例如下：

flowchart LR
	id1[This is the text in the box]

• 可以用[]的形式将文本内容框在box1当中，随后外层的box1就成为了一个定义语句。

3.3.图形

• 这个模块会声明流程图的方向。
• 下例声明该流程图是从上到下的（TD 或者 TB）。

例如下：

flowchart TD
	start-->continue-->finally

flowchart TD
	id1(start)-->id2(continue)-->id3(finally)

flowchart TD
	id1(start)
	id2(continue)
	id3(finally)
	id1-->id2-->id3

3.4.流程图方向

$$\{\begin{array}{l}TB-\text{从上到下}（TopToBottom）\\ \\ TD-\text{从上到下}（TopToDown）\\ \\ BT-\text{从下到上}（BottomToTop）\\ \\ RL-\text{从右到左}（RightToLeft）\\ \\ LR-\text{从左到右}（LeftToRight）\end{array}$$

3.5.节点形状

1. 圆角：

flowchart LR
id(A node with round edges)

2. 圆边：

flowchart LR
id([A stadium-shaped node])

3. 子程序框：

flowchart LR
id[[A node in a subroutine shape]]

4. 圆柱节点：

flowchart LR
id[(A Database)]

5. 圆形：

flowchart LR
id((The sentence in the circle))

6. 标签图：

flowchart LR
id>A node in an asymmetric shape]

7. 菱形:

flowchart LR
id{A rhombus}

8. 六边形：

flowchart LR
id{{A hexagon node}}

9. 平行四边形：

flowchart LR
id[/Parallelogram/]

10. 平行四边形（反）：

flowchart LR
id[\Parallelogram alt\]

11. 梯形：

flowchart LR
id[/Trapezoid\]

12. 梯形（反）：

flowchart LR
id[\Trapezoid alt/]

3.6.线条

1. 箭头线条：

flowchart LR
a-->b

2. 正常线条：

flowchart LR
a---b

3. 字段线条：

flowchart LR
a--this is a sentence!---b
c--this is a sentence!-->d

flowchart LR
a---|this is a sentense!|b
c-->|this is a sentense!|d

4. 虚线条：

flowchart LR
a-.--b
c-.->d
e-.text.-f
g-.text.->h

5. 加粗线条：

flowchart LR
a==>b
c==text==>d

6. 连接线：

flowchart LR
a--text1-->b--text2---c
d--- e & f ---g
h--> i & j -->k
l & m --> n & o --- p & q

其实可以一步一步来

flowchart LR
a-->c
a-->d
b-->c
b-->d
c---e
d---e
c---f
d---f

7. 特殊线条：

flowchart  LR
a--ob--xc
d o--o e <--> f x--xg

8.线条的长短：

• 线条长短可以用额外的破折号来实现：

flowchart TD
a(Start)
b{Is it ?}
c[OK]
d[Rethink]
e[End]
a-->b
b--Yes-->c-->d-->b
b--No---->e

• 这里需要看看代码， a,b,c,d,e 依次降级（高度依次下降），d到e需要降两级，所以加了两条破折号。

• 注意线条的长度可能会超过渲染引擎的请求等级，简而言之应该有限设置。

9. 总结：

长度	1	2	3
正常线条	---	----	-----
箭头线条	-->	--->	---->
加粗线条	===	====	=====
加粗箭头线条	==>	===>	====>
虚线	-.-	-..-	-...-
箭头虚线	-.->	-..->	-...->

3.7.转义字符的实体代码

• 可以将文本放在引号内以呈现更麻烦的字符。如下例所示：

flowchart LR
id1["This is the(text) in the box"]

• 但是我们要转义特殊的字符：

flowchart LR
A["A double quote: #quot;"]-->B[">:#gt;"]-->C["<:#lt;"]-->D["#:#35;"]-->E["#copy;:#copy;"]

• 可以看出这里是支持HTML5的字符名称的。

3.8.子图

示例：

flowchart LR
	subgraph title
		graph definition
		···
	end
	subgraph title
		graph dedinition
		···
	end
	···

我们来写一个我家和舅舅家的一个关系图：

flowchart TB
subgraph grandfamily
grandfather<--couple-->grandmather
end
subgraph myfamily
mymather-- mather-->me
myfather-->me
end
subgraph unclefamily
myuncle-->mycousin
myaunt-->mycousin
end
mymather-- sister -->myuncle
me-- brother -->mycousin
myuncle<-- couple -->myaunt
mymather<--couple-->myfather
grandmather--mather-->mymather & myuncle
grandfather--father-->mymather & myuncle

当然也可以序数三个家庭之间的关系：

flowchart TB
subgraph grandfamily
grandfather<--couple-->grandmather
end
subgraph myfamily
mymather-- mather-->me
myfather-->me
end
subgraph unclefamily
myuncle-->mycousin
myaunt-->mycousin
end
grandfamily-- parent -->myfamily
grandfamily-- parent -->unclefamily
myfamily<--sister and brother-->unclefamily

当然啦，既然flowchart中可以嵌入subgraph，那么subgraph里面也可以嵌入graph呀！

flowchart TB
subgraph grandfamily
	grandfather<--couple-->grandmather
	subgraph unclefamily
		myuncle-->mycousin
		myaunt-->mycousin
	end
	subgraph myfamily
		mymather-- mather-->me
		myfather-->me
	end
end
mymather-- sister -->myuncle
me-- brother -->mycousin
myuncle<-- couple -->myaunt
mymather<--couple-->myfather
myfamily<--sister and brother----->unclefamily
grandmather--mather-->mymather & myuncle
grandfather--father-->mymather & myuncle

3.10.样式和类

1. 节点样式：

flowchart LR
id1(Start)
id2(Stop)
style id1 fill:#f9f,stroke:#000,stroke-width:4px
style id2 fill:#ccc,stroke:#f66,stroke-width:5px,color:#fff,stroke-dasharray:5 5
id1<---->id2

我们对比HTML5的样式来看：

HTML5样式	Mermaid样式
background-color	fill
color	color
border-color	stroke
border-width	stroke-width
border-style	stroke-dasharray

2. JavaScript样式类：

   示例如下：

   flowchart LR
   ···:::class1
   ···:::class2
   ···:::class3
   ···
   classDef class1 fill···
   classDef class2 fill···
   classDef class3 fill···
   ···
   

   例如下：

   flowchart LR
   A:::className1-->B:::className2
   classDef className1 fill:#abc;
   classDef className2 fill:#cba;
   

4.时序图(SequenceDiagram)

• 时序图是一种交互图，它显示了进程如何相互操作以及以何种顺序运行。
• 注意：end是一个会破坏语法的特殊字符，如果end的使用不可避免，那就应该用{},[],()将其框起来。

示例如下：

sequenceDiagram
Alice->>John:Hello John,how are you?
John-->>Alice:Great!
Alice->>John:See you later!

4.1.句法

1. 参与者：

   • 参与者可以像本页第一个示例中那样隐式定义。参与者或参与者按在图表源文本中的出现顺序呈现。有时，我们可能希望以不同于他们在第一条消息中出现的顺序显示参与者。可以通过执行以下操作来指定participant的出现顺序：

   sequenceDiagram
   participant Alice
   participant Bob
   Alice->>Bob:Hi Bob!
   Bob->>Alice:Hi Alice!
   

2. 缩写：

   • 参与者可以被设置为一个描述性的标签：

   sequenceDiagram
   participant A as Alice
   participant B as Bob
   A->>B:Hello john,how are you?
   B->>A:Great!
   

4.2.箭头样式

类型	描述
->	没有箭头的实线
-->	没有箭头的虚线
->>	带箭头的实线
-->>	带箭头的虚线
-x	带十字的实线
--x	带十字的虚线

sequenceDiagram
a->b:s
a-->b:s
a->>b:s
a-->>b:s
a-xb:s
a--xb:s

4.3.激活

• 一个参与者可以被激活，也可以被屏蔽，activate和deactivate可以用来声明：

sequenceDiagram
Alice->>John:Hello John,how are you?
activate John
John-->>Alice:Great
deactivate John

• 其实我们还可以用一些格式上的缩写，比如通过+/-来实现这一功能：

sequenceDiagram
Alice->>+John:Hello John,how are you?
John->>-Alice:Great!

• 激活状态能够实现在相同的参与者身上：

sequenceDiagram
Alice->>+John:Hello John,how are you?
Alice->>+John:John,can you hear me?
John-->>-Alice:Hi Alice,I can hear you!
John-->>-Alice:I feel great!

4.4.笔记

• 我们也可以在时序图旁可以添加笔记，我们可以用right of left of over来实现：

sequenceDiagram
participant John
participant Alice
Note left of John:Text in note
Note right of Alice:Text in note
Note over Alice,John:Text in note

4.5.循环

• 我们还可以在时序图中运用循环，示例如下：

sequenceDiagram
A->B:···
loop Loop_text
	B->A:···
end

sequenceDiagram
Alice->John:Hello John,how are you?
loop EverySecond
	John->Alice:Great！
end

4.6.判断

• 我们还可以在时序图中加入判断语句，如下例：

sequenceDiagram
alt Describing_text
	···
else Describing_text
	···
end

• 如果else语句没有触发，我们还可以给一个反馈，如下例：

sequenceDiagram
alt Describing_text
	···
else Describing_text
	···
end
pot Extra_response
	···
end

sequenceDiagram
Alice->>Bob:Hello Bob,how are you?
alt is sick
	Bob-->>Alice:Not so good :(
else is well
	Bob-->>Alice:Feeling fresh like a daisy
end
opt Extra_response
	Bob-->>Alice:Thanks for asking
end

4.7.平行线

• 我们可以用一种方式来表示同时发生的事情（平行发生）：

sequenceDiagram
par [action1]
	···
and [action2]
	···
and [action3]
	···
···
and [actionN]
	···
end

• 我们来写一个传递message的时序图：

sequenceDiagram
participant A as Alice
participant B as Bob
participant C as Coco
participant D as Dave
participant E as Eize
par Alice to Bob
	A-->>B:message
and Alice to Coco
	A-->>C:message
end
par Coco to Dave
	C-->>D:message
and Coco to Eize
	C-->>E:message
	par Bob to Dave
		B-->>D:message
	end
end
E->>A:OK
D->>A:OK
C->>A:OK
B->>A:OK

• 可以看出时序图中的平行并发也能够内嵌。

4.8.背景高亮

• 我们还可以在时序图中设置背景的高亮属性，示例如下：

rect rgb(,,)
	···	
end

rect rgba(,,,)
	···
end

• 例如下：

sequenceDiagram
participant Alice
participant Bob
rect rgb(191,223,255)
note right of Alice:Alice calls Bob.
Alice->>+Bob:Hello Bob, how are you?
rect rgba(200,150,255,.5)
Alice->>+Bob:Bob,can you hear me?
Bob-->-Alice:Hi Alice,I can hear you!
end
Bob-->>+Alice:I feel great!
end
Alice->>+Bob:I Did you want to go to the game tonight
Bob-->>-Alice:Yeah! See you there.

4.9.注释

• 在Mermaid中的注释是由%%完成的：

sequenceDiagram
Alice-->>Bob:display!
%%BoB-->>Alice:no display!

4.10.转义字符的实体代码

例如下：

sequenceDiagram
A-->>B:I #9829; you !
B-->>A:I #9829; you #infin; times more!

下一章：工欲善其事，必先利其器，Markdown和Mermaid的梦幻联动（2）