0.目錄
1. 前言
Markdown是一種輕量級的標記語言，把作者從繁雜的排版工作中解放出來，實現易讀易寫的文章寫作，已經逐漸成爲事實上的行業標準。CSDN博客支持Markdown可以讓廣大博友更加專注於博客內容，大讚。但是，不少博友可能對Markdown比較生疏，本博接下來用一個系列文章《Markdown簡明教程》扼要介紹Markdown，希望可以對大家有所幫助。
系列教程目錄
- 關於Markdown
- Markdown基本使用
- Markdown表格和公式
- Markdown UML圖
- CSDN Markdown快速上手
- Markdown 參考手冊
本文爲《Markdown簡明教程》系列教程的第4篇Markdown UML圖，主要講解Markdown序列圖、流程圖等, 順便爲介紹了無需任何插件的在線繪製UML的Gravizo。
2. 序列圖
2.1 序列圖示例
基於js-sequence-diagrams實現了序列圖，使用下列的格式聲明一個序列圖：
在網頁上解析結果爲：
注意：所有的序列圖代碼需要放在一個語法類型爲sequence的代碼塊中。如下面代碼所示。
2.2 序列圖語法
序列圖的語法如下圖所示。
具體來說：
- 設置title，採用title: message。
title: 序列圖標題- 1
將編譯爲：
- 設置participant，採用participant: actor
participant A
participant B- 1
- 2
將編譯爲：
- 設置note，
- 左側note： note left of acotor： message
- 右側note： note right of actor: message,
- 覆蓋note： note over actor:message
note left of A: 左側note
note right of B: 右側note
note over C: 覆蓋note
note over A,B: 覆蓋多個actor
note over B,C: 測試下\n 換行- 1
- 2
- 3
- 4
- 5
將編譯爲：
- 設置會話，
- 實線實箭頭： actor->actor: message
- 虛線實箭頭： actor–>actor:message
- 實線虛箭頭： actor->>actor:message
- 虛線虛箭頭： actor–>>actor:message
A->A:自言自語
A->B:實線實箭頭
A-->B:虛線實箭頭
A->>B:實線虛箭頭
A-->>B:虛線虛箭頭- 1
- 2
- 3
- 4
- 5
將編譯爲：
下面的案例演示了序列圖語法的混合使用，參見代碼：
在網頁上解析之後結果爲：
3. 流程圖
3.1 流程圖示例
CSDN Markdown基於flowchart.js實現流程圖。一個簡單的流程格式如下代碼所示：
編譯之後結果爲：
注意：所有的流程圖代碼需要放在一個語法類型爲flow的代碼塊中。如下面代碼所示。
3.2 流程圖語法
流程圖繪製包括兩部分：節點定義和節點連接。
1. 節點定義
格式如下：
節點名稱=>節點類型: 提示文本- 1
- 節點名稱可隨意起，甚至支持中文。提示文本可以爲英文，可以爲中文，也可以爲空使用默認值。例如：
st=>start: start
or
kaishi=>start: 開始
or
起點=>start: 起點
or
start=>start- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 節點類型有start、operation、condition、end等，如下圖所示。
start=>start: 開始
login=>operation: 登陸
isLogin=>condition: 是否已登陸？
test=>operation: 進行測試
end=>end: 結束- 1
- 2
- 3
- 4
- 5
2. 節點連接
格式如下
一般節點連接：
節點->節點
條件判斷節點連接：
條件節點(yes)->正確應答節點
條件節點(no)->錯誤應答節點- 1
- 2
- 3
- 4
- 5
如下面代碼所示：
start->isLogin
isLogin(yes)->test
isLogin(no)->login->test
test->end- 1
- 2
- 3
- 4
編譯之後結果爲
接下來做一個複雜的案例，如下圖所示，請大家思考如何實現。
列出源代碼供大家參考。
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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4. Gravizo
在研究Markdown UML圖的時候，找到了不少在線繪製UML圖的方式，例如Dot、PlantUML和UMLGraph等方式，並且發現了一個不用使用任何插件就可調用圖片的方式-Gravizo。
例如，我們可以使用PlantUML的方式繪製一個用例圖，代碼如下。
。
@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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
然後，我們就可以使用下面代碼調用該圖片：
<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
'>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
本文爲《Markdown簡明教程》系列教程的第4篇Markdown UML圖，主要講解Markdown序列圖、流程圖等, 順便爲介紹了無需任何插件的在線繪製UML的Gravizo。下一篇文章我們來研讀CSDN Markdown的一些特性。
5. 聲明
前端開發whqet，關注前端開發，分享相關資源。csdn專家博客，王海慶希望能對您有所幫助，限於作者水平有限，出錯難免，歡迎拍磚！
歡迎任何形式的轉載，煩請註明裝載，保留本段文字。
本文原文鏈接，http://blog.csdn.net/whqet/article/details/44281463
歡迎大家訪問獨立博客http://whqet.github.io