這些復(fù)雜圖形的繪制都是使用代碼塊實(shí)現(xiàn)的橘茉，指定代碼塊的解析語言，按照響應(yīng)的繪制語法即可實(shí)現(xiàn)姨丈。
- 流程圖——指定
mermaid（樣式流程圖） 或flow（標(biāo)準(zhǔn)流程圖）解析語言 - 時序圖——指定
sequence（標(biāo)準(zhǔn)時序圖） 或mermaid（樣式時序圖） 解析語言 - 甘特圖——指定
mermaid解析語言
一畅卓、流程圖
1. 樣式流程圖
基本語法：
-
graph指定流程圖方向：graph LR橫向，graph TD縱向 - 元素的形狀定義：
-
id[描述]以直角矩形繪制 -
id(描述)以圓角矩形繪制 -
id{描述}以菱形繪制 -
id>描述]以不對稱矩形繪制 -
id((描述))以圓形繪制
-
- 線條定義：
-
A-->B帶箭頭指向 -
A---B不帶箭頭連接 -
A-.-B虛線連接 -
A-.->B虛線指向 -
A==>B加粗箭頭指向 -
A--描述---B不帶箭頭指向并在線段中間添加描述 -
A--描述-->B帶描述的箭頭指向 -
A-.描述.->B帶描述的虛線連指向 -
A==描述==>B帶描述的加粗箭頭指向
-
- 子流程圖定義：
subgraph title
graph direction
end
示例：
```mermaid
graph LR
A(開始) -->B(起床)
B --天氣不好--- C>干活]
C ==> D{休息時間到了}
D -.yes.-> E((休息))
D -.no.-> C
E --> F(吃飯)
樣式流程圖
2. 標(biāo)準(zhǔn)流程圖
基本語法：
定義模塊
id=>關(guān)鍵字: 描述（“描述”的前面必須有空格蟋恬，“=>” 兩端不能有空格）-
關(guān)鍵字：
-
start流程開始翁潘，以圓角矩形繪制 -
opearation操作，以直角矩形繪制 -
condition判斷歼争，以菱形繪制 -
subroutine子流程拜马，以左右?guī)Э瞻卓虻木匦卫L制 -
inputoutput輸入輸出渗勘，以平行四邊形繪制 -
end流程結(jié)束，以圓角矩形繪制
-
-
定義模塊間的流向：
-
模塊1 id->模塊2 id：一般的箭頭指向 -
條件模塊id (描述)->模塊id(direction)：條件模塊跳轉(zhuǎn)到對應(yīng)的執(zhí)行模塊俩莽，并指定對應(yīng)分支的布局方向
-
示例：
```flow
st=>start: 開始
ipt=>inputoutput: 輸入一個x
op=>operation: 處理加工x+1
cond=>condition: 溢出（是或否旺坠？）
sub=>subroutine: 子流程
io=>inputoutput: 輸出x
ed=>end: 結(jié)束
st->ipt->op->cond
cond(yes)->io->ed
cond(no)->sub->io->ed
標(biāo)準(zhǔn)流程圖
二、 時序圖
1. 標(biāo)準(zhǔn)時序圖
基本語法：
-
Title:標(biāo)題：指定時序圖的標(biāo)題 -
Note direction of 對象:描述： 在對象的某一側(cè)添加描述扮超，direction可以為right/left/over取刃，對象可以是多個對象，以,作為分隔符 -
participant 對象：創(chuàng)建一個對象 -
loop...end：創(chuàng)建一個循環(huán)體 -
對象A->對象B:描述： 繪制A與B之間的對話出刷，以實(shí)線連接-
->實(shí)線實(shí)心箭頭指向 -
-->虛線實(shí)心箭頭指向 -
->>實(shí)線小箭頭指向 -
-->>虛線小箭頭指向
-
示例：
```sequence
Title:時序圖示例
客戶端->服務(wù)端: 我想找你拿下數(shù)據(jù) SYN
服務(wù)端-->客戶端: 我收到你的請求啦 ACK+SYN
客戶端->>服務(wù)端: 我收到你的確認(rèn)啦璧疗，我們開始通信吧 ACK
Note right of 服務(wù)端: 我是一個服務(wù)端
Note left of 客戶端: 我是一個客戶端
Note over 服務(wù)端,客戶端: TCP 三次握手
participant 觀察者
標(biāo)準(zhǔn)時序圖
2. 帶樣式時序圖
基本語法同標(biāo)準(zhǔn)時序圖，不同的是
- 需要使用
mermaid解析馁龟，并在開頭使用關(guān)鍵字sequenceDiagram指明 - 線段的樣式遵循
mermaid的解析方式-
->： 實(shí)線連接 -
-->：虛線連接 -
->>：實(shí)線箭頭指向 -
-->>：虛線箭頭指向
-
示例：
```mermaid
sequenceDiagram
對象A->對象B:中午吃什么崩侠？
對象B->>對象A: 隨便
loop 思考
對象A->對象A: 努力搜索
end
對象A-->>對象B: 火鍋？
對象B->>對象A: 可以
Note left of 對象A: 我是一個對象A
Note right of 對象B: 我是一個對象B
participant 對象C
Note over 對象C: 我自己說了算
樣式時序圖
三坷檩、甘特圖
基本語法：
- 使用
mermaid解析語言啦膜，在開頭使用關(guān)鍵字gantt指明 -
deteFormat 格式指明日期的顯示格式 -
title 標(biāo)題設(shè)置圖標(biāo)的標(biāo)題 -
section 描述定義縱向上的一個環(huán)節(jié) - 定義步驟：每個步驟有兩種狀態(tài)
done（已完成）/active（執(zhí)行中）描述: 狀態(tài),id,開始日期,結(jié)束日期/持續(xù)時間描述: 狀態(tài)[,id],after id2,持續(xù)時間-
crit：可用于標(biāo)記該步驟需要被修正，將高亮顯示 - 如果不指定具體的開始時間或在某個步驟之后淌喻，將默認(rèn)依次順序排列
示例：
```mermaid
gantt
dateFormat YYYY-MM-DD
title 軟件開發(fā)甘特圖
section 設(shè)計
需求:done,des1, 2019-01-06,2019-01-08
原型:active,des2, 2019-01-09, 3d
UI設(shè)計:des3, after des2, 5d
未來任務(wù):des4, after des3, 5d
section 開發(fā)
學(xué)習(xí)準(zhǔn)備理解需求:crit, done, 2019-01-06,24h
設(shè)計框架:crit, done, after des2, 2d
開發(fā):crit, active, 3d
未來任務(wù):crit, 5d
休息時間:2d
section 測試
功能測試:active, a1, after des3, 3d
壓力測試:after a1, 20h
測試報告: 48h
甘特圖
