最近使用到了MarkDown,就像發現了寶藏一樣。然后,為了加強記憶,基本上算是在我的博文里照抄了菜鳥教程里的Markdown系列的文章。由於本人可能對作圖的使用頻率不高,這里還是照抄了一篇筆記——感覺好厲害的樣式。本文的章節目錄如下:
橫向流程圖
橫向流程圖源碼如下:
1 ```mermaid 2 graph LR 3 A[方形] -->B(圓角) 4 B --> C{條件a} 5 C -->|a=1| D[結果1] 6 C -->|a=2| E[結果2] 7 F[橫向流程圖] 8 ```
顯示效果如下:
豎向流程圖
豎向流程圖源碼如下:
```mermaid graph TD A[方形] --> B(圓角) B --> C{條件a} C --> |a=1| D[結果1] C --> |a=2| E[結果2] F[豎向流程圖] ```
顯示效果如下:
標准流程圖
標准流程圖源碼如下:
1 ```flow 2 st=>start: 開始框 3 op=>operation: 處理框 4 cond=>condition: 判斷框(是或否?) 5 sub1=>subroutine: 子流程 6 io=>inputoutput: 輸入輸出框 7 e=>end: 結束框 8 st->op->cond 9 cond(yes)->io->e 10 cond(no)->sub1(right)->op 11 ```
顯示效果如下:
標准流程圖(橫向)
標准流程圖(橫向)源碼如下:
1 ```flow 2 st=>start: 開始框 3 op=>operation: 處理框 4 cond=>condition: 判斷框(是或否?) 5 sub1=>subroutine: 子流程 6 io=>inputoutput: 輸入輸出框 7 e=>end: 結束框 8 st(right)->op(right)->cond 9 cond(yes)->io(bottom)->e 10 cond(no)->sub1(right)->op 11 ```
顯示效果如下:
UML時序圖
UML時序圖源碼如下:
1 ```sequence 2 對象A->對象B: 對象B你好嗎?(請求) 3 Note right of 對象B: 對象B的描述 4 Note left of 對象A: 對象A的描述(提示) 5 對象B-->對象A: 我很好(響應) 6 對象A->對象B: 你真的好嗎? 7 ```
顯示效果如下:
復雜的UML時序圖
復雜的UML時序圖源碼如下:
1 ```sequence 2 Title: 標題:復雜使用 3 對象A->對象B: 對象B你好嗎?(請求) 4 Note right of 對象B: 對象B的描述 5 Note left of 對象A: 對象A的描述(提示) 6 對象B-->對象A: 我很好(響應) 7 對象B->小三: 你好嗎 8 小三-->>對象A: 對象B找我了 9 對象A->對象B: 你真的好嗎? 10 Note over 小三,對象B: 我們是朋友 11 participant C 12 Note right of C: 沒人陪我玩 13 ```
顯示效果如下:
UML標准時序圖
UML標准時序圖源碼如下:
1 ```mermaid 2 %% 時序圖例子,-> 直線,-->虛線,->>實線箭頭 3 sequenceDiagram 4 participant 張三 5 participant 李四 6 張三->王五: 王五你好嗎? 7 loop 健康檢查 8 王五->王五: 與疾病戰斗 9 end 10 Note right of 王五: 合理 食物 <br/>看醫生... 11 李四-->>張三: 很好! 12 王五->李四: 你怎么樣? 13 李四-->王五: 很好! 14 ```
顯示效果如下:
甘特圖
甘特圖源碼如下:
1 ```mermaid 2 %% 語法示例 3 gantt 4 dateFormat YYYY-MM-DD 5 title 軟件開發甘特圖 6 section 設計 7 需求 :done, des1, 2014-01-06,2014-01-08 8 原型 :active, des2, 2014-01-09, 3d 9 UI設計 : des3, after des2, 5d 10 未來任務 : des4, after des3, 5d 11 section 開發 12 學習准備理解需求 :crit, done, 2014-01-06,24h 13 設計框架 :crit, done, after des2, 2d 14 開發 :crit, active, 3d 15 未來任務 :crit, 5d 16 耍 :2d 17 section 測試 18 功能測試 :active, a1, after des3, 3d 19 壓力測試 :after a1 , 20h 20 測試報告 : 48h 21 ```
顯示效果如下: