Markdown 类图绘制详解

小北编程

已于 2024-01-18 13:56:12 修改

阅读量1.3k

点赞数 22

分类专栏： Markdown教程文章标签：笔记经验分享

于 2024-01-18 09:34:00 首次发布

本文链接：https://blog.csdn.net/u014696856/article/details/135556929

版权

Markdown教程专栏收录该内容

12 篇文章 6 订阅

订阅专栏

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

一、前言

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

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

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

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

二、基本语法

类图的「类」

在软件工程中，统一建模语言 (UML) 中的类图Class Diagram是一种静态结构图，它通过显示系统的类、它们的属性、操作 (或方法) 以及对象之间的关系来描述系统的结构。

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

UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息。

图中类的单个实例包含三个部分（compartment）：

顶部部分包含类名称。它以粗体和居中显示，第一个字母大写。它还可以包含描述类性质的可选注释文本。
中间部分包含类的属性。左对齐，第一个字母小写。
底部部分包含类可以执行的操作。左对齐，第一个字母小写。

语法示例

```mermaid
classDiagram
    class 动物
    动物 : String 标签
    动物 : 吃()
```

效果如下：

三、定义一个类

两种方式定义类：

使用像诸如class Animal这样的关键字显式定义类。
通过对象之间的关系定义两个类：Vehicle <|-- Car，这条语句定义了两个类，分别是车辆和汽车及其从属关系。

语法示例

```mermaid
classDiagram
    class 动物
    交通工具 <|-- 小汽车
```

效果如下：

命名约定：类名应由字母数字 (允许使用unicode) 和下划线字符组成。

四、定义类的成员

UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息。

Mermaid根据括号 () 是否存在来区分属性和函数/方法。带有 () 的被视为函数/方法，其他被视为属性。

定义类的成员有两种方法，无论使用哪种语法来定义成员，输出都是相同的。两种不同的方式是：

使用 : 关联类的成员，在后面跟随成员名称，用于一次定义一个成员。例如：

```mermaid
classDiagram
class BankAccount
BankAccount : +String owner
BankAccount : +BigDecimal balance
BankAccount : +deposit(amount)
BankAccount : +withdrawal(amount)
```

使用{}关联类的成员，成员被分组在花括号中。适用于一次定义多个成员。例如：

```mermaid
classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +withdrawl(amount)
}
```

返回类型

可选地，您可以在定义结束时设定返回的数据类型（注意：最终的方法定义和返回类型之间必须有一个空格来结束方法/函数定义），示例：

```mermaid
classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount) bool
    +withdrawl(amount) int
}
```

泛型

可以使用通用类型（例如List<int>），对于字段、参数和返回类型，方法是将类型封装在~（波浪号）中。注意：当前不支持嵌套类型声明（例如List<List<int>>）。

这可以作为任何一个类定义方法的一部分来完成：

```mermaid
classDiagram
class Square~Shape~{
    int id
    List~int~ position
    setPoints(List~int~ points)
    getPoints() List~int~
}

Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
```

返回类型

(可选) 您可以使用返回类型来结束方法/函数的定义。

可见性

要指定类成员（即任何属性或方法）的可见性，可以将这些符号放在成员名称之前（可选）：

+ 公共Public
- 私有Private
# 保护Protected
~ 包/内部Package/Internal

注意：您还可以通过在方法的末尾添加以下符号来将其他分类器包含到方法定义中，例如，在 () 之后：

* Abstract 例如：someAbstractMethod()*
$ Static例如：someStaticMethod()$

注意：您还可以通过在字段名称的末尾添加以下符号来将其他分类器包含到字段定义中：

$ Static 例如：String someField$

五、定义关系

关系是一个通用术语，涵盖在类和对象图上找到的特定类型的逻辑关系。

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

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

类型	定义
`<\|--`	继承
`\*--`.	组合
`o--`.	聚合
`-->`.	关联
`--`.	连接（实线）
`..>`.	依赖
`..\|>`	实现
`..`.	连接（虚线）

```mermaid
classDiagram
	classA <|-- classB
	classC *-- classD
	classE o-- classF
	classG <-- classH
	classI -- classJ
	classK <.. classL
	classM <|.. classN
	classO .. classP
```

```mermaid
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)
```

关系标签

可以将标签式的文本添加到关系上：

[classA][Arrow][ClassB]:LabelText

```mermaid
classDiagram
	类A <|-- 类B : 实现
	类C *-- 类D : 组合
	类E o-- 类F : 聚合
```

双向关系

关系可以逻辑上表示 N:M 的关联：

```mermaid
classDiagram
	动物 <|--|> 斑马
```

语法:

[关系类型][链接][关系类型]

其中，“关系类型”可以是以下之一:

其中Relation Type可以是以下之一：

类型	说明
`<\|`.	继承
`\*`.	组合
`o`.	聚合
`>`.	关联
`<`.	关联
`\|>`.	实现

以及Link 可以是以下之一：

类型	说明
`--`	实线
`..`.	虚线

六、关系上的基数/多重性

类图中的多重性或基数表示一个类连接到另一个类的一个实例的实例数。例如，一家公司将有一名或多名员工，但每个员工只为一家公司工作。

多重性符号放置在关联的末尾。

不同的基数选项有：

1 仅1个
0..1 0或者1个
1..* 1个或多个
* 多个
n n个（n>1）
0..n 0-n个（n>1）
1..n 1-n个（n>1）

通过在给定箭头之前（可选）和之后（可选）在 "" 内放置基数文本，可以轻松定义基数。

[类A] "基数1" [箭头] "基数2" [类B]:标签文本

```mermaid
classDiagram
消费者 "1" --> "*" 消费券
学生 "1" --> "1…*" 课程
星系 --> "许多的" 星星 : 包含
```

七、类的注解

可以使用标记对类进行说明，以提供关于类的其他元数据。这可以更清楚地指示其属性。一些常见的说明包括：

<<Interface>> 表示接口
<<Abstract>> 表示抽象
<<Service>> 表示服务
<<Enumeration>> 表示枚举

注解在 << 和 >> 中定义。有两种方法可以向类添加注解，无论使用哪种语法，输出相同。这两种方式是：

在定义类之后的单独行中定义。例如：

```mermaid
classDiagram
	class 形状
	<<interface>> 形状
	形状 : 顶点数
	形状 : `绘制()
```

在类定义的嵌套结构中定义。例如：

```mermaid
classDiagram
class 形状{
	<<接口>>
	顶点数
	绘制()
}
class 颜色{
	<<枚举>>
	红
	蓝
	黄
}
```

八、注释

注释可以在类图代码中使用，解析器将忽略这些注释。注释需要写在单独的一行里并且必须以 %% 开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何类图语法。

```mermaid
classDiagram
%% 整行都是注释 classDiagram class 形状 <<接口>>
class 形状{
	<<接口>>
	顶点数
	`绘制()
}
```

九、设置图的方向

对于类图，您可以使用方向语句来设置图将呈现的方向，就像本示例中的那样：

```mermaid
classDiagram
direction RL
class 学生 {
	-身份证 : 身份证信息
}
class 身份证信息{
	-序号 : int
	-名称 : string
}
class 自行车信息{
	-序号 : int
	-名称 : string
}
学生 "1" --o "1" 身份证信息 : 拿
学生 "1" --o "1" 自行车信息 : 骑
```

十、交互

可以将单击事件绑定到节点，单击可以打开链接，该链接将在新的浏览器选项卡中打开。

声明所有类后，可以另起一行定义这些操作：

action className "reference" "tooltip"
click className href "url" "tooltip"

action可以是link
className 是类的名称
reference 可以是一个URL链接
（可选）tooltip是一段鼠标悬浮后显示的文本

示例

```mermaid
classDiagram
class Shape
	link Shape "http://www.github.com" "This is a tooltip for a link"
class Shape2
	click Shape2 href "http://www.github.com" "This is a tooltip for a link"
```

您可以使用 note "第一行\n第二行" 在图表上添加注释。也可以使用: note for <类名> "第一行\n第二行" 为特定的类添加注释。

十一、使用场景实例

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

示例代码

```mermaid
classDiagram
	鸟 --|> 动物 : 继承
	翅膀 "2" --|> "1" 鸟 : 组合
	动物 ..> 氧气 : 依赖
  	动物 ..> 水 : 依赖、
  	
  	class 动物 {
   		<<interface>>
    	+有生命
    	+新陈代谢(氧气, 水)
    	+繁殖()
	}
	
	class 鸟 {
		+羽毛
		+有角质喙没有牙齿
		+下蛋()
	}
	
	class 鸟 {
		+羽毛
		+有角质喙没有牙齿
		+下蛋()
	}
```