• • 基本流程圖
  • 方向調整
  • 狀態標記
  • 箭頭高亮

基本流程圖

Markdown常用的元素有以下幾種：

• start
• end
• operation
• condition
• inputoutput

• subroutine

  以簡單的登錄場景為例，流程圖代碼和效果如下：

start=>start: 開始 loginInfo=>inputoutput: 登錄數據 verifyLogin=>subroutine: 登錄驗證 isSuccess=>condition: 驗證成功？ respondSuccess=>operation: 響應成功 responseFailure=>operation: 響應失敗 end=>end: 結束start->loginInfo->verifyLogin->isSuccess isSuccess(yes)->respondSuccess->end isSuccess(no)->responseFailure->end Created with Rapha?l 2.1.2 開始 登錄數據 登錄驗證 驗證成功？ 響應成功 結束 響應失敗 yes no

注意：冒號和名稱之間需要有一個空格。

方向調整

繪制流程圖有時會出現比較一言難盡的情況，例如：

start=>start: start operation1=>operation: operation1 isSuccess=>condition: success? operation2=>operation: operation2 operation3=>operation: operation3 operation4=>operation: operation4 end=>end: 結束start->operation1->isSuccess isSuccess(yes)->operation2->end isSuccess(no)->operation3->operation4->operation1 Created with Rapha?l 2.1.2 start operation1 success? operation2 結束 operation3 operation4 yes no

這種情況下可以使用left、right和bottom關鍵字來調整線條的位置使流程圖更加清晰，例如此處給operation4元素添加right關鍵字，就可以分離重疊的線條。

start=>start: start operation1=>operation: operation1 isSuccess=>condition: success? operation2=>operation: operation2 operation3=>operation: operation3 operation4=>operation: operation4 end=>end: 結束start->operation1->isSuccess isSuccess(yes)->operation2->end isSuccess(no)->operation3->operation4(right)->operation1 Created with Rapha?l 2.1.2 start operation1 success? operation2 結束 operation3 operation4 yes no

如果給condition元素添加這些關鍵字的話會調整整個分支的方向：

start=>start: start operation1=>operation: operation1 isSuccess=>condition: success? operation2=>operation: operation2 operation3=>operation: operation3 operation4=>operation: operation4 end=>end: 結束start->operation1->isSuccess isSuccess(yes)->operation2->end isSuccess(no,left)->operation3->operation4(left)->operation1 Created with Rapha?l 2.1.2 start operation1 success? operation2 結束 operation3 operation4 yes no

狀態標記

Markdown會使用不同的顏色來標記狀態，狀態主要有以下幾種：

• past
• current
• future
• approved
• rejected
• invalid

以軟件生命周期的一部分為例：

start=>start: 開始|past requirementAnalysis=>operation: 需求分析|past design=>operation: 軟件設計|past coding=>operation: 編碼|past selfTestingPased=>condition: 自測通過？|approved debug=>operation: debug|invalid submitTestingPased=>condition: 提測通過？|rejected modifyBug=>operation: 修bug|current deploy=>operation: 部署|future end=>end: 結束|futurestart->requirementAnalysis->design->coding->selfTestingPased selfTestingPased(no)->debug(right)->selfTestingPased selfTestingPased(yes)->submitTestingPased submitTestingPased(yes)->deploy->end submitTestingPased(no)->modifyBug(right)->submitTestingPased

箭頭高亮

可以通過高亮某些箭頭來標記出主流程：

start=>start: 開始 loginInfo=>inputoutput: 登錄數據 verifyLogin=>subroutine: 登錄驗證 isSuccess=>condition: 驗證成功？ respondSuccess=>operation: 響應成功 responseFailure=>operation: 響應失敗 end=>end: 結束start->loginInfo->verifyLogin->isSuccess isSuccess(yes)->respondSuccess->end isSuccess(no)->responseFailure->endstart@>loginInfo({"stroke":"Red"})@>verifyLogin({"stroke":"Red"})@>isSuccess({"stroke":"Red"})@>respondSuccess({"stroke":"Red"})@>end({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})

參考鏈接：flowchat

總結

以上是生活随笔為你收集整理的Markdown流程图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。