mermaid学习笔记之类图

UML 提供了表示类成员的机制,例如属性和方法,以及有关它们的其他信息。关系图中类的单个实例包含三个隔间:

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

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

定义类

有两种方法可以定义类:

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

Animal
Vehicle
Car

命名约定:类名应仅由字母数字字符(包括 unicode)、下划线和短划线 (-) 组成。

类标签

如果需要为类提供标签,可以使用以下语法:

classDiagram
    class Animal["Animal"]
    class Car["Car"]
    Animal --> Car

markdown 不支持
在这里插入图片描述

定义类的成员

UML 提供了表示类成员(如属性和方法)的机制,以及有关它们的其他信息。

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

有两种方法可以定义类的成员,无论使用哪种语法来定义成员,输出仍将是相同的。两种不同的方式是:

  • 使用(冒号)后跟成员名称关联类的成员,这对于一次定义一个成员很有用。例如:
classDiagram
    class BankAccount
    BankAccount : String owner
    BankAccount : Bigdecimal balance
    BankAccount : deposit(amount)
    BankAccount : withdrawal(amount)
BankAccount
String owner
Bigdecimal balance
deposit(amount)
withdrawal(amount)
  • 使用 {} 方括号的类的关联成员,其中成员分组在大括号内。适用于一次定义多个成员。例如:
classDiagram
class BankAccount{
   String owner
   BigDecimal balance
   deposit(amount)
   withdrawal(amount)
}
BankAccount
String owner
BigDecimal balance
deposit(amount)
withdrawal(amount)

返回类型

(可选)您可以使用将返回的数据类型结束方法/函数定义(注意:final 和返回类型之间必须有一个空格)。举个例子:)

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

泛型类型

可以使用泛型类型(如 )将类型括在(波浪号)中来定义成员,用于字段、参数和返回类型。支持嵌套类型声明,例如。List<int>~List<List<int>>

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

classDiagram
	class Square~Shap~{
		int id
		List~int~ position
		setPoints(List~int~ points)
	}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square: +getMessages() List~string~
Square : +getDistanceMatrix() List~List~int~~
Square<Shap>
int id
List<int> position
-List<string> messages
setPoints(List<int> points)
+setMessages(List<string> messages)
+getMessages() : List<string>
+getDistanceMatrix()

markdown解析有问题
在这里插入图片描述

能见度

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

  • +公共

  • -私人

  • #保护

  • ~封装/内部
    注意 您还可以通过在方法末尾添加以下表示法来在方法定义中包含其他分类器,即:在返回类型之后或之后:()

  • *摘要,例如:或someAbstractMethod()someAbstractMethod() int

  • $静态,例如:或someStaticMethod() s o m e S t a t i c M e t h o d ( ) S t r i n g someStaticMethod() String someStaticMethod()String
    注释 还可以通过在字段定义末尾添加以下表示法来包含其他分类器:

  • $静态,例如:String someField$

定义关系

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

[classA][Arrow][ClassB]
目前支持在 UML 下为类定义了八种不同类型的关系:
在这里插入图片描述

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

关系标签

可以向关系添加标签文本:

[classA][Arrow][ClassB]:LabelText

classDiagram
	classA <|-- classB : implements
	classC *-- classD : compositiong
	classE 0-- classF: aggregation
implements
compositiong
aggregation
classA
classB
classC
classD
classE0
classF

双向关系

关系在逻辑上可以表示 N:M 关联:

classDiagram
	Animal <|--|> Zebra
Animal
Zebra

语法如下:

[Relation Type][Link][Relation Type]
其中可以是以下之一:Relation Type

在这里插入图片描述
在这里插入图片描述

并且可以是以下之一:Link
在这里插入图片描述

定义命名空间

命名空间对类进行分组

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

markdown不支持
在这里插入图片描述

关系的基数/多重性

类图中的多重性或基数表示一个类的实例数,这些实例可以链接到另一个类的实例。例如,每个公司将有一名或多名员工(不是零),并且每个员工目前在零家公司或一家公司工作。

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

不同的基数选项是:

  • 1只有 1 个
  • 0..1零或一
  • 1..*一个或多个
  • *
  • nn
  • 0..n0 到 N
  • 1..n1 到 N
    通过将文本选项放在给定箭头之前或之后的引号内,可以轻松定义基数。例如:"

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

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

类的注释

可以使用标记对类进行注释,以提供有关类的其他元数据。这可以更清楚地表明其性质。一些常见的注释包括:

  • <>表示接口类

  • <>表示抽象类

  • <>表示服务类

  • <>表示枚举
    注释在开头和结尾中定义。有两种方法可以将注释添加到类,无论哪种方式,输出都是相同的:<<>>

  • 在定义类后的单独行中:

classDiagram
	class Shape
	<<interface>> Shape
	Shape : noOfVerTices
	Shape : draw()
«interface»
Shape
noOfVerTices
draw()
  • 在嵌套结构中以及类定义中:
classDiagram
	class Shape{
	<<interface>>
	noOfVertices
	draw()
	}
	class Color{
		<<enumeration>>
		RED
		BLUE
		GREEN
		WHITE
		BLACK
	}
«interface»
Shape
noOfVertices
draw()
«enumeration»
Color
RED
BLUE
GREEN
WHITE
BLACK

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

classDiagram
%% 这是注释
	class Shape{
		noOfVertices
		draw()
	}
Shape
noOfVertices
draw()

设置图表的方向

对于类图,您可以使用 direction 语句来设置图的呈现方向:

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
carries
1
1
rides
1
1
Student
-idCard : IdCard
IdCard
-id : int
-name : string
Bike
-id : int
-name : string

交互

可以将单击事件绑定到节点。单击可能会导致 javascript 回调或将在新的浏览器选项卡中打开的链接。 注意:此功能在使用时禁用,使用 时启用。securityLevel='strict’securityLevel=‘loose’

在声明所有类后,您将在单独的行上定义这些操作。

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
  • 操作为 或 ,具体取决于要调用的交互类型linkcallback
  • className 是操作将与之关联的节点的 ID
  • 引用是 URL 链接或回调的函数名称。
  • (可选)工具提示是将鼠标悬停在元素上时要显示的字符串(注意:工具提示的样式由类 .mermaidTooltip 设置。
  • 注意:回调函数将以 nodeId 作为参数调用。

笔记

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

classDiagram
    note "这是笔记"
    note for MyClass "这是一个类"
    class MyClass{
    }

markdown 不支持
在这里插入图片描述
网址链接:

classDiagram
	class Shape
	link Shape "https://www.baidu.com" "this is a tooltip for a link"
	class Shape2
	click Shape2 href "https://www.github.com" "this is a tooltip for a link"
Shape
Shape2
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值