Markdown 流程圖

1. 前言

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

本節(jié)將重點介紹如何通過 Mermaid 繪制「類圖」。

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

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

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

2. 語法詳解

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

2.1 類圖的「類」

類是類圖中的核心組成，類的成員包括屬性和方法，以及一些擴展信息。在類圖中，一個類實例由三層組成：

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

實例 1：

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

此部分代碼將會渲染成如下效果：

2.1.1 類的定義

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

實例 2：

?```mermaid
classDiagram
    class 動物
    交通工具 <|-- 小汽車
?```

渲染效果如下：

2.1.2 類成員的定義

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

類成員有兩種定義方法。

實例 3：

使用「冒號」聲明類成員。

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

其渲染效果如下：

實例 4：

使用 「大括號」確定類對象的成員描述。

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

其渲染效果如下：

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

實例 5：

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

其渲染效果如下：

成員的作用域作為可選項，定義是在成員的開頭，有以下四種：

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

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

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

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

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

實例 6：

各種連線類型展示。

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

渲染結(jié)果如下：

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

實例 7：

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

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

渲染效果如下：

實例 8：

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

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

其渲染效果如下：

2.3 類修飾符

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

元數(shù)據(jù)的通過「雙尖括號」定義，有兩種寫法：

實例 9：

在類名稱下面另起一行：

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

其渲染效果如下：

實例 10：

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

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

其渲染效果如下：

3. 使用場景及實例

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

實例 11：

一個關(guān)于動物的類圖。

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

其渲染效果如下：

4. 小結(jié)

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