[toc] # 流程圖 ## 什么是流程圖? * 流程圖是對過程、算法、流程的一種圖像表示，在技術設計、交流及商業簡報等領域有廣泛的應用。 * 通常用一些圖框來表示各種類型的操作，在框內寫出各個步驟，然后用帶箭頭的線把它們連接起來，以表示執行的先后順序。 * 用圖形表示算法，直觀形象，易于理解。有時候也被稱之為輸入-輸出圖。 * 顧名思義，就是用來直觀地描述一個工作過程的具體步驟。 ## 流程圖的作用 * 用來描述接口的功能, 彌補原型圖在邏輯細節上的不足  ## 畫一個`用戶登錄/注冊二合一`流程圖 思路 1. 接收用戶名和密碼 1. 使用用戶名查詢數據庫 1. 有記錄則登錄, 則判斷密碼然后登錄 1. 沒有記錄則把用戶名和密碼寫入數據庫(注冊), 然后登錄 流程圖 ```[flow] st=>start: Start e=>end: End 接收用戶名和密碼=>operation: 接收用戶名和密碼 使用用戶名查詢數據庫=>operation: 使用用戶名查詢數據庫 數據庫中是否有數據=>condition: 數據庫中是否有數據? 走登錄邏輯=>operation: 走登錄邏輯 走注冊邏輯=>operation: 走注冊邏輯 密碼是否正確=>condition: 密碼是否正確? 把用戶名和密碼寫入數據庫=>inputoutput: 把用戶名和密碼寫入數據庫 st->接收用戶名和密碼->使用用戶名查詢數據庫->數據庫中是否有數據 數據庫中是否有數據(yes)->走登錄邏輯->密碼是否正確 數據庫中是否有數據(no)->走注冊邏輯->把用戶名和密碼寫入數據庫->e 密碼是否正確(yes)->e 密碼是否正確(no,down)->接收用戶名和密碼 ``` 流程圖代碼 ```flow st=>start: Start e=>end: End 接收用戶名和密碼=>operation: 接收用戶名和密碼 使用用戶名查詢數據庫=>operation: 使用用戶名查詢數據庫 數據庫中是否有數據=>condition: 數據庫中是否有數據? 走登錄邏輯=>operation: 走登錄邏輯 走注冊邏輯=>operation: 走注冊邏輯 密碼是否正確=>condition: 密碼是否正確? 把用戶名和密碼寫入數據庫=>inputoutput: 把用戶名和密碼寫入數據庫 st->接收用戶名和密碼->使用用戶名查詢數據庫->數據庫中是否有數據 數據庫中是否有數據(yes)->走登錄邏輯->密碼是否正確 數據庫中是否有數據(no)->走注冊邏輯->把用戶名和密碼寫入數據庫->e 密碼是否正確(yes)->e 密碼是否正確(no,down)->接收用戶名和密碼 ``` ## 流程圖的markdown語法 語法關鍵詞 * `start`,`end`, 表示程序的開始與結束 * `operation`, 表示程序的處理塊 * `subroutine`, 表示子程序塊 * `condition`, 表示程序的條件判斷 * `inputoutput`, 表示程序的出入輸出 * `right`,`left`, 表示箭頭在當前模塊上的起點(默認箭頭從下端開始) * `yes`,`no`, 表示condition判斷的分支(其可以和right,left同時使用) 流程圖的語法大體分為兩部分： 1. 前面部分用來定義流程圖元素: `tag=>type: content:>url` * `tag` 是流程圖中的標簽，在第二段連接元素時會用到。名稱可以任意，一般為流程的英文縮寫和數字的組合。 * `type` 用來確定標簽的類型，`=>`后面表示類型。由于標簽的名稱可以任意指定，所以要依賴`type`來確定標簽的類型 * 標簽有6種類型：`start` `end` `operation` `subroutine` `condition` `inputoutput` * `content` 是流程圖文本框中的描述內容，`:` 后面表示內容，中英文均可。特別注意，冒號與文本之間一定要有個空格 * `url`是一個連接，與框框中的文本相綁定，`:>`后面就是對應的 `url` 鏈接，點擊文本時可以通過鏈接跳轉到 `url` 指定頁面 2. 后面部分用來連接流程圖元素，指定流程圖的執行走向。 * 使用 `->` 來連接兩個元素 * 對于`condition`類型，有`yes`和`no`兩個分支，如示例中的cond(yes)和cond(no) * 每個元素可以制定分支走向，默認向下，也可以用`right`指向右邊，如示例中sub1(right)。