obsidian中Mermaid语法——UML类图 (Class Diagram)

使用关键字class，如会定义Animal类。通过关系，在一次定义中同时定义两个类及其关系。例如，。fill:#333;stroke:1;fill:none;important;important;important;important;important;important;important;important;important;important;important;important;i

harinefelibata

5920人浏览 · 2024-03-18 08:34:45

harinefelibata · 2024-03-18 08:34:45 发布

UML类图是面向对象建模的主要构建块。
它用于对应用程序的结构进行一般概念化建模，并用于详细建模以将模型转换为编程代码。
类图也可用于数据建模。
类图中的类表示应用中的主要元素、交互以及要编写的类。

Mermaid可以渲染类图：

---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

在这里插入图片描述

语法

Class

UML提供了表示类成员（如属性和方法）及其附加信息的机制。图表中一个类的一个实例包含三个部分：

顶部部分包含类的名称，使用粗体、居中，并且首字母大写显示。它也可能包含可选注释文本来描述类的性质。
中间部分包含类的属性。它们左对齐并且首字母小写。
底部部分包含类可以执行的操作。它们也左对齐并且首字母小写。

---
title: Bank example
---
classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawal(amount)

在这里插入图片描述

定义一个类

有两种方法来定义一个类：

使用关键字class，如class Animal 会定义Animal类。
通过关系，在一次定义中同时定义两个类及其关系。例如，Vehicle <|-- Car。

classDiagram
    class Animal
    Vehicle <|-- Car

命名约定：类名只能由字母数字字符（包括 Unicode）、下划线和连字符(-)组成。

类别标签

如果你需要为一个类安排标签，可以使用如下语法：

classDiagram
	class Animal["Animal with a label"]
	class Car["Car with *! symbols"]
	Animal --> Car

在这里插入图片描述

您也可以使用反引号来转义标签中的特殊字符：

classDiagram
    class `Animal Class!`
    class `Car Class`
    `Animal Class!` --> `Car Class`

定义类中成员

UML 提供了表示类成员（如属性和方法）及其附加信息的方法。
Mermaid 根据圆括号 ( ) 是否存在来区分属性和函数/方法。有 ( ) 的被视为函数/方法，其余的被视为属性。
有两种方式来定义类成员，无论使用哪种语法来定义成员，输出结果都是一样的。这两种不同的方法是：

使用: (冒号) 后跟成员名称关联一个类成员，有助于一次定义一个成员。例如：

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

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

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +withdrawal(amount)
}

返回类型

你可以可选择性的用返回的数据类型结束一个方法/函数的定义（注：在最后一个)和返回类型之间必须有一个空格）。例如：

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

泛型类型

泛型可以表示为类定义的一部分，也可以表示为类成员/返回类型。为了表示一个通用项，你可以用 ~（波浪线）括住该类型。支持嵌套类型的声明，如List<List>，但目前不支持包含逗号的泛型(例如 List<List<K, V>> )。

注：当在类定义中使用泛型时，泛型类型并不被认为是类名的一部分。也就是说，在任何需要引用类名的语法中，都需要去掉定义中的类型部分。这也意味着 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~
Square : +getDistanceMatrix() List~List~int~~

可见性（成员保护）

为了描述一个类（即类成员）中的属性或方法/函数的可见性（或封装性），可以在该成员的名称前使用可选符号：

+公开(public)
-私有(private)
# 保护 (protected)
~ 包 / 内部(package)

注: 您还可以通过在方法定义末尾添加以下标记来为方法添加其他分类器，即：在 ( ) 或返回类型之后：

* 摘要: 例如：someAbstractMethod()* 或者 someAbstractMethod() int*

$ 静态: 例如：someStaticMethod()$ 或者 someStaticMethod() String$

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

静态例如：String someField$

定义关系

关系是类图和对象图中所见逻辑连接类型的总称。
[classA] [Arrow] [classB]
目前支持的UML类中定义了8种不同类型的关系：

类型	详细描述
`<\|--`	继承
`*--`	组合
`o--`	聚合
`-->`	关联
`--`	链接（实线）
`..>`	依赖
`..\|>`	实现
`..`	链接（虚线）

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

我们可以用标签来描述两个类之间的关系的本质。此外，箭头也可以朝相反的方向使用：

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

classDiagram
classA <|-- classB : implements
classC *-- classD : composition
classE o-- classF : aggregation

双向关系

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

classDiagram
    Animal <|--|> Zebra

以下是语法：

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

关系类型可以是：

类型	详细描述
`<\|`	继承
`\*`	组合
`o`	聚合
`>`	关联
`<`	关联
`\|>`	实现

Link 可以是其中之一：

类型	详细描述
`--`	实线
`..`	虚线

定义命名空间

命名空间分组类。

classDiagram
namespace BaseShapes {
    class Triangle
    class Rectangle {
      double width
      double height
    }
}

classDiagram
namespace BaseShapes {
    class Triangle
    class Rectangle {
      double width
      double height
    }
}

关系中的基数/多重性

在类图中，多重性或卡尔迪纳利性表示一个类的实例可以链接到另一个类的一个实例的数量。例如，每个公司都会有一个或多个员工（不为零），而每个员工目前在零个或一个公司工作。

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

不同的基数选项包括：

1 只有 1
0..1 零或一
1..* 一个或多个
* 多个
n {其中 n>1 }
0..n 从零到 n {其中 n>1 }
1..n 从一到 n {其中 n>1 }

通过在给定箭头之前或之后将文本选项放在"引号中，可以轻松定义基数。例如：

[classA] "cardinality1" [Arrow] "cardinality2" 
[ClassB]:LabelText

classDiagram
    Customer "1" --> "*" Ticket
    Student "1" --> "1..*" Course
    Galaxy --> "many" Star : Contains

类的注释

可以使用标记为类添加元数据，以提供有关该类的额外信息。这可以更清楚地说明其性质。一些常见的注释包括：

<< 接口(interface) >> 表示接口类
<< 抽象 (abstract)>> 表示抽象类
<< 服务 (service)>> 表示服务类
<< 枚举 (enumeration)>> 表示枚举类型

注释在双尖括号<< >>中定义。有两种方法可以给一个类添加注释，输出结果都是一样的：

在定义类之后的单独一行中：

classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()

在嵌套结构中，与类定义一起：

classDiagram
class Shape{
    <<interface>>
    noOfVertices
    draw()
}
class Color{
    <<enumeration>>
    RED
    BLUE
    GREEN
    WHITE
    BLACK
}

注释

可以在类图中输入注释，解析器会忽略这些注释。注释必须独占一行，并以%%(双百分号)开头。任何文本直到下一行都会被视为注释，包括类图语法。

classDiagram
%% This whole line is a comment classDiagram class Shape <<interface>>
class Shape{
    <<interface>>
    noOfVertices
    draw()
}

设置图表方向

使用类图，您可以使用方向语句来设置图表的方向：

classDiagram
  direction RL
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides

互动

可以为节点绑定点击事件。点击会触发 JavaScript 回调，或者在新浏览器选项卡中打开链接。注意：当使用 securityLevel='strict' 时，此功能会被禁用，并且在使用 securityLevel='loose' 时才会启用。

在所有类都声明之后，您将在单独的一行中定义这些操作。

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"

action 是链接(link)或回调(callback)，具体取决于您想要调用哪种交互。
className 是与 action 关联的节点的 id
reference 可以是 URL 链接，也可以是回调函数的名称。
(可选) tooltip 是当悬停在元素上时要显示的字符串（注意：提示框的样式由 .mermaidTooltip 类设置）。
注意：回调函数将带有 nodeId 作为参数被调用。

注释

可以使用note"line1\nline2"这样的笔记在图表中添加注释。还可以为特定类使用“类名”这样的注释来添加注释“行1 行2”。

示例

classDiagram
    note "This is a general note"
    note for MyClass "This is a note for a class"
    class MyClass{
    }

classDiagram
    note "This is a general note"
    note for MyClass "This is a note for a class"
    class MyClass{
    }

翻译结果：

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

反馈：

classDiagram
class Shape
callback Shape "callbackFunction" "This is a tooltip for a callback"
class Shape2
click Shape2 call callbackFunction() "This is a tooltip for a callback"

<script>
  const callbackFunction = function () {
    alert('A callback was triggered');
  };
</script>

classDiagram
    class Class01
    class Class02
    callback Class01 "callbackFunction" "Callback tooltip"
    link Class02 "https://www.github.com" "This is a link"
    class Class03
    class Class04
    click Class03 call callbackFunction() "Callback tooltip"
    click Class04 href "https://www.github.com" "This is a link"

从版本 0.5.2 开始，有了工具提示功能以及链接到 URL 的能力。

初学者提示——在 HTML 页面中使用交互式链接的完整示例：

<body>
  <pre class="mermaid">
    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
      }
    class Fish{
      -int sizeInFeet
      -canEat()
      }
    class Zebra{
      +bool is_wild
      +run()
      }

      callback Duck callback "Tooltip"
      link Zebra "https://www.github.com" "This is a link"
  </pre>

  <script>
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

样式

设置节点样式

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

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

然后将该类附加到特定节点：

cssClass "nodeId1" styleClass;

也可以在一行中将一个类附加到节点列表：

cssClass "nodeId1,nodeId2" styleClass;

添加类的更短形式是使用:::操作符将类名附加到节点：

classDiagram
    class Animal:::styleClass

或者：

classDiagram
    class Animal:::styleClass {
        -int sizeInFeet
        -canEat()
    }

不能使用此简写方法在关系语句的同时添加 cssClass。
由于现有类图标记的局限性，目前无法在图表内部定义 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;
}