MarkDown(十一)——繪制流程圖、時序圖(順序圖)、甘特圖


最近使用到了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 ```

顯示效果如下:

參考網址


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM