很多時候,你想解釋自己的想法/代碼,但是用語言來表達會很啰嗦,並且讀者也不易理解。一般這種情況下,我們都會想使用圖解來解釋。但是,我們也不會想下載那些繁重的工具,比如Visio。
Mermaid 是一個用來畫流程圖,甘特圖等圖形的工具。它是一個Javascript庫,但是它也是一種語言,一種類似markdown的語言。
任何時候,你想要測試Mermaid語法,都可以使用這個在線編輯器。
流程圖的示例
graph TD
A --> B
A --> C
B --> D
C --> D

時序圖的示例
sequenceDiagram
participant 小明
participant 小紅
小明 -> 小強: 小強,最近怎么樣?
loop 健康檢查
小強 -> 小強: 和疾病做斗爭
end
Note right of 小強: 理性的思考: <br/> 怎么回答呢...
小強 --> 小明: 挺好的!
小強 -> 小紅: 你怎么樣?
小紅 --> 小強: 非常好!

甘特圖的示例
gantt
dateFormat YYYY-MM-DD
title 為mermaid加入甘特圖功能
section A部分
完成任務 :done, des1,2019-01-06,2019-01-08
正進行任務 :active, des2,2019-01-09,3d
待開始任務 :des3, after des2, 5d
待開始任務2 :des4, after des3, 5d
section 緊急任務
完成任務 :crit,done,2019-01-06,24h
實現parser :crit,done,after des1, 2d
為parser編寫test :crit, active, 3d
待完成任務 :crit,5d
為rendere編寫test: 2d
將功能加入到mermaid: 1d