Mermaid-类图

摘录自 类图 | Mermaid 中文网 (nodejs.cn)

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

Code

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

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

语法

类

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

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

Code

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

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

定义一个类类

定义类有两种方法:

• 显示使用关键字 class (如 class Animal) 来定义 Animal 类。
• 通过 relatinoship 一次定义两个类及其关系。例如, Vehicle <|-- Car。

Code

classDiagram
	class Animal
	Vehicle <|-- Car

classDiagram
	class Animal
	Vehicle <|-- Car

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

类别标签

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

Code:

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

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

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

Code:

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

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

定义类的成员

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

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

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

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

Code:

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

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

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

Code:

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +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
}

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

通用类型

泛型可以表示为类定义的一部分以及类成员/返回类型。 为了将该项目表示为通用项，请将该类型括在 ~ (tilde) 内。 支持 嵌套 类型声明（例如 List<List<int>>），但当前不支持包含逗号的泛型。 （如 List<List<K, V>>）

请注意，当在类定义中使用泛型时，泛型类型不被视为类名称的一部分。 IE。： 对于任何需要引用类名的语法，你需要删除定义的类型部分。 这也意味着 mermaid 目前不支持两个具有相同名称但泛型类型不同的类。

Code:

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~~

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~~

能见度

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

• + 民众
• - 私有的
• # 受保护
• ~ 封装/内部

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

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

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

• $ 静态例如： `String someField

定义关系

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

[classA][Arrow][ClassB]

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

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

Code:

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

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

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

Code:

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)

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

Code:

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

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

双向关系

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

Code:

classDiagram
    Animal <|--|> Zebra

classDiagram
    Animal <|--|> Zebra

语法如下：

[Relation Type][Link][Relation Type]

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

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

Link 可以是以下之一：

类型	描述
–	实线
…	虚线

定义命名空间

命名空间对类进行分组。

Code:

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 和
• 0..n 零到 n
• 1..n 一对多

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

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

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

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

类上的注释

可以使用标记来注释类，以提供有关该类的附加元数据。 这可以更清楚地表明其性质。 一些常见的注释包括：

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

注释在开头 << 和结尾 >> 内定义。 有两种方法可以向类添加注释，两种方法的输出都是相同的：

• 在 单独的线 中定义了一个类之后：

Code:

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

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

• 在 嵌套结构 中连同类定义：

Code:

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

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

这种方式在类注释 <<xxx>> 会在html中报错, 在 <<>> 与注释中添加空格

注释

可以在类图中输入注释，解析器将忽略该注释。 注释需要独占一行，并且必须以 %%（双百分号）开头。 下一个换行符之前的任何文本都将被视为注释，包括任何类图语法。

Code:

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

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

设置图表的方向

对于类图，你可以使用方向语句来设置图渲染的方向：

Code:

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

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 是与操作关联的节点的 id
• Reference 可以是 url 链接，也可以是回调的函数名称。
• （可选）tooltip 是当鼠标悬停在元素上时要显示的字符串（注意：tooltip 的样式由类.mermaidTooltip 设置。）
• note: 将以 nodeId 作为参数调用回调函数。

图表注释

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

Code:

classDiagram
    note "This is a general note"
    note for Student "This is a note for a class"
    class Student{
    	+String name
    }

classDiagram
    note "This is a general note"
    note for Student "This is a note for a class"
    class Student{
    	+String name
    }

网址链接

Code:

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
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"

样式

设置节点样式 (v<MERMAID_RELEASE_VERSION>+)

可以使用 style 关键字将特定样式（例如较粗的边框或不同的背景颜色）应用于单个节点。

Code:

classDiagram
  class Animal
  class Mineral
  style Animal fill:#f9f,stroke:#333,stroke-width:4px
  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

classDiagram
  class Animal
  class Mineral
  style Animal fill:#f9f,stroke:#333,stroke-width:4px
  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5