Mermaid 中文网

主题

类图 ​

🌐 Class diagrams

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

——维基百科

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

🌐 The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.

Mermaid 可以渲染类图。

🌐 Mermaid can render class diagrams.

语法 ​

🌐 Syntax

类 ​

🌐 Class

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

🌐 UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them. A single instance of a class in the diagram contains three compartments:

  • 顶部部分包含类的名称。它以加粗形式居中打印，并且首字母大写。它也可能包含可选的注释文本，描述类的性质。
  • 中间部分包含类的属性。它们左对齐，并且首字母小写。
  • 底部的部分包含类可以执行的操作。它们也是左对齐的，并且首字母小写。

定义一个类 ​

🌐 Define a class

定义一个类有两种方式：

🌐 There are two ways to define a class:

  • 显式使用关键字 class，例如 class Animal，这将定义 Animal 类。
  • 通过一种关系，它同时定义两个类及它们之间的关系。例如，Vehicle <|-- Car。

命名规范：类名应仅由字母数字字符（包括 Unicode）、下划线和破折号（-）组成。

🌐 Naming convention: a class name should be composed only of alphanumeric characters (including unicode), underscores, and dashes (-).

类别标签 ​

🌐 Class labels

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

🌐 In case you need to provide a label for a class, you can use the following syntax:

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

🌐 You can also use backticks to escape special characters in the label:

定义类的成员 ​

🌐 Defining Members of a class

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

🌐 UML provides mechanisms to represent class members such as attributes and methods, as well as additional information about them.

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

🌐 Mermaid distinguishes between attributes and functions/methods based on if the parenthesis () are present or not. The ones with () are treated as functions/methods, and all others as attributes.

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

🌐 There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :

  • 使用 :（冒号）后跟成员名称来关联类的成员，这对于一次定义一个成员非常有用。例如：
  • 使用 {} 括号关联类的成员，其中成员被归类在大括号内。适合一次定义多个成员。例如：

返回类型 ​

🌐 Return Type

可选地，你可以在方法/函数定义的末尾指定将返回的数据类型（注意：最后的 ) 和返回类型之间必须有一个空格）。例如：

🌐 Optionally you can end a method/function definition with the data type that will be returned (note: there must be a space between the final ) and the return type). An example:

泛型类型 ​

🌐 Generic Types

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

注意 当在类定义中使用泛型时，泛型类型不被视为类名的一部分。也就是说：对于任何需要引用类名的语法，你需要去掉定义中的类型部分。这也意味着 Mermaid 当前不支持两个类具有相同名称但不同泛型类型的情况。

可见性 ​

🌐 Visibility

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

🌐 To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:

  • + 公开
  • - 私密
  • # 保护
  • ~ 包/内部

注意 你也可以通过在方法定义的 末尾 添加以下符号来包含额外的 _ 修饰符 _，例如：在 () 后或返回类型后：

  • * 抽象，例如：someAbstractMethod()* 或 someAbstractMethod() int*
  • $ 静态，例如：someStaticMethod()$ 或 someStaticMethod() String$

注意 你也可以通过在字段定义的末尾添加以下符号来包含额外的 _ 分类器 _：

  • $ 静态，例如：String someField$

定义关系 ​

🌐 Defining Relationship

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

🌐 A relationship is a general term covering the specific types of logical connections found on class and object diagrams.

[classA][Arrow][ClassB]

在 UML 中，为类定义了八种不同类型的关系，目前支持如下：

🌐 There are eight different types of relations defined for classes under UML which are currently supported:

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

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

🌐 We can use the labels to describe the nature of the relation between two classes. Also, arrowheads can be used in the opposite direction as well:

关系上的标签 ​

🌐 Labels on Relations

可以给关系添加标签文本：

🌐 It is possible to add label text to a relation:

[classA][Arrow][ClassB]:LabelText

双向关系 ​

🌐 Two-way relations

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

🌐 Relations can logically represent an N:M association:

语法如下：

🌐 Here is the syntax:

[Relation Type][Link][Relation Type]

Relation Type 可以是以下之一：

🌐 Where Relation Type can be one of:

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

而 Link 可以是以下之一：

🌐 And Link can be one of:

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

棒棒糖界面 ​

🌐 Lollipop Interfaces

类还可以被赋予一种特殊的关系类型，该类型在类上定义了一个甜甜圈接口。甜甜圈接口使用以下语法定义：

🌐 Classes can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax:

  • bar ()-- foo
  • foo --() bar

带棒棒糖的界面（栏）连接到类（foo）。

🌐 The interface (bar) with the lollipop connects to the class (foo).

注意：每个定义的接口都是唯一的，旨在不在类之间共享，也不允许多个连接指向它。

🌐 Note: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it.

定义命名空间 ​

🌐 Define Namespace

命名空间用于分组类。

🌐 A namespace groups classes.

关系的基数 / 多重性 ​

🌐 Cardinality / Multiplicity on relations

类图中的多重性或基数表示一个类的实例可以与另一个类的实例关联的数量。例如，每个公司都会有一个或多个员工（不能为零），而每个员工当前任职于零个或一个公司。

🌐 Multiplicity or cardinality in class diagrams indicates the number of instances of one class that can be linked to an instance of the other class. For example, each company will have one or more employees (not zero), and each employee currently works for zero or one companies.

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

🌐 Multiplicity notations are placed near the end of an association.

不同的基数选项有：

🌐 The different cardinality options are :

  • 1 只有 1
  • 0..1 零或一
  • 1..* 一个或多个
  • * 许多
  • n n（其中 n>1）
  • 0..n 从零到 n（其中 n>1）
  • 1..n 从 1 到 n（其中 n>1）

基数可以通过在给定箭头的前面或后面将文本选项用引号 " 括起来来轻松定义。例如：

🌐 Cardinality can be easily defined by placing the text option within quotes " before or after a given arrow. For example:

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

关于类的注解 ​

🌐 Annotations on classes

可以使用标记对类进行注解，以提供关于该类的额外元数据。这可以更清楚地表明其性质。一些常见的注解包括：

🌐 It is possible to annotate classes with markers to provide additional metadata about the class. This can give a clearer indication about its nature. Some common annotations include:

  • <<Interface>> 用于表示一个接口类
  • <<Abstract>> 用于表示抽象类
  • <<Service>> 用于表示一个服务类
  • <<Enumeration>> 用于表示枚举

注解定义在开头的 << 和结尾的 >> 之间。有两种方法可以向类添加注解，无论哪种方式，输出结果都是相同的：

🌐 Annotations are defined within the opening << and closing >>. There are two ways to add an annotation to a class, and either way the output will be same:

提示： 在 Mermaid 类图中，像 <<interface>> 这样的注解可以通过两种方式附加：

  • 与类定义在同一行 （推荐以保持一致性）：

  • 在类定义后单独一行：

两种方法都完全支持，并且会生成相同的图表。
不过，推荐使用 同一行样式，以提高可读性并在图表中保持一致的格式。

  • 在定义类之后的单独一行中：
  • 在类定义的嵌套结构中：

注释 ​

🌐 Comments

注释可以在类图中输入，解析器会忽略它们。注释需要单独占一行，并且必须以 %%（两个百分号）开头。直到下一行的所有文本都会被视为注释，包括任何类图语法。

🌐 Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with %% (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.

设置图表的方向 ​

🌐 Setting the direction of the diagram

使用类图时，你可以使用方向声明来设置图表显示的方向：

🌐 With class diagrams you can use the direction statement to set the direction in which the diagram will render:

互动 ​

🌐 Interaction

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

🌐 It is possible to bind a click event to a node. The click can lead to either a javascript callback or to a link which will be opened in a new browser tab. Note: This functionality is disabled when using securityLevel='strict' and enabled when using securityLevel='loose'.

你会在所有类声明之后的单独一行上定义这些操作。

🌐 You would define these actions on a separate line after all classes have been declared.

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
  • action 可以是 link 或 callback，取决于你希望调用哪种类型的交互
  • className 是与该动作相关联的节点的 ID
  • reference 可以是 URL 链接，也可以是回调函数的名称。
  • (可选) 工具提示是当鼠标悬停在元素上时显示的字符串（注意：工具提示的样式由类 .mermaidTooltip 设置。）
  • 注意：回调函数将以 nodeId 作为参数被调用。

注意 ​

🌐 Notes

可以使用 note "line1 line2" 在图表上添加注释。可以使用 note for <CLASS NAME> "line1 line2" 为特定的类添加注释。

示例 ​

🌐 Examples

网址链接:

🌐 URL Link:

回调:

🌐 Callback:

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

成功 从版本 0.5.2 开始，工具提示功能和链接到 URL 的功能可用。

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

🌐 Beginner's tip—a full example using interactive links in an HTML page:

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>

样式 ​

🌐 Styling

为节点设置样式 ​

🌐 Styling a node

可以使用 style 关键字为单个节点应用特定样式，例如更粗的边框或不同的背景颜色。

🌐 It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the style keyword.

请注意，注释和命名空间不能单独设置样式，但支持主题。

🌐 Note that notes and namespaces cannot be styled individually but do support themes.

类 ​

🌐 Classes

比每次都定义样式更方便的方法是定义一个样式类，并将该类附加到需要不同外观的节点上。

🌐 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look.

类定义看起来像下面的示例：

🌐 A class definition looks like the example below:

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

此外，可以在一条语句中为多个类定义样式：

🌐 Also, it is possible to define style to multiple classes in one statement:

classDef firstClassName,secondClassName font-size:12pt;

将类附加到节点的操作如下：

🌐 Attachment of a class to a node is done as per below:

cssClass "nodeId1" className;

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

🌐 It is also possible to attach a class to a list of nodes in one statement:

cssClass "nodeId1,nodeId2" className;

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

🌐 A shorter form of adding a class is to attach the classname to the node using the ::: operator:

或者：

🌐 Or:

默认类 ​

🌐 Default class

如果一个类被命名为 default，它将应用于所有节点。特定的样式和类应该在此之后定义，以覆盖已应用的默认样式。

🌐 If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

CSS 类 ​

🌐 CSS Classes

也可以在 CSS 样式中预定义类，然后在图表定义中应用这些类，如下面的示例所示：

🌐 It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example below:

示例样式

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

示例定义

不能在使用此简写方法的同时添加 cssClasses 与关系声明。

配置 ​

🌐 Configuration

成员框 ​

🌐 Members Box

可以隐藏类节点的空成员框。

🌐 It is possible to hide the empty members box of a class node.

这是通过更改类图配置中的 hideEmptyMembersBox 值来完成的。有关如何编辑 Mermaid 配置的更多信息，请参见配置页面。

🌐 This is done by changing the hideEmptyMembersBox value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the configuration page.

Opens in mermaid.ai