假設(shè)我們現(xiàn)在要設(shè)計一個用戶登錄的功能,用戶在前端頁面上輸入賬號和密碼,前端調(diào)用后端的接口,后端再通過查詢數(shù)據(jù)進行數(shù)據(jù)校驗,然后返回登錄成功還是失敗。這里整個系統(tǒng)我們分為用戶,前端,后端,數(shù)據(jù)庫四個角色。
(相關(guān)資料圖)
作為開發(fā)人員,日常工作中難免會遇到一些需要畫圖的時候,特別是在寫一些接口文檔的時候,畫一些流程圖或者時序圖是很重要的。
那么小伙伴們平常都是通過什么軟件來畫圖的呢?
了不起最近發(fā)現(xiàn)一個很不錯的開源項目Mermaid,可以讓大家通過markdown語法來進行畫圖,使用起來非常絲滑。
下面我們通過下面的幾個例子來學(xué)習(xí)一下如何使用Mermaid。
時序圖
假設(shè)我們現(xiàn)在要設(shè)計一個用戶登錄的功能,用戶在前端頁面上輸入賬號和密碼,前端調(diào)用后端的接口,后端再通過查詢數(shù)據(jù)進行數(shù)據(jù)校驗,然后返回登錄成功還是失敗。這里整個系統(tǒng)我們分為用戶,前端,后端,數(shù)據(jù)庫四個角色。
用戶:輸入賬號和密碼
前端:發(fā)起登錄請求
后端:查詢數(shù)據(jù)庫并驗證賬號合法性
數(shù)據(jù)庫:存儲賬號信息
整個的時序圖的效果如下,我們先看效果再來分析如何實現(xiàn)
sequenceDiagram actor User participant F as 前端 participant E as 后端 participant M as 數(shù)據(jù)庫 User ->> F: 賬號/密碼 Note left of User: 用戶輸入賬號和密碼 loop 定時刷新 F ->> E: 假設(shè)這里用個刷新功能請求 E -->> F: 返回刷新結(jié)果 end F -->> E: 請求后端接口 Note right of F:發(fā)送請求 E ->> M: 進行數(shù)據(jù)庫查詢 M ->> + E: 返回用戶信息 E -->> E: 校驗賬號密碼是否正確 E -->> - F: 返回校驗結(jié)果 F -->> User: 提示用戶登錄成功或者失敗
上面的時序圖完整的代碼如上所示,仔細看一下我們就可以基本上猜到什么字符大概是什么意思,了不起這里簡單解釋一下
sequenceDiagram:是一個關(guān)鍵字,代表我們當前要繪制的是一個時序圖;
actor:創(chuàng)建一個用戶角色;
participant:表示系統(tǒng)的參與者,這里我們定義了前端,后端,數(shù)據(jù)庫三個參與者;
->>和–>>:一個是實線一個是虛線,表示從某個角色或者參與者到另一個角色或者參與者,如果符號前后是同一個角色或者參與者,則表示自己指向自己。如果只要連線,不想要箭頭的話,就用這種->和–>。簡單來說就是一個-表示實現(xiàn),兩個–表示虛線,一個箭頭表示沒有箭頭,兩個箭頭表示一個箭頭。
Note … of …:表示在某個角色或者參與者的左邊或者右邊添加一個備注;
loop … end..:表示一個循環(huán);
怎么樣看上去是不是很簡單的樣子,保證大家三分鐘就能學(xué)會,快實操起來吧。
甘特圖
除了時序圖,還有一種比較常見的就是甘特圖,雖然這種圖開發(fā)人員一般很少會用到,但是對于一些項目管理或者有明顯的時間節(jié)點要求的項目,還是經(jīng)常會用到的。
上面的甘特圖代碼如下所示
gantt title 會員體系項目 dateFormat YYYY-MM-DD section 需求 輸出PRD文檔:a1, 2023-05-09, 3d PRD評審:a2, after a1 , 1d UED評審:after a2 , 1d section 開發(fā) 技術(shù)方案設(shè)計:a3,2023-05-14,3d 技術(shù)方案評審:a4,after a3,1d 技術(shù)開發(fā):a5,after a4,10d section 測試 用例評審:a6,after a5,1d 測試:after a6,5d
這里甘特圖的效果還是可以的,而且畫起來十分方便,沒有復(fù)雜的邏輯和曲線以及箭頭之類的,順序時間線往下寫就行了。只要定義好各自的任務(wù)就可以按照時間線往下寫了。
gantt:甘特圖的關(guān)鍵字;
title:定義一個項目名稱;
dataFormat:定義號日期的格式;
section:每個section可以表示一個角色分組,可以具體到某個人都是可以的;
section下面的每一行就是各個任務(wù)和起始時間以及需要的時長,可以定義指定開始時間,可以依賴上一個任務(wù)相對時間。
甘特圖的繪制還是十分簡單的,基本上就是定義一個個任務(wù)的邏輯,只要設(shè)置好開始時間和時長就可以了,看起來和寫起來很簡潔和方便。
流程圖
除了上面的時序圖和甘特圖之外,我們常用的還會有流程圖,還是參考我們上面登錄的例子,這次我們用流程圖來實現(xiàn)。
graph TB User(用戶) --> F[輸入賬號密碼] F --前端請求后端接口---> C[后端邏輯] C ==> D{校驗賬號密碼} D -.yes.-> E((登錄成功)) D -.no.-> F E --> Finish(進入首頁)
上面的例子的代碼如下,簡單說明下
graph TB:表示流程圖的方向,TB/TD表示從上到下,BT表示從下到上,RL表示從右到左,LR表示從左到右;
():圓括號表示起止框;
[]:中括號表示處理邏輯
–前端請求后端接口—>:表示包含文字和箭頭的實線,如果不要箭頭就去掉>就好;
==>:表示線條加粗,如果不加粗用–>即可;
{}:表示邏輯判斷;
-.yes.->:表示虛線有箭頭;
簡單的流程圖差不多就是上面這樣,不過說實話,流程圖的效果沒有時序圖和甘特圖的效果好,感覺流程圖畫起來有點復(fù)雜和丑了,不過也還是可以用的。
總結(jié)
除了上面的幾種圖形之外 mermaid 還支持類圖,狀態(tài)圖,ER 圖等等,在官方提供的站點上,我們可以進行體驗,地址是這個:https://mermaid.live,感興趣的小伙伴可以去體驗一下。
好了今天的文章就到這里,覺得有用的小伙伴記得三連走起,讓更多的小伙伴看到哦。
關(guān)鍵詞:
凡注有"實況網(wǎng)-重新發(fā)現(xiàn)生活"或電頭為"實況網(wǎng)-重新發(fā)現(xiàn)生活"的稿件,均為實況網(wǎng)-重新發(fā)現(xiàn)生活獨家版權(quán)所有,未經(jīng)許可不得轉(zhuǎn)載或鏡像;授權(quán)轉(zhuǎn)載必須注明來源為"實況網(wǎng)-重新發(fā)現(xiàn)生活",并保留"實況網(wǎng)-重新發(fā)現(xiàn)生活"的電頭。
熱點
- 古井貢郎等老酒漲價
- 反對“臺獨” 兩岸遲早會實現(xiàn)統(tǒng)一 | 專訪哈薩克斯坦總統(tǒng)托卡耶夫 | 高端訪談 天天時快訊
- 沒和張丹峰離婚,畢瀅不是小三,洪欣的道歉敗光了她僅存的好感-天天新消息
- 二十四節(jié)氣蘇州時令美食推薦榜發(fā)布 24道蘇州時令美食上榜
- 焦點滾動:王某(男,18歲)被刑拘!
- 硬碰硬,別克E5和比亞迪護衛(wèi)艦07你選誰?
- 三星推Galaxy S23 Ultra限量版套裝:手機、手表、無線充電板一起買便宜22%
- 科普帖!警惕畢業(yè)季8大求職陷阱|簡訊
- 我在汽車行業(yè),連設(shè)計軟件、仿真分析軟件的格式版本,還沒提國產(chǎn)工業(yè)軟件替代問題
- 金價每克“狂飆”至600元?國際金價創(chuàng)新高
頭條
- 中國星辰|天舟“專送” 使命必達_世界看點
- 收割、播種熱火朝天 各地搶抓農(nóng)時為豐產(chǎn)打好基礎(chǔ)
- 多地舉行跨區(qū)域地震救援實戰(zhàn)演練 錘煉隊伍應(yīng)急救援能力|今熱點
- 擴大“互聯(lián)網(wǎng)+護理服務(wù)”試點范圍 打通專業(yè)護理到家庭“最后一公里”
- 曾被光照亮,如今也想成為光!15年前被救的孩子們寫下了這些話|焦點短訊
- 財政部:下達2023年文化人才專項經(jīng)費共32737萬元
- 【國際漫評】上限無限! 天天通訊
- 環(huán)球速看:原創(chuàng)手繪 | 給所有孩子的“自救必修課”
- 南非學(xué)者:美國破壞地區(qū)戰(zhàn)略平衡 加劇緊張局勢|環(huán)球動態(tài)
- 中國星辰 | 天舟“家族”輸送“太空快遞”的“高光時刻”