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

该文章Github地址：https://github.com/AntonyCheng/typora-notes/tree/master/chapter03-mermaid

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

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

5.类图(ClassDiagram)

• 在软件工程中，统一建模语言（UML）中的类图是一种静态结构图，它通过显示系统的类，属性，操作方法以及对象之间的关系来描述系统的结构。
• 类图是面向对象建模的主要构建块，它用于应用程序结构的一般概念建模，以及将模型转换为编程代码的详细建模，类图也可用于数据建模，类图中的类代表主要元素，应用程序中的交互以及要编程的类。
• 例如下：

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()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5.1.句法

• UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息，图中类的单个实例包含三个元素。
• 1. 顶部：它是类的名称，它以粗体居中打印，第一个字母大写，他还可能包含描述类性质的可选注释文本。
  2. 中部：它是类的属性，它们是左对齐，第一个字母是小写的（String写法本就如此）。
  3. 底部：它是类的操作，它们是左对齐，第一个字母是小写的（String写法本就如此）。

classDiagram
class BankAccount{
+String owner
+Bigdecimal balance
+deposit(amount)
+withdraw(amount)
}
1
2
3
4
5
6
7

5.2.定义一个类

• 定义一个类有两种方式，一种是class ClassName，另一种是ClassName <|-- SubClassName，前者是通过关键字class显式定义，后者是通过两类的关系隐式定义：

classDiagram
class 1900sharehome
1900ShareHome <|-- Typora
1
2
3

• 命名要求：类名是由字母，数字（允许使用unicode）和下划线字符组成。

5.3.定义类的成员

• UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息。
• Mermaid根据括号()是否存在来区分属性和函数/方法。那些()被视为函数/方法，而其他被视为属性。
• 定义类成员的方法也有两种：

classDiagram
class bankaccount{
+String owner
+BigDecimal balance
+deposit(amount)
+withdrawal(amount)
}
1
2
3
4
5
6
7

classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
1
2
3
4
5
6

1. 返回类型：可以用返回的数据类型来定义：

   classDiagram
   class BankAccount{
   +String owner
   +BigDecimal balance
   +deposit(amount)int
   +withdrawal(amount)bool
   }
   1
   2
   3
   4
   5
   6
   7

2. 通用类型：可以用通用类型来进行成员的定义，例如List,用于字段，参数和返回类型，方法是将类型包含在~内，且该方法不支持嵌套：

   classDiagram
   class Class~Shape~{
   int id
   List~int~ position
   setPoints(List~int~ points)
   getPoints() List~int~
   }
   Class : -List~String~ messages
   Class : +setMessages(-List~String~messages)
   Class : +getMessages() List~Sring~
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

3. 可视度：对于一些有特殊可视性的类成员，一般把以下元素放置在成员名字之前：

   字符	意义
   +	公开
   -	私人
   #	受保护
   ~	内部

   classDiagram
   class ClassName{
   +Public
   -Private
   #Protected
   ~Package/Internal
   }
   1
   2
   3
   4
   5
   6
   7

5.4.定义关系

• 它是一种建立在类和项目图之上，包括特殊的逻辑链接的总称：

[ClassA][Arrow][ClassB]
1

• 以下是目前在UML下所支持的关系定义：

classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
1
2
3
4
5
6
7
8
9

• 我们还可以在两个关系之间使用描述性的标签：

[ClassA][Arrow][ClassB]:LabelText
1

classDiagram
classA --|> classB : Inheritance
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)
1
2
3
4
5
6
7
8
9

• 双向箭头：

5.5.基数/关系的多重性

• 类图中的多重性或基数表示一个类的实例链接到另一类的一个实体的数量，例如：
  一家公司将有一名或多名员工，但每一位员工只为一家公司工作。
• 多重符号放置在定义关系的末端：

• 我们将多重符号定义在**中：

[ClassA]"Number"[Arrow]"Number"[ClassB]:LabelText
1

classDiagram
A"1"--|>"n"B
1
2

5.6.类的注释

• 可以用特定的标记文本来注释类，就像类的元数据一样，清楚地表明其性质。一些常见的注释实例如下：
  1. <>表示一个接口类
  2. <>表示抽象类
  3. <>表示一个服务器
  4. <>表示一个举例类
• 用法如下例：

classDiagram
class ClassName
<> ClassName
ClassName : Element!
ClassName : Element!()
1
2
3
4
5

这是一个比较复杂的用法，下面来一个简单的：

classDiagram
class ClassName{
<>
element!
element!()
}
1
2
3
4
5
6

• 代码的注释：用%%进行注释，例如下：

classDiagram
%% class Classname{
%%red
%%blue()
%%}
class ClassName{
red
blue()
}
1
2
3
4
5
6
7
8
9

5.7.设置图表的方向

• 我们可以很清楚的看出，类图中是包含有方向的，所以我们可以设置类图的方向：

classDiagram
class Student{
-idCard:IdCard
+id()
}
class IdCard{
-id : int
-name : string
+id()
}
class Bike{
-id : int
-name : String
+id()
}
Student --o IdCard : comment
Bike --o IdCard : comment
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6.状态图

• 状态图是一种在计算机科学和相关领域中用于描述系统行为的图。状态图要求所描述的系统由有限数量的状态组成；有时情况确实如此，而在其他情况下有时这是一个合理的抽象。
• Mermaid 可以渲染状态图。语法大体与plantUml 中使用的语法保持一致，因为这将使用户更容易在mermaid 和plantUml 之间共享图表。

例如下：

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
1
2
3
4
5
6
7

比较旧的渲染器：

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
1
2
3
4
5
6
7

• 幸运的是，Typora能够兼容两者的渲染

6.1.状态

• 一个状态能够以多种方式去声明，最简单的一种声明方式就是单独作为一个id描述：

stateDiagram-v2
s1
1
2

• 另外一种方式就是用一个描述来简化id：

stateDiagram-v2
state "This is a state description" as s2
1
2

• 再或者我们可以用：来引出id:

stateDiagram-v2
s2:This is a state description
1
2

6.2.状态转换

• 我们通常用-->来作为状态转换的语法，当我们要定义两个状态之间的转换时：

stateDiagram-v2
s1-->s2
1
2

• 我们也可以在状态转换的同时添加一个描述：

stateDiagram-v2
s1-->s2:This is a transition
1
2

6.3.开始和结束

• 在Mermaid里面有两个特殊的状态——开始和结束，我们通常用[*]来表示它们：

stateDiagram-v2
[*]-->A
A-->[*]
1
2
3

6.4.嵌套状态

• 在实际生活中，我们经常运用多维的状态图来描述一个系统内部的状态关系，为了定义复合状态，我们需要使用到一个state关键字，后面跟一个id和{}，例如下：

stateDiagram-v2
[*]-->A
state A{
	[*]-->S1
	S1-->S2
	S2-->[*]
}
1
2
3
4
5
6
7

• 我们在来一个多层嵌套：

stateDiagram-v2 
[*]-->A 
state A {
	[*]-->B
	state B {
		[*]-->C
		state C {
			[*]-->D
			state D {
				[*]-->E
				E-->[*]
			}
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 我么还可以对其进行分支描述：

stateDiagram-v2
[*]-->First
state First {
	[*]-->F
	F-->[*]
}
First-->Second
state Second {
	[*]-->S
	S-->[*]
}
First-->Third
state Third {
	[*]-->T
	T-->[*]
}
Second-->[*]
Third-->[*]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6.5.选择分支

• 实际生活当中我们经常运用状态图中的选择分支来描述问题，例如下：

stateDiagram-v2
[*] --> IsPositive
IsPositive --> if_else
if_else --> False: if n<0
if_else --> True: if n>=0
1
2
3
4
5

6.6.叉

• 可以使用 <> <> 在图中指定一个叉：

stateDiagram-v2
    state fork_state <>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3
      state join_state <>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]
1
2
3
4
5
6
7
8
9
10

6.7.添加笔记

stateDiagram-v2
    State1: The state with a note
    %%第一种方法
    note right of State1
        Important information! You can write notes.
    end note
    %%第一种方法
    State1 --> State2
    %%第二种方法
    note left of State2 : This is the note to the left.
    %%第二种方法
1
2
3
4
5
6
7
8
9
10
11

6.8.并发

stateDiagram-v2
    [*] --> Active
    state Active {
        [*] --> A
        A --> B : 123
        B --> A : 123
        --
        [*] --> C
        C --> D : 456
        D --> C : 456
        --
        [*] --> E
        E --> F : 789
        F --> E : 789
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6.9.注释

• 和以前介绍的一样，我们在Mermaid里面用%%来进行语句的注释。

7.实体关系图

• ER 建模的从业者几乎总是将实体类型简称为实体。例如，CUSTOMER实体类型将简称为CUSTOMER实体。但从技术上讲，实体是实体类型的抽象实例，这就是 ER 图所显示的 - 抽象实例，以及它们之间的关系。
• 例如下：

erDiagram
customer ||--o{ order : places
order ||--|{ line-item : contains
customer }|..|{ delivery-adderss : uses
1
2
3
4

• 箭头样式：

8.生活备忘录

• 生活备忘录在Mermaid中算是最简单的图了，没有过多的语法，就下面这一个实例就能实现这样一个有趣的图像：

journey
title My working day
%% section表示选择要做的事情大体方向，其下是事情的各个细节
section Go to work
%% Doing : number : poeple (number代表心情，5为满分，0为最低分)(poeple代表人物)
Make tea:5:Me
Go upstairs:3:Me
Do work:1:Me,Cat
section Go home
Go downstairs:5:Me
Sit down:5:Me
1
2
3
4
5
6
7
8
9
10
11

9.甘特图

• 甘特图是一种条形图，由 Karol Adamiecki 于 1896 年首次开发，1910 年代由 Henry Gantt 独立开发，用于说明项目进度和完成任何项目所需的时间。 甘特图说明项目的终端元素和摘要元素的开始日期和完成日期之间的天数。

9.1.简述

• 甘特图将每个计划任务记录为一个从左向右延伸的连续条。 x 轴代表时间，y 轴记录不同的任务及其完成的顺序。
• **重要的是要记住，当特定于任务的日期、天数或时间集合被“排除”时，甘特图将通过向右扩展相同的天数来适应这些更改，而不是通过在内部创建间隙任务。 **
• 然而，如果排除的日期在两个设置为连续开始的任务之间，则排除的日期将被图形跳过并留空，并且在排除的日期结束后将开始下一个任务。
• 甘特图可用于跟踪项目完成前所需的时间，但它也可用于以图形方式表示“非工作日”，只需稍作调整。

gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section A
A task : a1,2021-01-01,30d
Another task : after a1,20d
section B
B task : 2021-03-21,40d
Another task : 40d
1
2
3
4
5
6
7
8
9

9.2.句法

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 我们也可以在已经有计划的项目过程中加入其他的项目：

gantt
apple : a,2021-01-01,30d
banana : crit,b,2021-01-04,4d
cherry : active,c,after a,7d
dog : d,after b,3d
1
2
3
4
5

• 标题：关键字——title
• 您可以将图表分成不同的部分，例如将项目的不同部分（如开发和文档）分开。为此，请以section关键字开始一行并为其命名。（请注意，与整个图表的标题)不同，此名称是必需的。
• 关键节点：我们还可以在图表里添加关键节点，类似于里程碑，他们表示单一的时刻，用关键字milestone来表示：

milestone_name milestone : milestone, m, BeginTime, KeepingTime
1

• 如上例，关键节点的确切时间就是：

$$TIME=\frac{BeginTime+KeepingTime}{2}$$

• 实例如下：

gantt 
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49,2min
taska2 : 10min
taska3 : 5min 
Final milestone : milestone, m2, 18:14, 2min
1
2
3
4
5
6
7

9.3.设置时间

• 默认格式：dateFormat YYYY-MM-DD
• 其他Mermaid支持的格式如下：

• 时间的格式化输出：

axisFormat %Y-%m-%d
1

• 其他Mermaid所支持的格式化输出：

%a - 缩写的工作日名称。
%A - 完整的工作日名称。
%b - 缩写的月份名称。
%B - 完整的月份名称。
%c - 日期和时间，如“%a %b %e %H:%M:%S %Y”。
%d - 十进制数 [01,31] 月份的零填充日期。
%e - 十进制数 [1,31] 的月份中以空格填充的日期；相当于 %_d。
%H - 小时（24 小时制），十进制数 [00,23]。
%I - 小时（12 小时制）作为十进制数 [01,12]。
%j - 以十进制数表示的一年中的第几天 [001,366]。
%m - 十进制数的月份 [01,12]。
%M - 十进制数 [00,59] 的分钟。
%L - 十进制数的毫秒数 [000, 999]。
%p - 上午或下午。
%S - 秒为十进制数 [00,61]。
%U - 一年中的周数（星期日作为一周的第一天）作为十进制数 [00,53]。
%w - 工作日为十进制数 [0(Sunday),6]。
%W - 一年中的周数（星期一作为一周的第一天）作为十进制数 [00,53]。
%x - 日期，如“%m/%d/%Y”。
%X - 时间，如“%H:%M:%S”。
%y - 没有世纪的年份，十进制数 [00,99]。
%Y - 以世纪为十进制数的年份。
%Z - 时区偏移量，例如“-0700”。
%% - 文字“%”字符。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

10.饼状图(Pie)

• 饼图（或圆图）是一种圆形统计图形，它被分成多个切片来说明数字比例。 在饼图中，每个切片的弧长（及其中心角和面积）与其代表的数量成正比。 虽然它因其类似于切片的馅饼而得名，但它的呈现方式有多种变化。
• 如下例：

pie title pie_title
"A":50
"B":40
"C":10
1
2
3
4

10.1.句法

• 在Mermaid中画一个饼图是非常容易的：

关键字以pie开始，随后设置标题title，然后将每个标签Label用引号" "括起来，随后跟上冒号:，最后写上该标签所占比例即可。

pie 
titie TitleName
"ElementA":numberA
"ElementB":numberB
···
1
2
3
4
5

10.2.例子

pie 
title Mobile Phone
"Sumsung":18.4
"Apple":13.6
"Xiaomi":9.9
"Vivo":7.4
"OPPO":8.0
"Others":42.6
1
2
3
4
5
6
7
8