Markdown 流程图
1. 前言
Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、"饼图" 等。
本节将重点介绍如何通过 Mermaid 绘制「类图」。
类图（Class diagrams）用来描述系统中静态对象的内容和关系。
类图是一种面向对象的建模形式。它是应用系统结构的概念模型，通常与开发时的代码有严格的对应关系。类视图也可以用于数据建模。
环境说明：
考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
Mermaid 为 Markdown 扩展语法，需要在 Typora 设置中开启对图表的语法支持。其方式为：「设置」->「Markdown」->「Markdown 扩展语法」-> 勾选「图表」，如下图：
2. 语法详解
类图的核心要素有类和关系。
2.1 类图的「类」
类是类图中的核心组成，类的成员包括属性和方法，以及一些扩展信息。在类图中，一个类实例由三层组成：
- 类名称，在类图的最顶端；
- 类属性，在类图的中间层；
- 类方法，在类图的最下层。
实例 1：
```mermaid
classDiagram
class 动物
动物 : String 标签
动物 : 吃()
```
此部分代码将会渲染成如下效果：
2.1.1 类的定义
类的定义有两种方式，第一种是形如 class Animal 这样的直接描述，另一种是通过关系来定义类，如 Vehicle <|-- Car。
实例 2：
```mermaid
classDiagram
class 动物
交通工具 <|-- 小汽车
```
渲染效果如下：
2.1.2 类成员的定义
类成员包含属性、方法；区分属性和方法的语法依赖于是否以「小括号 ()」结尾，没有括号的成员会被解释为属性，有括号的成员会被解释为方法。
类成员有两种定义方法。
实例 3：
使用「冒号」声明类成员。
```mermaid
classDiagram
class 银行账户
银行账户 : +String 户主
银行账户 : +BigDecimal 余额
银行账户 : +存(数量)
银行账户 : +取(数量)
```
其渲染效果如下：
实例 4：
使用 「大括号」确定类对象的成员描述。
```mermaid
classDiagram
class 银行账户 {
+String 户主
+BigDecimal 余额
+存(数量) bool
+取(数量)
}
```
其渲染效果如下：
通过在「小括号」结尾处增加数据类型描述，我们可以给方法成员设置入参及返回值。
实例 5：
```mermaid
classDiagram
class 银行账户 {
+String 户主
+BigDecimal 余额
+存(数量) bool
+取(数量) int
}
```
其渲染效果如下：
成员的作用域作为可选项，定义是在成员的开头，有以下四种：
+Public-Private#Protected~Package/Internal
除此之外，通过在 () 后面增加 「星号 *」和「美元符号 $」，可以用来描述方法成员的抽象或静态属性。
2.2 类图中的「关系」
类图中「类」之间的逻辑关系由连接线表示，定义的形式如：[类A][箭头][类B]:标签文字。
不同的逻辑关系定义如下：
| Type | Description |
|---|---|
| `< | --` |
*-- | 组成关系 |
o-- | 集合关系 |
--> | 关联关系 |
-- | 实现连接 |
..> | 依赖关系 |
| `.. | >` |
.. | 虚线连接 |
实例 6：
各种连线类型展示。
```mermaid
classDiagram
classA <|-- classB
classC *-- classD
classE o-- classF
classG <-- classH
classI -- classJ
classK <.. classL
classM <|.. classN
classO .. classP
```
渲染结果如下：
还可以为关系加上标签。
实例 7：
在类图连接线上增加标签。
```mermaid
classDiagram
classA --|> classB : 继承
classC --* classD : 组成
classE --o classF : 集合
classG --> classH : 关联
classI -- classJ : 实线连接
classK ..> classL : 依赖
classM ..|> classN : 实现
classO .. classP : 虚线连接
```
渲染效果如下：
实例 8：
不同基数关系的定义。
```mermaid
classDiagram
顾客 "1" --> "\*" 票据
学生 "1" --> "1..\*" 课程
银河 --> "many" 星星 : 包含
```
其渲染效果如下：
2.3 类修饰符
我们可以通过标签文本描述类的元数据，例如：抽象类、接口、服务、枚举等。
元数据的通过「双尖括号」定义，有两种写法：
实例 9：
在类名称下面另起一行：
```mermaid
classDiagram
class 形状
<<interface>> 形状
```
其渲染效果如下：
实例 10：
在嵌套结构内的首行定义：
```mermaid
classDiagram
class 形状 {
<<interface>>
定点数
绘制()
}
```
其渲染效果如下：
3. 使用场景及实例
类图主要用于为系统建模。
实例 11：
一个关于动物的类图。
```mermaid
classDiagram
鸟 --|> 动物 : 继承
翅膀 "2" --> "1" 鸟 : 组合
动物 ..> 氧气 : 依赖
动物 ..> 水 : 依赖
class 动物 {
<<interface>>
+有生命
+新陈代谢(氧气, 水)
+繁殖()
}
class 鸟 {
+羽毛
+有角质喙没有牙齿
+下蛋()
}
class 鸟 {
+羽毛
+有角质喙没有牙齿
+下蛋()
}
```
其渲染效果如下：
4. 小结
- Mermaid 方法渲染的类图包含图表类型声明、类、关系；
- Mermaid 类图支持类名、成员的定义，并可以为成员声明修饰符及类型元数据；
- Mermaid 支持多种类型的关系，可以为关系增加标签文本，可以增加基数描述。