Markdown 流程图

1. 前言

Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、"饼图" 等。

本节将重点介绍如何通过 Mermaid 绘制「类图」。

类图（Class diagrams）用来描述系统中静态对象的内容和关系。

类图是一种面向对象的建模形式。它是应用系统结构的概念模型，通常与开发时的代码有严格的对应关系。类视图也可以用于数据建模。

环境说明：
考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
Mermaid 为 Markdown 扩展语法，需要在 Typora 设置中开启对图表的语法支持。其方式为：「设置」->「Markdown」->「Markdown 扩展语法」-> 勾选「图表」，如下图：

2. 语法详解

类图的核心要素有类和关系。

2.1 类图的「类」

类是类图中的核心组成，类的成员包括属性和方法，以及一些扩展信息。在类图中，一个类实例由三层组成：

• 类名称，在类图的最顶端；
• 类属性，在类图的中间层；
• 类方法，在类图的最下层。

实例 1：

​```mermaid
classDiagram
    class 动物
    动物 : String 标签
    动物 : 吃()
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6

此部分代码将会渲染成如下效果：

2.1.1 类的定义

类的定义有两种方式，第一种是形如 class Animal 这样的直接描述，另一种是通过关系来定义类，如 Vehicle <|-- Car。

实例 2：

​```mermaid
classDiagram
    class 动物
    交通工具 <|-- 小汽车
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5

渲染效果如下：

2.1.2 类成员的定义

类成员包含属性、方法；区分属性和方法的语法依赖于是否以「小括号 ()」结尾，没有括号的成员会被解释为属性，有括号的成员会被解释为方法。

类成员有两种定义方法。

实例 3：

使用「冒号」声明类成员。

​```mermaid
classDiagram
  class 银行账户
  银行账户 : +String 户主
  银行账户 : +BigDecimal 余额
  银行账户 : +存(数量)
  银行账户 : +取(数量)
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8

其渲染效果如下：

实例 4：

使用 「大括号」确定类对象的成员描述。

​```mermaid
classDiagram
  class 银行账户 {
    +String 户主
    +BigDecimal 余额
    +存(数量) bool
    +取(数量)
  }
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9

其渲染效果如下：

通过在「小括号」结尾处增加数据类型描述，我们可以给方法成员设置入参及返回值。

实例 5：

​```mermaid
classDiagram
  class 银行账户 {
      +String 户主
      +BigDecimal 余额
      +存(数量) bool
      +取(数量) int
  }
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9

其渲染效果如下：

成员的作用域作为可选项，定义是在成员的开头，有以下四种：

• + Public
• - Private
• # Protected
• ~ Package/Internal

除此之外，通过在 () 后面增加 「星号 *」和「美元符号 $」，可以用来描述方法成员的抽象或静态属性。

2.2 类图中的「关系」

类图中「类」之间的逻辑关系由连接线表示，定义的形式如：[类A][箭头][类B]:标签文字。

不同的逻辑关系定义如下：

实例 6：

各种连线类型展示。

​```mermaid
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
10
11

渲染结果如下：

还可以为关系加上标签。

实例 7：

在类图连接线上增加标签。

​```mermaid
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
10
11

渲染效果如下：

实例 8：

不同基数关系的定义。

​```mermaid
classDiagram
    顾客 "1" --> "*" 票据
    学生 "1" --> "1..*" 课程
    银河 --> "many" 星星 : 包含
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6

其渲染效果如下：

2.3 类修饰符

我们可以通过标签文本描述类的元数据，例如：抽象类、接口、服务、枚举等。

元数据的通过「双尖括号」定义，有两种写法：

实例 9：

在类名称下面另起一行：

​```mermaid
classDiagram
  class 形状
  <<interface>> 形状
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5

其渲染效果如下：

实例 10：

在嵌套结构内的首行定义：

​```mermaid
classDiagram
class 形状 {
    <<interface>>
    定点数
    绘制()
}
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8

其渲染效果如下：

3. 使用场景及实例

类图主要用于为系统建模。

实例 11：

一个关于动物的类图。

​```mermaid
classDiagram
	鸟 --|> 动物 : 继承
  翅膀 "2" --> "1" 鸟 : 组合
  动物 ..> 氧气 : 依赖
  动物 ..> 水 : 依赖
  
	class 动物 {
    <<interface>>
    +有生命
    +新陈代谢(氧气, 水)
    +繁殖()
	}
	
	class 鸟 {
		+羽毛
		+有角质喙没有牙齿
		+下蛋()
	}
	class 鸟 {
		+羽毛
		+有角质喙没有牙齿
		+下蛋()
	}
​```
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
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

其渲染效果如下：

4. 小结

• Mermaid 方法渲染的类图包含图表类型声明、类、关系；
• Mermaid 类图支持类名、成员的定义，并可以为成员声明修饰符及类型元数据；
• Mermaid 支持多种类型的关系，可以为关系增加标签文本，可以增加基数描述。