Markdown 流程圖

1. 前言

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

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

類圖（Class diagrams）用來描述系統中靜態對象的內容和關系。

類圖是一種面向對象的建模形式。它是應用系統結構的概念模型，通常與開發時的代碼有嚴格的對應關系。類視圖也可以用于數據建模。

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

2. 語法詳解

類圖的核心要素有類和關系。

2.1 類圖的「類」

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

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

實例 1：

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

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

2.1.1 類的定義

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

實例 2：

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

渲染效果如下：

2.1.2 類成員的定義

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

類成員有兩種定義方法。

實例 3：

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

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

其渲染效果如下：

實例 4：

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

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

其渲染效果如下：

通過在「小括號」結尾處增加數據類型描述，我們可以給方法成員設置入參及返回值。

實例 5：

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

其渲染效果如下：

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

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

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

2.2 類圖中的「關系」

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

不同的邏輯關系定義如下：

實例 6：

各種連線類型展示。

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

渲染結果如下：

還可以為關系加上標簽。

實例 7：

在類圖連接線上增加標簽。

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

渲染效果如下：

實例 8：

不同基數關系的定義。

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

其渲染效果如下：

2.3 類修飾符

我們可以通過標簽文本描述類的元數據，例如：抽象類、接口、服務、枚舉等。

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

實例 9：

在類名稱下面另起一行：

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

其渲染效果如下：

實例 10：

在嵌套結構內的首行定義：

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

其渲染效果如下：

3. 使用場景及實例

類圖主要用于為系統建模。

實例 11：

一個關于動物的類圖。

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

其渲染效果如下：

4. 小結

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