只有用過，才能掌握
寫這篇文章的目的主要是學習markdown畫圖。目前支持畫圖的MarkDown工具只有Typora和有道云筆記
ProcessOn VS MarkDown。雖然ProcessOn也能做這件事情，但是每次使用都要以圖片的形式進行編輯，不便于微調。在不同應用之間前切換也比較麻煩
我的學習方法。我會想出一個綜合性的場景，然后把所有的知識點融入到一張圖里去。這樣做的好處是，回憶的時候只用回憶一張圖就夠了，提高回憶效率。
文章目錄如下：
- 流程圖代碼如下：
- 代碼說明：
- typora中效果圖如下：
- 序列圖代碼如下：
- 代碼說明:
- typora中效果圖如下：
- 餅圖代碼如下：
- typora中效果圖如下：
- 甘特圖代碼說明:
- 代碼如下：
- typora中展示效果如下：
流程圖
代碼如下：
graph TB;
subgraph 分情況
A(開始)-->B{判斷}
end
B--第一種情況-->C[第一種方案]
B--第二種情況-->D[第二種方案]
B--第三種情況-->F{第三種方案}
subgraph 分種類
F-.第1個.->J((測試圓形))
F-.第2個.->H>右向旗幟形]
end
H---I(測試完畢)
C--票數100---I(測試完畢)
D---I(測試完畢)
J---I(測試完畢)
代碼說明：
| 字母表示 | 含義 |
|---|---|
| TB | 從上到下 |
| BT | 從下到上 |
| LR | 從左到右 |
| RL | 從右到左 |
| 表述 | 說明 | 含義 |
|---|---|---|
| id[文字] | 矩形節點 | 表示過程 |
| id(文字) | 圓角矩形節點 | 表示開始與結束 |
| id((文字)) | 圓形節點 | 表示連接。為避免流程過長或有交叉，可將流程切開成對 |
| id{文字} | 菱形節點 | 表示判斷、決策 |
| id>文字 ] | 右向旗幟節點 |
- T、B、L、T分別是Top/Bottom/Left/Right的縮寫
- id為節點的唯一標識，類似于變量。括號內為節點要顯示的文字
- 單向箭頭為流程進行方向。支持虛線與實線，有箭頭與無箭頭、有文字與無文字。分別是---、-.-、 -->、-.->、--文字-->、-.文字.->、--文字---、-.文字.-
- 支持子圖。如代碼、效果圖所示。
typora中效果圖如下：
流程圖.png
序列圖
序列圖共有5個部分，分別是：參與者、消息線、循環、選擇、可選、并行、注解。我們來模擬一個綜合場景，如下圖所示:
購買書籍序列圖.jpg
代碼如下：
sequenceDiagram
Title: 小明買書
?
participant consumer as 小明
participant store as 書店
participant publisher as 出版社
?
consumer ->> store: 想買一本限量版書籍
store -->> consumer: 缺貨
consumer ->> store: 隔一個月再次詢問
store -->> consumer: 搶完了
loop 一個星期一次
consumer -x +store: 有貨了嗎
store --x -consumer: 正在訂,有貨馬上通知你
end
?
store ->> publisher: 我要訂購一批貨
publisher --x store: 返回所有書籍的類別信息
?
alt 書籍類別符合要求
store ->> publisher: 請求書單信息
publisher --x store: 返回該類別書單信息
else 書單里的書有市場需求
store ->> publisher: 購買指定數據
publisher --x store: 確認訂單
else 書籍不符合要求
store -->> publisher: 暫時不購買
end
?
par 并行執行
publisher ->> publisher : 生產
publisher ->> publisher : 銷售
end
?
opt 書籍購買量>=500 && 庫存>=50
publisher ->> store : 出貨
store --x publisher : 確認收貨
end
?
Note left of consumer : 圖書收藏家
Note over consumer,store : 去書店購買書籍
Note left of store : 全國知名書店
Note over store,publisher : 去出版社進貨
Note left of publisher : 持有版權的出版社
代碼說明:
- 消息線
| 類型 | 描述 |
|---|---|
| -> | 無箭頭的實線 |
| --> | 無箭頭的虛線 |
| ->> | 有箭頭的實線(主動發出消息) |
| -->> | 有箭頭的虛線(響應) |
| -x | 末端為X的實線(主動發出異步消息) |
| --x | 有箭頭的實線(以異步形式響應消息) |
alt 可以理解為可替代的方案，可能的情況
opt可以理解為一個if語句，滿足條件下執行的操作
typora中效果圖如下：
序列圖.png
餅圖
代碼如下：
pie
title Pie Chart
"Dogs" : 386
"cats" : 567
"rabbit" : 700
"pig":365
"tiger" : 15
typora中效果圖如下：
餅圖.png
甘特圖
這是我用Process做的，我們就以張圖為例，用MarkDown畫一張甘特圖吧。
順便對比一下這兩種方式，看看哪個展示效果好一點
甘特圖.jpg
代碼說明：
從官網上看一下語法，如下所示:
gantt
dateFormat YYYY-MM-DD //底部的時間格式
title Adding GANTT diagram functionality to mermaid //甘特圖名稱
excludes weekends //周末有休息
?
section A //可以理解為一個功能模塊
task1 :done,des1, 2014-01-06,2014-01-08 //可以理解為這個功能模塊的各項進度安排
task2 :active,des2, 2014-01-09, 3d //以下參數都是合法的
task3 :des3, after des2, 5d //我們等一下每個都試一下
task4 :crit, done, 2014-01-06,24h
task5 :crit, done, after des1, 2d
task6 :crit, active, 3d
task7 :crit, 5d
task8 :2d
task9 :1d
... :[參數1:crit,可不填],[參數2:active,done,可不填表示待完成],[參數3:小名],
[參數4:開始時間],[參數5:結束時間]
section B
section C
...
這里要注意的是，時間的表示有多種，如上，
可以是
2014-01-06,2014-01-08
2014-01-09, 3d
after des2, 5d
5d
狀態默認是待完成，建議給每個任務desc
代碼如下：
gantt
dateFormat YYYY-MM-DD
title 軟件開發任務進度安排
excludes weekends
?
section 軟硬件選型
硬件選擇 :done,desc1, 2020-01-01,6w
軟件設計 :active,desc2, after desc1,3w
section 編碼準備
軟件選擇 :crit,done,desc3,2020-01-01,2020-01-29
編碼和測試軟件 :1w
安裝測試系統 :2020-02-12,1w
section 完成論文
編寫手冊 :desc5,2020-01-01,10w
論文修改 :crit,after desc3,3w
論文定稿 :after desc5,3w
typora中展示效果如下：
甘特圖.png
