Markdown 流程圖

1. 前言

Markdown 的原生語(yǔ)法不支持繪制圖形，但通過(guò)擴(kuò)展模塊，我們可以將一些格式化的文字渲染成我們需要的圖形。常用的圖形有 “流程圖”、“時(shí)序圖”、“類(lèi)圖”、“狀態(tài)圖”、“甘特圖”、"餅圖" 等。

本節(jié)將重點(diǎn)介紹如何通過(guò) Mermaid 繪制「類(lèi)圖」。

類(lèi)圖（Class diagrams）用來(lái)描述系統(tǒng)中靜態(tài)對(duì)象的內(nèi)容和關(guān)系。

類(lèi)圖是一種面向?qū)ο蟮慕Ｐ问?。它是?yīng)用系統(tǒng)結(jié)構(gòu)的概念模型，通常與開(kāi)發(fā)時(shí)的代碼有嚴(yán)格的對(duì)應(yīng)關(guān)系。類(lèi)視圖也可以用于數(shù)據(jù)建模。

環(huán)境說(shuō)明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁(yè)面復(fù)制粘貼到本地不會(huì)正常顯示，大家學(xué)習(xí)時(shí)自己動(dòng)手寫(xiě)是肯定沒(méi)問(wèn)題的。本節(jié)所有實(shí)例代碼及演示效果均使用 Typora 工具完成。
Mermaid 為 Markdown 擴(kuò)展語(yǔ)法，需要在 Typora 設(shè)置中開(kāi)啟對(duì)圖表的語(yǔ)法支持。其方式為：「設(shè)置」->「Markdown」->「Markdown 擴(kuò)展語(yǔ)法」-> 勾選「圖表」，如下圖：

2. 語(yǔ)法詳解

類(lèi)圖的核心要素有類(lèi)和關(guān)系。

2.1 類(lèi)圖的「類(lèi)」

類(lèi)是類(lèi)圖中的核心組成，類(lèi)的成員包括屬性和方法，以及一些擴(kuò)展信息。在類(lèi)圖中，一個(gè)類(lèi)實(shí)例由三層組成：

• 類(lèi)名稱，在類(lèi)圖的最頂端；
• 類(lèi)屬性，在類(lèi)圖的中間層；
• 類(lèi)方法，在類(lèi)圖的最下層。

實(shí)例 1：

?```mermaid
classDiagram
    class 動(dòng)物
    動(dòng)物 : String 標(biāo)簽
    動(dòng)物 : 吃()
?```

此部分代碼將會(huì)渲染成如下效果：

2.1.1 類(lèi)的定義

類(lèi)的定義有兩種方式，第一種是形如 class Animal 這樣的直接描述，另一種是通過(guò)關(guān)系來(lái)定義類(lèi)，如 Vehicle <|-- Car。

實(shí)例 2：

?```mermaid
classDiagram
    class 動(dòng)物
    交通工具 <|-- 小汽車(chē)
?```

渲染效果如下：

2.1.2 類(lèi)成員的定義

類(lèi)成員包含屬性、方法；區(qū)分屬性和方法的語(yǔ)法依賴于是否以「小括號(hào) ()」結(jié)尾，沒(méi)有括號(hào)的成員會(huì)被解釋為屬性，有括號(hào)的成員會(huì)被解釋為方法。

類(lèi)成員有兩種定義方法。

實(shí)例 3：

使用「冒號(hào)」聲明類(lèi)成員。

?```mermaid
classDiagram
  class 銀行賬戶
  銀行賬戶 : +String 戶主
  銀行賬戶 : +BigDecimal 余額
  銀行賬戶 : +存(數(shù)量)
  銀行賬戶 : +取(數(shù)量)
?```

其渲染效果如下：

實(shí)例 4：

使用 「大括號(hào)」確定類(lèi)對(duì)象的成員描述。

?```mermaid
classDiagram
  class 銀行賬戶 {
    +String 戶主
    +BigDecimal 余額
    +存(數(shù)量) bool
    +取(數(shù)量)
  }
?```

其渲染效果如下：

通過(guò)在「小括號(hào)」結(jié)尾處增加數(shù)據(jù)類(lèi)型描述，我們可以給方法成員設(shè)置入?yún)⒓胺祷刂怠?/p>

實(shí)例 5：

?```mermaid
classDiagram
  class 銀行賬戶 {
      +String 戶主
      +BigDecimal 余額
      +存(數(shù)量) bool
      +取(數(shù)量) int
  }
?```

其渲染效果如下：

成員的作用域作為可選項(xiàng)，定義是在成員的開(kāi)頭，有以下四種：

• + Public
• - Private
• # Protected
• ~ Package/Internal

除此之外，通過(guò)在 () 后面增加 「星號(hào) *」和「美元符號(hào) $」，可以用來(lái)描述方法成員的抽象或靜態(tài)屬性。

2.2 類(lèi)圖中的「關(guān)系」

類(lèi)圖中「類(lèi)」之間的邏輯關(guān)系由連接線表示，定義的形式如：[類(lèi)A][箭頭][類(lèi)B]:標(biāo)簽文字。

不同的邏輯關(guān)系定義如下：

實(shí)例 6：

各種連線類(lèi)型展示。

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

渲染結(jié)果如下：

還可以為關(guān)系加上標(biāo)簽。

實(shí)例 7：

在類(lèi)圖連接線上增加標(biāo)簽。

?```mermaid
classDiagram
  classA --|> classB : 繼承
  classC --* classD : 組成
  classE --o classF : 集合
  classG --> classH : 關(guān)聯(lián)
  classI -- classJ : 實(shí)線連接
  classK ..> classL : 依賴
  classM ..|> classN : 實(shí)現(xiàn)
  classO .. classP : 虛線連接
?```

渲染效果如下：

實(shí)例 8：

不同基數(shù)關(guān)系的定義。

?```mermaid
classDiagram
    顧客 "1" --> "*" 票據(jù)
    學(xué)生 "1" --> "1..*" 課程
    銀河 --> "many" 星星 : 包含
?```

其渲染效果如下：

2.3 類(lèi)修飾符

我們可以通過(guò)標(biāo)簽文本描述類(lèi)的元數(shù)據(jù)，例如：抽象類(lèi)、接口、服務(wù)、枚舉等。

元數(shù)據(jù)的通過(guò)「雙尖括號(hào)」定義，有兩種寫(xiě)法：

實(shí)例 9：

在類(lèi)名稱下面另起一行：

?```mermaid
classDiagram
  class 形狀
  <<interface>> 形狀
?```

其渲染效果如下：

實(shí)例 10：

在嵌套結(jié)構(gòu)內(nèi)的首行定義：

?```mermaid
classDiagram
class 形狀 {
    <<interface>>
    定點(diǎn)數(shù)
    繪制()
}
?```

其渲染效果如下：

3. 使用場(chǎng)景及實(shí)例

類(lèi)圖主要用于為系統(tǒng)建模。

實(shí)例 11：

一個(gè)關(guān)于動(dòng)物的類(lèi)圖。

?```mermaid
classDiagram
	鳥(niǎo) --|> 動(dòng)物 : 繼承
  翅膀 "2" --> "1" 鳥(niǎo) : 組合
  動(dòng)物 ..> 氧氣 : 依賴
  動(dòng)物 ..> 水 : 依賴
  
	class 動(dòng)物 {
    <<interface>>
    +有生命
    +新陳代謝(氧氣, 水)
    +繁殖()
	}
	
	class 鳥(niǎo) {
		+羽毛
		+有角質(zhì)喙沒(méi)有牙齒
		+下蛋()
	}
	class 鳥(niǎo) {
		+羽毛
		+有角質(zhì)喙沒(méi)有牙齒
		+下蛋()
	}
?```

其渲染效果如下：

4. 小結(jié)

• Mermaid 方法渲染的類(lèi)圖包含圖表類(lèi)型聲明、類(lèi)、關(guān)系；
• Mermaid 類(lèi)圖支持類(lèi)名、成員的定義，并可以為成員聲明修飾符及類(lèi)型元數(shù)據(jù)；
• Mermaid 支持多種類(lèi)型的關(guān)系，可以為關(guān)系增加標(biāo)簽文本，可以增加基數(shù)描述。