Markdown 类图
1. 前言
Markdown 的原生语法绘制图形,但通过扩展模块,我们可以将一些格式化的渲染成我们需要的图形。常用的图形有 “流程图”、“”、“类图”、“状态图”、“甘特图”、"饼图" 等。
本节将重点介绍如何通过 Mermaid 绘制「类图」。
类图(Class diagrams)用来描述系统中静态对象的和关系。
类图是一种面向对象的建模形式。它是应用系统结构的概念模型,通常与开发时的有严格的对应关系。类视图也可以用于数据建模。
环境说明:
考虑到 Markdown 工具之不兼容,有的直接从复制粘贴到本地不会正常,大家学习时自己动手写是肯定没问题的。本节所有实例及演示均使用 Typora 工具完成。
Mermaid 为 Markdown 扩展语法,需要在 Typora 设置中开启对图表的语法。其方式为:「设置」->「Markdown」->「Markdown 扩展语法」-> 勾选「图表」,如下图:
2. 语法详解
类图的核心要素有类和关系。
类是类图中的核心组成,类的成员和,以及一些扩展信息。在类图中,由三层组成:
类,在类图的最顶端;
类,在类图的中间层;
类,在类图的最下层。
实例 1:
```mermaid classDiagram class 动物 动物 : String 动物 : 吃()```
此部分将会渲染成如下:
类的定义有两种方式,第一种是形如 class Animal
这样的直接描述,另一种是通过关系来定义类,如 Vehicle <|-- Car
。
实例 2:
```mermaid classDiagram class 动物 交通工具 <|-- 小汽车```
渲染如下:
包含、;区分和的语法依赖于是否以「小括号 ()」
结尾,没有括号的成员会被解释为,有括号的成员会被解释为。
有两种定义。
实例 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
除此之外,通过在 ()
后面 「星号 *
」和「美元符号 $
」,可以用来描述成员的抽象或静态。
类图中「类」之逻辑关系由连接线表示,定义的形式如:[类A][箭头][类B]:
。
不同的逻辑关系定义如下:
实例 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" 星星 : 包含```
其渲染如下:
我们可以通过文本描述类的元数据,例如:抽象类、接口、服务、枚举等。
元数据的通过「双尖括号」定义,有两种写法:
实例 9:
在类下面另起一行:
```mermaid classDiagram class 形状 <<interface>> 形状 ```
其渲染如下:
实例 10:
在嵌套结构内的首行定义:
```mermaid classDiagram class 形状 { <<interface>> 定点数 绘制()} ```
其渲染如下:
3. 使用场景及实例
类图主要用于为系统建模。
实例 11:
关于动物的类图。
```mermaid classDiagram 鸟 --|> 动物 : 继承 翅膀 "2" --> "1" 鸟 : 组合 动物 ..> 氧气 : 依赖 动物 ..> 水 : 依赖 class 动物 { <<interface>> +有生命 +新陈代谢(氧气, 水) +繁殖() } class 鸟 { +羽毛 +有角质喙没有牙齿 +下蛋() } class 鸟 { +羽毛 +有角质喙没有牙齿 +下蛋() }```
其渲染如下:
4. 小结
Mermaid 渲染的类图包含图表类型声明、类、关系;
Mermaid 类图类名、成员的定义,并可以为成员声明修饰符及类型元数据;
Mermaid 多种类型的关系,可以为关系文本,可以基数描述。