建站
咨詢
售后
建站咨詢
新聞中心
作為開(kāi)發(fā)人員，日常工作中難免會(huì)遇到一些需要畫(huà)圖的時(shí)候，特別是在寫(xiě)一些接口文檔的時(shí)候，畫(huà)一些流程圖或者時(shí)序圖是很重要的。
發(fā)展壯大離不開(kāi)廣大客戶長(zhǎng)期以來(lái)的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都辦公空間設(shè)計(jì)等，在網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開(kāi)發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。
那么小伙伴們平常都是通過(guò)什么軟件來(lái)畫(huà)圖的呢？
了不起最近發(fā)現(xiàn)一個(gè)很不錯(cuò)的開(kāi)源項(xiàng)目 Mermaid，可以讓大家通過(guò) markdown 語(yǔ)法來(lái)進(jìn)行畫(huà)圖，使用起來(lái)非常絲滑。
下面我們通過(guò)下面的幾個(gè)例子來(lái)學(xué)習(xí)一下如何使用Mermaid。
時(shí)序圖
假設(shè)我們現(xiàn)在要設(shè)計(jì)一個(gè)用戶登錄的功能，用戶在前端頁(yè)面上輸入賬號(hào)和密碼，前端調(diào)用后端的接口，后端再通過(guò)查詢數(shù)據(jù)進(jìn)行數(shù)據(jù)校驗(yàn)，然后返回登錄成功還是失敗。這里整個(gè)系統(tǒng)我們分為用戶，前端，后端，數(shù)據(jù)庫(kù)四個(gè)角色。
用戶：輸入賬號(hào)和密碼
前端：發(fā)起登錄請(qǐng)求
后端：查詢數(shù)據(jù)庫(kù)并驗(yàn)證賬號(hào)合法性
數(shù)據(jù)庫(kù)：存儲(chǔ)賬號(hào)信息
整個(gè)的時(shí)序圖的效果如下，我們先看效果再來(lái)分析如何實(shí)現(xiàn)
sequenceDiagram
actor User
participant F as 前端
participant E as 后端
participant M as 數(shù)據(jù)庫(kù)
User ->> F: 賬號(hào)/密碼
Note left of User: 用戶輸入賬號(hào)和密碼
loop 定時(shí)刷新
F ->> E: 假設(shè)這里用個(gè)刷新功能請(qǐng)求
E -->> F: 返回刷新結(jié)果
end
F -->> E: 請(qǐng)求后端接口
Note right of F:發(fā)送請(qǐng)求
E ->> M: 進(jìn)行數(shù)據(jù)庫(kù)查詢
M ->> + E: 返回用戶信息
E -->> E: 校驗(yàn)賬號(hào)密碼是否正確
E -->> - F: 返回校驗(yàn)結(jié)果
F -->> User: 提示用戶登錄成功或者失敗上面的時(shí)序圖完整的代碼如上所示，仔細(xì)看一下我們就可以基本上猜到什么字符大概是什么意思，了不起這里簡(jiǎn)單解釋一下
sequenceDiagram：是一個(gè)關(guān)鍵字，代表我們當(dāng)前要繪制的是一個(gè)時(shí)序圖；
actor：創(chuàng)建一個(gè)用戶角色；
participant：表示系統(tǒng)的參與者，這里我們定義了前端，后端，數(shù)據(jù)庫(kù)三個(gè)參與者；
->> 和 -->>：一個(gè)是實(shí)線一個(gè)是虛線，表示從某個(gè)角色或者參與者到另一個(gè)角色或者參與者，如果符號(hào)前后是同一個(gè)角色或者參與者，則表示自己指向自己。如果只要連線，不想要箭頭的話，就用這種 -> 和 -->。簡(jiǎn)單來(lái)說(shuō)就是一個(gè) - 表示實(shí)現(xiàn)，兩個(gè) -- 表示虛線，一個(gè)箭頭表示沒(méi)有箭頭，兩個(gè)箭頭表示一個(gè)箭頭。
Note ... of ...：表示在某個(gè)角色或者參與者的左邊或者右邊添加一個(gè)備注；
loop ... end..：表示一個(gè)循環(huán)；
怎么樣看上去是不是很簡(jiǎn)單的樣子，保證大家三分鐘就能學(xué)會(huì)，快實(shí)操起來(lái)吧。
甘特圖
除了時(shí)序圖，還有一種比較常見(jiàn)的就是甘特圖，雖然這種圖開(kāi)發(fā)人員一般很少會(huì)用到，但是對(duì)于一些項(xiàng)目管理或者有明顯的時(shí)間節(jié)點(diǎn)要求的項(xiàng)目，還是經(jīng)常會(huì)用到的。
上面的甘特圖代碼如下所示
gantt
title 會(huì)員體系項(xiàng)目
dateFormat YYYY-MM-DD
section 需求
輸出PRD文檔:a1, 2023-05-09, 3d
PRD評(píng)審:a2, after a1 , 1d
UED評(píng)審:after a2 , 1d
section 開(kāi)發(fā)
技術(shù)方案設(shè)計(jì):a3,2023-05-14,3d
技術(shù)方案評(píng)審:a4,after a3,1d
技術(shù)開(kāi)發(fā):a5,after a4,10d
section 測(cè)試
用例評(píng)審:a6,after a5,1d
測(cè)試:after a6,5d這里甘特圖的效果還是可以的，而且畫(huà)起來(lái)十分方便，沒(méi)有復(fù)雜的邏輯和曲線以及箭頭之類的，順序時(shí)間線往下寫(xiě)就行了。只要定義好各自的任務(wù)就可以按照時(shí)間線往下寫(xiě)了。
gantt：甘特圖的關(guān)鍵字；
title：定義一個(gè)項(xiàng)目名稱；
dataFormat：定義號(hào)日期的格式；
section：每個(gè) section 可以表示一個(gè)角色分組，可以具體到某個(gè)人都是可以的；
section 下面的每一行就是各個(gè)任務(wù)和起始時(shí)間以及需要的時(shí)長(zhǎng)，可以定義指定開(kāi)始時(shí)間，可以依賴上一個(gè)任務(wù)相對(duì)時(shí)間。
甘特圖的繪制還是十分簡(jiǎn)單的，基本上就是定義一個(gè)個(gè)任務(wù)的邏輯，只要設(shè)置好開(kāi)始時(shí)間和時(shí)長(zhǎng)就可以了，看起來(lái)和寫(xiě)起來(lái)很簡(jiǎn)潔和方便。
流程圖
除了上面的時(shí)序圖和甘特圖之外，我們常用的還會(huì)有流程圖，還是參考我們上面登錄的例子，這次我們用流程圖來(lái)實(shí)現(xiàn)。
graph TB
User(用戶) --> F[輸入賬號(hào)密碼]
F --前端請(qǐng)求后端接口---> C[后端邏輯]
C ==> D{校驗(yàn)賬號(hào)密碼}
D -.yes.-> E((登錄成功))
D -.no.-> F
E --> Finish(進(jìn)入首頁(yè))上面的例子的代碼如下，簡(jiǎn)單說(shuō)明下
graph TB：表示流程圖的方向，TB/TD 表示從上到下，BT 表示從下到上，RL 表示從右到左，LR 表示從左到右；
()：圓括號(hào)表示起止框；
[]：中括號(hào)表示處理邏輯
--前端請(qǐng)求后端接口--->：表示包含文字和箭頭的實(shí)線，如果不要箭頭就去掉> 就好；
==>：表示線條加粗，如果不加粗用 --> 即可；
{}：表示邏輯判斷；
-.yes.->：表示虛線有箭頭；
簡(jiǎn)單的流程圖差不多就是上面這樣，不過(guò)說(shuō)實(shí)話，流程圖的效果沒(méi)有時(shí)序圖和甘特圖的效果好，感覺(jué)流程圖畫(huà)起來(lái)有點(diǎn)復(fù)雜和丑了，不過(guò)也還是可以用的。
總結(jié)
除了上面的幾種圖形之外 mermaid 還支持類圖，狀態(tài)圖，ER 圖等等，在官方提供的站點(diǎn)上，我們可以進(jìn)行體驗(yàn)，地址是這個(gè)：https://mermaid.live，感興趣的小伙伴可以去體驗(yàn)一下。
好了今天的文章就到這里，覺(jué)得有用的小伙伴記得三連走起，讓更多的小伙伴看到哦。
網(wǎng)站題目：Mermaid：用Markdown語(yǔ)法來(lái)實(shí)現(xiàn)繪制各種圖
網(wǎng)站路徑：http://m.5511xx.com/article/djdeigj.html
