Mermaid

Mermaid 可讓您使用文字和程式碼建立圖表和視覺化效果。它是一種基於 Javascript 的圖表和圖表工具，可呈現受 Markdown 啟發的文字定義以動態建立和修改圖表。

UML類圖

在軟體工程中，統一建模語言（UML）中的類圖是一種靜態結構圖，它通過顯示系統的類，其屬性，操作（或方法）以及物件之間的關係來描述系統的結構。

類圖語法

UML提供了表示類成員的機制，例如屬性和方法，以及有關它們的其他資訊。圖中一個類的單個例項包含三個隔離專區：

• 頂部的小節包含類的名稱。它以粗體和居中列印，並且第一個字母大寫。它還可能包含描述類性質的可選註釋文字。
• 中間隔間包含類的屬性。它們是左對齊的，首字母是小寫。底部的隔離區包含類可以執行的操作。它們也左對齊，首字母為小寫。

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

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

定義一個類

定義類有兩種方法：

• 使用關鍵字class（如）明確定義一個類class Animal。這定義了動物類
• 通過它們之間的關係定義兩個類Vehicle <|-- Car。這定義了兩個類Vehicle和Car及其關係。

classDiagram
    class Animal
    Vehicle <|-- Car

classDiagram class Animal Vehicle <|-- Car

命名約定：類名應由字母數字（允許使用Unicode）和下劃線字元組成。

定義類成員

UML提供了表示類成員的機制，例如屬性和方法，以及有關它們的其他資訊。

Mermaid根據括號

()是否存在來區分屬性和函式/方法。與一起()被視為函式/方法，而其他被視為屬性。

有兩種定義類成員的方法，無論使用哪種語法定義成員，輸出都將相同。兩種不同的方式是：

• 使用:（冒號）後跟成員名稱來關聯一個類的成員，這對於一次定義一個成員非常有用。例如：

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)

• 使用{}括號關聯類的成員，其中成員分組在大括號中。適合一次定義多個成員。例如：

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

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

返回型別

（可選）您可以使用將要返回的資料型別結束方法/函式定義（注意：)方法定義的末尾和返回型別示例之間必須有一個空格：

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

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

泛型

List<int>通過將型別包含在~（tilde）中，可以使用通用型別（例如）針對欄位，引數和返回型別定義成員。注意：目前不支援巢狀型別宣告（例如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~

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~

可見性

要指定類成員(即任何屬性或方法)的可見性，這些符號可以放在成員名之前，但它是可選的:

可見性	Java	UML
對所有類可見(公共的)	public	+
僅對本類可見(私有的)	private	-
對本包和所有子類可見(受保護的)	protected	#
對本包可見(包內部)	預設，不需要修飾符	_

請注意，您還可以通過在方法的末尾新增以下符號來為方法定義新增其他分類器，即()：

• * 抽象，例如： someAbstractMethod()*
• $ 靜態，例如： someStaticMethod()$

定義關係

	描述	描述	說明
<|--	Inheritance	繼承	一般而言，如果類A擴充套件類B,類A不但包含從類B繼承的方法，還會擁有一些額外的功能。
*--	Composition	組合
o--	Aggregation	聚合	聚合關係意味著類A 的物件包含類B 的物件。
-->	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 : Link(Dashed)

classDiagram classA --|> classB : 繼承 classC --* classD : 組合 classE --o classF : 聚合 classG --> classH : 單向關聯 classI -- classJ : 雙向關聯 classK ..> classL : 依賴 classM ..|> classN : 介面實現 classO .. classP : Link(Dashed)

多重關係

類圖中的多樣性或基數表示一個類與另一個類的一個例項相連結的例項的數量。例如，一個公司將有一個或多個僱員，但是每個僱員只為一個公司工作。

多重符號被放置在關聯的末尾附近。

不同的基數選項是:

• 1 只有1個
• 0..1 零或一
• 1..* 一個或多個
• * 許多
• n n {其中n> 1}
• 0..n 0至n {其中n> 1}
• 1..n 1至n{其中n> 1}

基數可以很容易地定義，方法是將基數文字放在引號內“在(可選)一個給定箭頭之前(可選)和(可選)之後”。

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>> 代表一個列舉

註釋定義在開頭<<和結尾>>中。有兩種方法可以向類添加註釋，並且無論使用什麼語法，輸出都是相同的。這兩種方式是:

在定義類之後的單獨一行中。例如:

classDiagram
class Shape
<<interface>> Shape

classDiagram class Shape <<interface>> Shape

在一個巢狀結構中，以及類定義。例如:

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 }

註釋

可以在類圖中輸入註釋，解析器將忽略它們。註釋必須自己一行，並且必須以%%（雙百分號）開頭。註釋開始到下一個換行符之前的任何文字都將被視為註釋，包括任何類圖語法

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

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

參考資料

https://mermaid-js.github.io/mermaid/#/classDiagram