00. 目錄
文章目錄
01. 序列圖示例
基於js-sequence-diagrams實現了序列圖，使用下列的格式聲明一個序列圖
Markdown代碼
```mermaid
sequenceDiagram
DHCP客戶機-->>DHCP服務器: IP租約請求
DHCP服務器-->>DHCP客戶機: IP租約提供
DHCP客戶機-->>DHCP服務器: IP租約選擇
DHCP服務器-->>DHCP客戶機: IP租約確認
```
網頁顯示效果
注意：所有的序列圖代碼需要放在一個語法類型爲sequence的代碼塊中。
02. 序列圖語法
序列圖的語法如下圖所示。
具體來說：
- 設置title，採用title: message。
MarkDown代碼
title: 序列圖標題
網頁顯示效果
- 設置participant，採用participant: actor
MarkDown代碼
participant A
participant B
網頁顯示效果
-
設置note，
- 左側note： note left of acotor： message
- 右側note： note right of actor: message,
- 覆蓋note： note over actor:message
MarkDown代碼
note left of A: 左側note
note right of B: 右側note
note over C: 覆蓋note
note over A,B: 覆蓋多個actor
note over B,C: 測試下\n 換行
網頁顯示效果
- 設置會話，
- 實線實箭頭： actor->actor: message
- 虛線實箭頭： actor–>actor:message
- 實線虛箭頭： actor->>actor:message
- 虛線虛箭頭： actor–>>actor:message
MarkDown代碼
A->A:自言自語
A->B:實線實箭頭
A-->B:虛線實箭頭
A->>B:實線虛箭頭
A-->>B:虛線虛箭頭
網頁顯示效果
下面的案例演示了序列圖語法的混合使用，參見代碼：
MarkDown代碼
Title: 作業通知提交序列圖
教師-->班長: 通知明天交作業
note left of 教師:通知
班長-->同學們:記得明天交作業
同學們->>班長:瞭解
同學們-->教師: 交作業
note right of 同學們:作業
網頁顯示效果
03. 流程圖示例
CSDN Markdown基於flowchart.js實現流程圖。一個簡單的流程格式如下代碼所示：
MarkDown代碼
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?
st->op->cond
cond(yes)->e
cond(no)->op
網頁效果顯示
注意：所有的流程圖代碼需要放在一個語法類型爲flow的代碼塊中。
04. 流程圖語法
格式如下：
一般節點連接：
節點->節點
條件判斷節點連接：
條件節點(yes)->正確應答節點
條件節點(no)->錯誤應答節點
MarkDown代碼
start->isLogin
isLogin(yes)->test
isLogin(no)->login->test
test->end
網頁顯示效果
MarkDown代碼
start=>start: 開始
isLogin=>condition: 是否已登錄？
login=>operation: 登陸
selectPic=>operation: 選擇一張圖片
isPic=>condition: 格式是否正確？
doIt=>operation: 完成資料
isRight=>condition: 資料是否符合要求？
end=>end: 完成
start->isLogin
isLogin(yes)->selectPic
isLogin(no)->login->selectPic
selectPic->isPic
isPic(yes)->doIt->isRight
isPic(no)->selectPic
isRight(yes)->end
isRight(no)->doIt
網頁顯示效果
05. Gravizo
在研究Markdown UML圖的時候，找到了不少在線繪製UML圖的方式，例如Dot、PlantUML和UMLGraph等方式，並且發現了一個不用使用任何插件就可調用圖片的方式-Gravizo。
例如，我們可以使用PlantUML的方式繪製一個用例圖。
MarkDown代碼
@startuml
left to right direction
skinparam packageStyle rect
actor customer
actor clerk
rectangle checkout {
customer -- (checkout)
(checkout) .> (payment) : include
(help) .> (checkout) : extends
(checkout) -- clerk
}
@enduml
可以使用下面代碼調用該圖片
<img src='http://g.gravizo.com/g?
@startuml
left to right direction;
skinparam packageStyle rect;
actor customer;
actor clerk;
rectangle checkout {
customer -- (checkout);
(checkout) .> (payment) : include;
(help) .> (checkout) : extends;
(checkout) -- clerk;
}
@enduml
'>
06. 甘特圖樣例
MarkDown代碼
```mermaid
%% 語法示例
gantt
dateFormat YYYY-MM-DD
title 軟件開發甘特圖
section 設計
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI設計 : des3, after des2, 5d
未來任務 : des4, after des3, 5d
section 開發
學習準備理解需求 :crit, done, 2014-01-06,24h
設計框架 :crit, done, after des2, 2d
開發 :crit, active, 3d
未來任務 :crit, 5d
耍 :2d
section 測試
功能測試 :active, a1, after des3, 3d
壓力測試 :after a1 , 20h
測試報告 : 48h
```
網頁顯示效果
07. 其它參考示例
7.1 UML標準時序圖樣例
MarkDown源碼
```mermaid
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
sequenceDiagram
participant 張三
participant 李四
張三->王五: 王五你好嗎？
loop 健康檢查
王五->王五: 與疾病戰鬥
end
Note right of 王五: 合理 食物 <br/>看醫生...
李四-->>張三: 很好!
王五->李四: 你怎麼樣?
李四-->王五: 很好!
```
網頁顯示效果
7.2 UML時序圖源碼複雜樣例
MarkDown源碼
```mermaid
sequenceDiagram
Title: 標題：複雜使用
對象A->>對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->>對象A: 我很好(響應)
對象B->>小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->>對象B: 你真的好嗎？
Note over 小三,對象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
```
7.3 UML時序圖源碼樣例
MarkDown源碼
```mermaid
sequenceDiagram
對象A->>對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->>對象A: 我很好(響應)
對象A->>對象B: 你真的好嗎？
```
網頁顯示效果
7.4 標準流程圖源碼格式（橫向）
MarkDown源碼
```mermaid
flowchat
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
網頁顯示效果
7.5 標準流程圖源碼格式
MarkDown源碼
```mermaid
flowchat
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
網頁顯示效果
7.6 豎向流程圖源碼格式
MarkDown源碼
```mermaid
graph TD
A[方形] --> B(圓角)
B --> C{條件a}
C --> |a=1| D[結果1]
C --> |a=2| E[結果2]
F[豎向流程圖]
```
網頁顯示效果
7.7 橫向流程圖源碼格式
MarkDown源碼
```mermaid
graph LR
A[方形] -->B(圓角)
B --> C{條件a}
C -->|a=1| D[結果1]
C -->|a=2| E[結果2]
F[橫向流程圖]
```
網頁顯示效果