Markdown中插入类图（classDiagram）

参考网址：https://mermaid-js.github.io/mermaid/#/classDiagram类图是面向对象建模的主要构建基块。它用于应用程序结构的一般概念建模，以及将模型转换为编程代码的详细建模。类图也可用于数据建模。类图中的类表示主要元素、应用程序中的交互以及要编程的类。mermaid可以渲染类图。#mermaid-svg-lw05uaRjw2rW2Hl0 {font-fam

蔚蓝慕

2056人浏览 · 2022-06-19 18:19:18

蔚蓝慕 · 2022-06-19 18:19:18 发布

参考网址：https://mermaid-js.github.io/mermaid/#/classDiagram

类图

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

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

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

语法

类

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

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

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

定义类

有两种方法可以定义类：

使用关键字 class（如class Animal ）显式定义类。这定义了动物类
通过它们之间的关系定义两个类Vehicle <|-- Car。这定义了两个类车辆和汽车以及它们的关系。

classDiagram
    class Animal
    Vehicle <|-- Car

命名约定：类名应由字母数字和下划线字符组成。

定义类的成员

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)
    +withdrawl(amount)
}

返回类型

（可选）您可以方法/函数定义的后面表明将要返回的数据类型（注意：方法的末尾）和返回类型之间必须有一个空格)：

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

返回类型

（可选）您可以将返回的数据类型放在方法/函数定义后面。

可见性

要指定类成员（即任何属性或方法）的可见性，可以将这些表示法放在成员名称之前，但它是可选的：

+ Public
- Private
# Protected
~ Package/Internal

注意，您还可以通过在方法的末尾添加以下表示法（即：在：()之后

* Abstract e.g.: someAbstractMethod()*
$ Static e.g.: someStaticMethod()$

注释您还可以通过在字段名称的末尾添加以下表示法，在字段定义中包含其他分类器：

$ Static e.g.: String someField$

定义关系

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

[classA][Arrow][ClassB]

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

类型	描述
`<\|--`	继承Inheritance
`*--`	组成Composition
`o--`	集合体Aggregation
`-->`	关联Association
`--`	链接（实心）Link (Solid)
`..>`	依赖Dependency
`..\|>`	实现Realization
`..`	链接（虚线）Link (Dashed)

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

双向关系

关系可以通过多种方式进行：

classDiagram
    Animal <|--|> Zebra

语法如下：

[Relation Type][Link][Relation Type]

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

类型	描述
`<\|`	继承Inheritance
`*`	组成Composition
`o`	集合体Aggregation
`>`	关联Association
`<`	关联Association
`\|>`	实现Realization

并且Link可以是以下之一：

类型	描述
`--`	实线Solid
`..`	虚线Dashed

关系上的唯一性/多重性

注意：这里将cardinality翻译为唯一性，也许此翻译是错误的

类图中的多重性或唯一性表示一个类链接到另一个类的一个实例的实例数。例如，一家公司将有一名或多名员工，但每个员工只为一家公司工作。

多重性表示法放置在关联的末尾附近。

不同的基数选项是：

1 Only 1
0..1 Zero or One
1..* One or more
* Many
n n {where n>1}
0..n zero to n {where n>1}
1..n one to n {where n>1}

唯一性可以通过在给定箭头之前（可选）和之后（可选）的引号"内放置基数文本来轻松定义。

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

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

类的注释（annotation）

可以使用特定的标记文本对类进行注释，该文本类似于类的元数据，从而清楚地表明其性质。一些常见的注释示例可能是：

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

设置逻辑示意图的方向

With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example.

对于类图，你可以使用方向语句来设置图的呈现方向，就像本例中的一样。

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
引用是 url 链接或回调的函数名称。
(可选）工具提示是将鼠标悬停在元素上时要显示的字符串（注意：工具提示的样式由类 .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>

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

初学者提示，在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 类。*即将推出！*

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

开放原子开发者工作坊

所有评论(0)

查看更多评论

蔚蓝慕

@acktomas

已为社区贡献84条内容