Markdown是我最喜歡的寫作格式，現在我的博客、筆記等都是用markdown格式寫的，基礎的文字編輯相關的語法用的已經很順手了，本文就來記錄一下用Markdown編輯器畫圖的方法。
我現在使用一款非常流行的Markown編輯器Typora，Typora是一款免費的markdown編輯器，支持Linux、Windows和macOS，非常好用。下載地址：https://www.typora.io/。
之前在markdown文件中加入圖片內容，我一般都是用其他畫圖軟件畫好之後，通過markdown插入圖片的語法插入的。
這樣做有2個非常不方便的地方：
- 圖片需要在其他軟件上編輯製作，如果後續需要修改，可能當時的源文件已經沒有了。
- 圖片比較大，加載速度慢。
好在Typora很強大，支持軟件領域很多圖形的製作，比如時序圖、流程圖、狀態流轉圖和甘特圖等，從0.9.9.30 (0.9.80) beta版本開始也支持UML類圖。
在Typora中繪製這些圖形，其實是藉助一種叫作mermaid的腳本語言來實現的。mermaid的官方網站是：https://mermaid-js.github.io/mermaid/#/，mermaid語法和Markdown一樣簡單。通過文本化的方法來製作圖形，一方面不需要其他軟軟件，直接在Typora中就可以編輯和修改，另一方面圖形體積非常小，加載速度非常快。
本文的代碼和圖形都在用Typora編輯器實現的。下面來學習在Typora中用mermaid語法繪製餅圖、時序圖、流程圖、狀態轉移圖和類圖的方法。本文以例子爲主，在實際工作中可以根據例子照貓畫虎。例子中的mermaid代碼很簡單，很容易理解，工作中根據需要修改一下就可以用了。
01 — 餅圖
畫餅圖非常非常簡單，可以在Typpra中直接寫，注意腳本語言標記爲mermaid：
pie
title 動物數
"Dogs" : 386
"Cats" : 85
"Rats" : 150
"Cows" : 150
效果如下：
02 — 時序圖
Typora對時序圖的支持也是比較完美的，可以在Typpra中直接寫，注意腳本語言標記爲mermaid：
sequenceDiagram
title: 時序圖例子
Alice->>Alice: 自言自語
Alice->>John: Hello John, how are you?
%% over 可用於單獨一個角色上，也可以用於相鄰兩個角色間：
Note over Alice,John: A typical interaction
%% loop 後跟循環體說明文字
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
%% 控制焦點：用來表示時序圖中對象執行某個操作的一段時間
%% activate 角色名 表示激活控制焦點
activate Bob
Bob-->>John: Jolly good!
%% deactivate 角色名 表示控制焦點結束
deactivate Bob
Alice->>+Bob: Hello John, how are you?
rect rgb(175, 255, 212)
alt is sick
Bob-->>Alice: Not so good :(
else is well
Bob-->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob-->>Alice: Thanks for asking
end
end
loop communicating
Alice->>+John: asking some questions
John-->>-Alice: answer
end
par Alice to John
Alice->>John: Bye
and Alice to Bob
Alice->>Bob: Bye
end
Alice-xJohn: 這是一個異步調用
Alice--xBob: 這是一個異步調用
效果如下：
03 — 流程圖
Typora對流程圖的支持也是比較完美的，可以在Typpra中直接寫，注意腳本語言標記爲mermaid：
graph LR
%% 這是註釋，流程圖中用到的各種圖形畫法、連線
id1((start))-->A[方角矩形]
A -.虛線.-> B(圓角矩形)
A --> F[\平行四邊形\]--> G[/平行四邊形/]-->H[/梯形\]-->I[\梯形/]
A ---|沒箭頭的連線|i21(圓角矩形)
B --文案--> C{菱形}
C -->|One| D{{Result one}}
C -->|Two| E>Result two]
效果如下：
graph TB
%% 子流程
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
效果如下
graph TB
%% 快手發佈視頻流程
B(點擊拍攝) --> C{是否允許快手拍攝視頻}
C-->|N|D[提示用戶允許抖音拍攝]
C-->|Y|E[開始拍攝]
E-->F[相冊]-->G[自行編輯]-->H[發佈]
E-->I[選擇濾鏡和音樂]-->J[按住拍攝]-->H
E-->J
H-->|N|K[返回首頁]
H-->|Y|L[所有人可見]
效果如下：
04 — UML類圖
先看類的畫法，-開頭的是它的私有屬性，+開頭的是類的公共方法。Protected方法則在前面放上#。對於方法的表示，括號中可以放入方法的參數，在括號後面可以放上方法的返回值類型。類似這樣：
classDiagram
class Duck{
-String beakColor
- double weight
+swim()
+quack()
#count()
+getPrice(count) double
+someAbstractMethod() *
-someStaticMethod() $
}
class Shape{
%% This whole line is a comment classDiagram class Shape <<interface>>
<<interface>>
noOfVertices
draw()
}
class Color{
<<enumeration>>
RED
BLUE
GREEN
WHITE
BLACK
}
class Relation{
<<<<abstract>>>>
}
這段代碼需要在mermaid在線編輯器 https://mermaid-js.github.io/mermaid-live-editor編輯，才能出現下面的效果，Typora編輯器目前對上面的語法支持的不是很好。效果如下：
Typora是在 0.9.9.30 (0.9.80) beta版本開始支持classDiagram的，目前支持的還不太好。所以畫classDiagram時，最好使用mermaid在線編輯器 https://mermaid-js.github.io/mermaid-live-editor編輯，然後保存成svg圖片，再將其插入到markdown中。
類與類之間的關係，常見有下面6種：
-
依賴（Dependency）：元素A的變化會影響元素B，但反之不成立，那麼B和A的關係是依賴關係，B依賴A；uml中用帶箭頭的虛線表示，箭頭指向被依賴元素。
-
泛化（Generalization）：就是通常所說的繼承（特殊個體 is kind of 一般個體）關係。uml中用帶空心箭頭的實線線表示，箭頭指向一般個體。
-
實現（Realization）：元素A定義一個約定，元素B實現這個約定，則B和A的關係是Realization，B 實現了 A。這個關係最常用於接口。uml中用空心箭頭和虛線表示，箭頭指向定義約定的元素。
-
關聯（Association）：元素間的結構化關係，是一種弱關係，被關聯的元素間通常可以被獨立的考慮。uml中用實線表示，箭頭指向被依賴元素。
-
聚合（Aggregation）：關聯關係的一種特例，表示部分和整體（整體 has a 部分）的關係。uml中用帶空心菱形頭的實線表示，菱形頭指向整體。
-
組合（Composition）：組合是聚合關係的變種，表示元素間更強的組合關係。如果是組合關係，如果整體被破壞則個體一定會被破壞。uml中用帶實心菱形頭的實線表示，菱形頭指向整體。
看下類與類之間關係的畫法，使用mermaid在線編輯器，寫下下面的代碼，主要是箭頭和線條類型不同：
classDiagram
classK ..> classL : 依賴關係
classA --|> classB : 繼承關係（泛化）
classM ..|> classN : 實現關係
classG --> classH : 關聯關係
classE --o classF : 聚合關係
classC --* classD : 組合關係
效果圖如下：
多重性是用來說明兩個類之間的數量關係，表示爲一個整數範圍n…m，整數n定義所鏈接的最少對象的數目，m爲最多對象數目（但不確定最大數時，可以*號表示）。
classDiagram
Customer "1" --> "*" Ticket
Student "1" --> "1..*" Course
Galaxy --> "many" Star : Contains
Sky "1"--> "1" Sun
Parent "1" -- "0..2" Children
Person "1" -- "2" Eyes
效果如下：
05 — 狀態轉移圖
狀態轉換圖主要用來描述系統的狀態，及引起系統狀態轉化的事件，來表示系統的行爲。狀態轉化圖可以用來描述單程生命週期，也可以用來表示循環運行過程。
單程生命週期起點是實心圓，終點是同心圓，內圓爲實心。初態只有一個，終態可以有很多。循環運行過程一般不考慮起點與終點。
舉個例子感受一下，可以在Typpra中直接寫，腳本語言標記爲mermaid：
stateDiagram
%% 單程生命週期起點是實心圓，終點是同心圓，內圓爲實心。
%%這個例子包含是3個狀態Still, Moving 和 Crash. 從Still狀態可以轉移到Moving，從Moving可以轉移到Still 或者 Crash。不能從Still轉移到Crash
[*] --> Still
Still --> [*]
Still --> Moving: A transition
note right of Moving
Moving可以轉移到Still或者Crash
end note
Moving --> Still
Moving --> Crash
Crash --> [*]
效果圖如下：
來看下多個互不干擾狀態的並行狀態流轉：
stateDiagram
[*] --> Active
note right of Active
起始狀態進入Active狀態後
就可以並行執行三個狀態的流轉了
end note
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
效果圖如下：
分支狀態流轉代碼：
stateDiagram
%% state fork_state <<fork>>聲明一個state
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
效果圖如下：
06 — 總結
上面介紹了在Typora中畫餅圖、時序圖、流程圖、類圖和狀態轉移圖5種圖形的畫法。除了類圖目前Typora支持不太好之外，其他4種圖形的支持都非常棒。所以建議大家除了類圖到在線編輯器上製作之外，其他的圖都在Typora中製作。
另外，Typora還可以畫甘特圖，可以參考官方網站https://mermaid-js.github.io/mermaid/#/gantt。Typora對數學公式的編寫也非常友好，大家可以探索。現在我越來越喜歡Markdown語法了，Typora也成爲了我的主要編輯器，通過這一個編輯器，即可寫文章，又可以畫常見的圖形，還可以編輯數學公式。重要的是Typora體積小，還免費，支持Linux、Windows和macOS三個平臺，沒有換平臺就要換編輯器的麻煩。
趕緊擁抱Typora吧。
參考資料：
https://mermaid-js.github.io/mermaid/
https://www.typora.io/