【MarkDown】CSDN Markdown之类图classDiagram详解

类图

类图(Class diagram)是显示了模型的静态结构，特别是模型中存在的类、类的内部结构以及它们与其他类的关系等。类图不显示暂时性的信息。类图是面向对象建模的主要组成部分。它既用于应用程序的系统分类的一般概念建模，也用于详细建模，将模型转换成编程代码。类图也可用于数据建模。                                         – 百度百科

类图是面向对象建模的主要构建块。它被用于应用程序结构的一般概念建模以及详细建模，从而将模型转换为编程代码。类图也可用于数据建模。类图中的类同时代表了应用程序中的主要元素、交互以及需要编程的类。

Mermaid可以渲染类图。

代码

CSDN mermaid v8.14.0 不支持标题title、不支持一般备注note 、不支持类备注note for
以下是mermaid v10.2.3的代码

```mermaid
—
title: 动物示例
—
classDiagram
note “从鸭子到斑马”
动物 <|-- 鸭子
note for 鸭子 “会飞\n会游泳\n会潜水\n会叫”
动物 <|-- 鱼
动物 <|-- 斑马
动物 : +int 年龄
动物 : +String 性别
动物: +是不是哺乳动物()
动物: +繁衍()
class 鸭子{
+String 喙的颜色
+游泳()
+嘎嘎()
}
class 鱼{
-int 尾巴大小
-是否能吃()
}
class 斑马{
+bool 是否野生
+奔跑()
}
```

---
title: 动物示例
---
classDiagram
    note "从鸭子到斑马"
    动物 <|-- 鸭子
    note for 鸭子 "会飞\n会游泳\n会潜水\n会叫"
    动物 <|-- 鱼
    动物 <|-- 斑马
    动物 : +int 年龄
    动物 : +String 性别
    动物: +是不是哺乳动物()
    动物: +繁衍()
    class 鸭子{
        +String 喙的颜色
        +游泳()
        +嘎嘎()
    }
    class 鱼{
        -int 尾巴大小
        -是否能吃()
    }
    class 斑马{
        +bool 是否野生
        +奔跑()
    }

语法

类

UML提供了表示类成员的机制，例如属性和方法，以及关于它们的附加信息。图中单个实例类包含三个隔间:

• 顶部隔间包含类的名称。它以粗体居中显示，第一个字母大写。它还可以包含描述类特征的注释文本，它是可选的。
• 中间隔间包含类的属性。它们左对齐，第一个字母为小写。
• 底部隔间包含类的方法。它是一些可以执行的操作。它们也是左对齐的，第一个字母是小写的。

代码

CSDN mermaid v8.14.0 不支持标题title
以下是mermaid v10.2.3的代码

```mermaid
—
title: 银行示例
—
classDiagram
class 银行帐户
银行帐户 : +String 所有者
银行帐户 : +Bigdecimal 余额
银行帐户 : +存钱(金额)
银行帐户 : +取钱(金额)
```

---
title: 银行示例
---
classDiagram
    class 银行帐户
    银行帐户 : +String 所有者
    银行帐户 : +Bigdecimal 余额
    银行帐户 : +存钱(金额)
    银行帐户 : +取钱(金额)

定义类

这里有两种方式定义类:

• 明确使用关键字class,如：class 动物，这样就定义了动物类。
• 通过类与类之间的关系来定义两个类及确定其关系。例如, 交通工具 <|-- 汽车.

代码

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

命名约定：类名只由字母数字(包括unicode字符)、下划线(_)和破折号(-) 组成。

类标签

如果需要给类添加标签，你可以使用下面的语法:

代码

CSDN mermaid v8.14.0 不支类标签
以下是mermaid v10.2.3的代码

```mermaid
classDiagram
class 动物[“带有标签的动物”]
class 汽车[“带有*!符号的汽车”]
动物 --> 汽车
```

classDiagram
    class 动物["带有标签的动物"]
    class 汽车["带有*!符号的汽车"]
    动物 --> 汽车

您还可以使用反标记(```)来转义标签中的特殊字符:

代码

```mermaid
classDiagram
class `动物类!`
class `汽车类`
`动物类!` --> `汽车类`
```

定义类的成员

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

Mermaid根据括号()是否存在来区分属性和函数/方法。带()的将被当做函数/方法，所有其他的内容都被当做属性。

有两种方法可以定义类的成员，无论使用哪种语法来定义成员，呈现的效果都是相同的。两种不同的方式是：

• 成员显示在类名后并使用冒号(:)进行关联，对于一次定义一个成员很有用。如：

代码

```mermaid
classDiagram
class 银行账户
银行账户 : +String 所有者
银行账户 : +BigDecimal 余额
银行账户 : +存钱(金额)
银行账户 : +取钱(金额)
```

• 使用花括号{}对成员和类进行关联, 成员在花括号内进行分组。适用于一次定义多个成员。如：

代码

```mermaid
classDiagram
class 银行账户{
+String 所有者
+BigDecimal 余额
+存钱(金额)
+取钱(金额)
}
```

返回值类型

您可以选择在方法/函数的结尾添加对返回的数据类型定义（注意：最后的字符和返回类型之间必须有空格）。例如：

代码

```mermaid
classDiagram
class 银行账户{
+String 所有者
+BigDecimal 余额
+存钱(金额) bool
+取钱(金额) int
}
```

泛型类型

可以使用泛型类型如List<int>作为字段、参数和返回类型来定义成员，定义方法是将类型括在~（波浪号）中。支持嵌套的类型声明，如List<List<int>>。

泛型可以表示为类定义的一部分，也可以表示为方法/函数的参数或返回值：

代码

```mermaid
classDiagram
class 正方形~形状~{
int 序号
List~int~ 点列表
`设置点列表(List~int~ 点列表)
`获取点列表() List~int~
}
正方形 : -List~string~ 消息列表
正方形 : +设置消息列表(List~string~ 消息列表)
正方形 : +获取消息列表() List~string~
正方形 : +获取距离矩阵() List~List~int~~
```

可视性

描述类成员（即属性或方法/函数）的可见性（或封装性）时，可以在成员名称前添加可选标记：

• + 公共的成员
• - 私有成员
• # 保护成员
• ~ 包内/内部成员

注意：你还可以通过在方法定义的结尾处添加以下标记来包括额外的分类器，即在()之后或返回类型之后：

• * 抽象方法/函数 如: someAbstractMethod()* 或 someAbstractMethod() int*
• $ 静态方法/函数 如: someStaticMethod()$ 或 someStaticMethod() String$

注意：你还可以通过在字段定义的最后添加以下标记来包括额外的分类器：

• $ 静态属性 如: String someField$

关系定义

关系是一个通用术语，涵盖了类图和对象图中所发现的具体逻辑连接类型。

[类A][箭头][类B]
在 UML 中为类定义了八种不同类型的关系，目前得到支持包括:

类型	描述
<|–	继承
*–	组合
o–	聚合
–>	关联
–	链接(实线)
..>	依赖
..|>	实现
..	链接(虚线)

代码

```mermaid
classDiagram
类A <|-- 类B
类C *-- 类D
类E o-- 类F
类G <-- 类H
类I – 类J
类K <… 类L
类M <|… 类N
类O … 类P
```

我们可以使用标签描述两个类之间关系的性质。同时，箭头头部也可以用在相反的方向上：

• 继承类：指的是一个类从另一个类继承属性和方法的过程。

• 组合类：指的是一个类由其他几个类组合而成的情况。它是一种强关联关系，表示一个对象是由多个其他对象组成的。

• 聚合类：也是由多个类组合而成，但是它是一种弱关联关系，表示一个对象是由多个其他对象聚合而成的。

• 关联类：表示不同类之间相互关联的情况，但是它们的关系并不像继承、组合、聚合那样紧密。

• 依赖类：表示一个类需要另一个类来完成某项任务，但是它们之间并不存在真正的关联。

• 实现类：表示一个类实现了一个接口或抽象类，必须实现其中所有的方法。

代码

```mermaid
classDiagram
类A --|> 类B : 继承
类C --* 类D : 组合
类E --o 类F : 聚合
类G --> 类H : 关联
类I – 类J : 链接(实线)
类K …> 类L : 依赖
类M …|> 类N : 实现
类O … 类P : 链接(虚线)
```

关系标签

可以在关系上添加标签文本：

[类A][箭头][类B]:标签文本

代码

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

双向关系

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

代码

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

以下是语法:

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

类型	描述
<|	继承
\*	组合
o	聚合
>	关联
<	依赖
|>	实现
“链接”可以是以下之一:

类型	描述
--	实线
..	虚线

定义命名空间

命名空间可以对类进行分组。

代码

CSDN mermaid v8.14.0 不支持命名空间
以下是mermaid v10.2.3的代码

```mermaid
classDiagram
namespace 基础形状 {
class 三角形
class 矩形 {
double 宽
double 高
}
}
```

classDiagram
namespace 基础形状 {
    class 三角形
    class 矩形 {
      double 宽
      double 高
    }
}

关系中的基数/多重性

类图中的多重性或基数表示一个类的实例可以链接到另一个类的实例的数量。例如，每家公司将拥有一个或多个员工（不为零），每个员工目前只在一家公司工作或未工作。

多重性符号位于关联的末尾附近。

不同的基数选项包括 :

• 1 只有1个
• 0..1 0个或这1个
• 1..\* 1个或无数个
• \* 无数个
• n n个
• 0..n 0个到n个之间
• 1..n 1个到n个之间

基数可以通过在给定箭头的前面或后面放置包含"引号的文本定义。例如：

[类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 形状{
<<接口>>
顶点数
`绘制()
}
```

设置类图的方向：

在类图中，您可以使用方向语句direction 方向来设置类图呈现的方向：

代码

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

交互

可以将点击事件绑定到节点。单击可以导致JavaScript回调或打开一个链接，该链接将在新的浏览器标签页中打开。注意：当使用securityLevel='strict'时，此功能被禁用；使用securityLevel='loose'时，此功能被启用。

您可以在所有类声明后的另起一行上定义这些操作。

action 类名 "引用" "提示文本"
click 类名 call callback() "提示文本"
click 类名 href "url" "提示文本"

• action action 可以是 link 或 callback，具体取决于您要调用哪种类型进行交互。
• 类名 是与操作关联的节点的 ID。
• 引用 是 URL 链接或回调函数名称。如果 action 为 link，则它应该是一个字符串类型的URL链接。如果 action 为 callback，则它应该是一个函数的名称。
• （可选）提示文本 是鼠标悬停在元素上时显示的字符串（注意：提示信息的样式由 .mermaidTooltip 类设置）。
• 注意: 回调函数将以 nodeId 作为参数进行调用。

备注

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

示例

代码

```mermaid
classDiagram
class 我的类{
}
```

URL 链接:

代码

```mermaid
classDiagram
class 形状1
link 形状1 “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字”
class 形状2
click 形状2 href “https://blog.csdn.net/chenlu5201314” “这是链接的提示文字”
```

回调函数:

代码

```mermaid
classDiagram
class 形状1
callback 形状1 “callbackFunction” “这是回调函数的提示文字”
class 形状2
click 形状2 call callbackFunction() “这是回调函数的提示文字”
```

<script>
  const 回调函数 = function () {
    alert('已触发回调!');
  };
</script>

代码

```mermaid
classDiagram
class 类01
class 类02
callback 类01 “回调函数” “回调提示文字”
link 类02 “https://blog.csdn.net/chenlu5201314” “这是一个链接”
class 类03
class 类04
click 类03 call 回调函数() “回调提示文字”
click 类04 href “https://blog.csdn.net/chenlu5201314” “这是一个链接”
```

信息 自版本v0.5.2 起，提示文字功能和链接到 URL 的功能可用。

回调方法 不能是关键字callback。

以下是在 HTML 页面中使用交互链接的完整示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 图表示例</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
  
</head>
<body>
  <pre class="mermaid">
    classDiagram
    动物 <|-- 鸭子
    动物 <|-- 鱼
    动物 <|-- 斑马
    动物 : +int 年龄
    动物 : +String 性别
    动物: +是不是哺乳动物()
    动物: +繁衍()
    class 鸭子{
      +String 喙的颜色
      +游泳()
      +嘎嘎()
      }
    class 鱼{
      -int 尾巴大小
      -是否能吃()
      }
    class 斑马{
      +bool 是否野生
      +奔跑()
      }

      callback 鸭子 "回调方法" "提示文字"
      link 斑马 "https://blog.csdn.net/chenlu5201314" "这是一个链接"
  </pre>

  <script>
    const 回调方法 = function () {
      alert('已处方回调');
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>
</html>

样式

节点样式

可以为单个节点应用特定的样式，例如较粗的边框或不同的背景颜色。这可以通过在 CSS 样式中预定义类来完成，然后可以使用 cssClass 语句或 ::: 的简写从图表定义中应用它们。

<style>
  .styleClass > rect {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

将该类附加到特定节点：

cssClass "nodeId1" styleClass;

也可以通过一条语句将该类附加到一组节点：
cssClass “nodeId1,nodeId2” styleClass;

一种更简短的添加类的形式是使用 ::: 运算符将类名附加到节点：

代码

或:

代码

使用这种简写方法时，不能同时使用关系语句和添加 cssClasses。

由于类图的现有标记存在限制，目前无法在类图本身中定义 css 类。敬请期待！

默认样式

类图的主要样式是使用预设一定数量的 CSS 类来完成的。在渲染时，这些类从位于 src/themes/class.scss 文件中提取出来。下面介绍了在此处使用的类：

类	描述
g.classGroup text	普通类文本的样式
classGroup .title	普通类标题的样式
g.classGroup rect	类图矩形框的样式
g.classGroup line	类图链接的样式
.classLabel .box	类标签框的样式
.classLabel .label	类标签文本的样式
composition	组合箭头和箭头线的样式
aggregation	聚合箭头和箭头线的样式（虚线或实线）
dependency	依赖箭头和箭头线的样式

表单示例

body {
  background: white;
}

g.classGroup text {
  fill: $nodeBorder;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-family: var(--mermaid-font-family);
  font-size: 10px;

  .title {
    font-weight: bolder;
  }
}

g.classGroup rect {
  fill: $nodeBkg;
  stroke: $nodeBorder;
}

g.classGroup line {
  stroke: $nodeBorder;
  stroke-width: 1;
}

.classLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: $nodeBkg;
  opacity: 0.5;
}

.classLabel .label {
  fill: $nodeBorder;
  font-size: 10px;
}

.relation {
  stroke: $nodeBorder;
  stroke-width: 1;
  fill: none;
}

@mixin composition {
  fill: $nodeBorder;
  stroke: $nodeBorder;
  stroke-width: 1;
}

#compositionStart {
  @include composition;
}

#compositionEnd {
  @include composition;
}

@mixin aggregation {
  fill: $nodeBkg;
  stroke: $nodeBorder;
  stroke-width: 1;
}

#aggregationStart {
  @include aggregation;
}

#aggregationEnd {
  @include aggregation;
}

#dependencyStart {
  @include composition;
}

#dependencyEnd {
  @include composition;
}

#extensionStart {
  @include composition;
}

#extensionEnd {
  @include composition;
}

---

配置

敬请期待！