类图

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

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

Code Chart 可以渲染类图。

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()
    }

句法

班级

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

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

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

定义一个类

定义类有两种方式：

• 显式使用关键字classclass Animal来定义 Animal 类。
• 通过一次定义两个类及其关系的关系。例如，Vehicle <|-- Car.

classDiagram
    class Animal
    Vehicle <|-- Car

命名约定：类名应仅由字母数字字符（包括 unicode）和下划线组成。

定义类的成员

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

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

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

• 使用:（冒号）后跟成员名称来关联类的成员，这对于一次定义一个成员很有用。例如：

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<int>) 中，用于字段、参数和返回类型。注意：目前不支持嵌套类型声明，例如。~List<List<int>>

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

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~

返回类型

或者，您可以使用将返回的数据类型结束方法/函数定义。

能见度

为了描述作为类（即类成员）一部分的属性或方法/函数的可见性（或封装），可以在该成员的名称之前放置可选符号：

• +上市
• -私人的
• #受保护
• ~包装/内部

请注意，您还可以通过在方法末尾添加以下符号来在方法定义中包含其他分类器，即：在：()

• *摘要例如：someAbstractMethod()*
• $静态例如：someStaticMethod()$

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

• $静态例如：String someField$

定义关系

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

[classA][Arrow][ClassB]

目前支持 UML 下为类定义的八种不同类型的关系：

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

这是语法：

[Relation Type][Link][Relation Type]

哪里Relation Type可以是以下之一：

并且Link可以是以下之一：

关系的基数/多重性

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

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

不同的基数选项是：

• 1只有1个
• 0..1零或一
• 1..*一个或多个
• *许多
• nn {其中 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是linkor callback，具体取决于您要调用的交互类型
• className是操作将与之关联的节点的 id
• reference可以是 url 链接，也可以是回调的函数名。
• （可选）tooltip 是悬停在元素上时显示的字符串（注意：tooltip 的样式由 .mermaidTooltip 类设置。）
• 注意：回调函数将以 nodeId 作为参数调用。

例子

网址链接：

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>
    var callbackFunction = function () {
      alert('A callback was triggered');
    };
</script>

成功从 0.5.2 版本开始提供工具提示功能和链接到 url 的能力。

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

<body>
  <div 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"
  </div>

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

造型

样式化节点

可以对单个节点应用特定样式，例如更粗的边框或不同的背景颜色。这是通过在 css 样式中预定义可以从图形定义中应用的类来完成的：

<style>
    .cssClass > rect{
        fill:#FF0000;
        stroke:#FFFF00;
        stroke-width:4px;
    }
</style>

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

    cssClass "nodeId1" cssClass;

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

    cssClass "nodeId1,nodeId2" cssClass;

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

classDiagram
    class Animal:::cssClass

或者：

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

不能同时使用此速记方法添加 cssClasses 作为关系语句。

由于类图现有标记的限制，目前无法在图本身内定义 css 类。

默认样式

类图的主要样式是使用预设数量的 css 类完成的。在渲染期间，这些类是从位于 src/themes/class.scss 的文件中提取的。此处使用的类如下所述：

示例样式表

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;
}