【Tools】MarkDown教程(四)-MarkDown中的UML图
生活随笔
收集整理的這篇文章主要介紹了
【Tools】MarkDown教程(四)-MarkDown中的UML图
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
00. 目錄
文章目錄
- 00. 目錄
- 01. 序列圖示例
- 02. 序列圖語法
- 03. 流程圖示例
- 04. 流程圖語法
- 05. Gravizo
- 06. 甘特圖樣例
- 07. 其它參考示例
- 7.1 UML標(biāo)準(zhǔn)時(shí)序圖樣例
- 7.2 UML時(shí)序圖源碼復(fù)雜樣例
- 7.3 UML時(shí)序圖源碼樣例
- 7.4 **標(biāo)準(zhǔn)流程圖源碼格式（橫向）**
- 7.5 標(biāo)準(zhǔn)流程圖源碼格式
- 7.6 豎向流程圖源碼格式
- 7.7 橫向流程圖源碼格式
- 08. 附錄
01. 序列圖示例
基于js-sequence-diagrams實(shí)現(xiàn)了序列圖，使用下列的格式聲明一個(gè)序列圖
Markdown代碼
?```mermaid sequenceDiagram DHCP客戶機(jī)-->>DHCP服務(wù)器: IP租約請(qǐng)求 DHCP服務(wù)器-->>DHCP客戶機(jī): IP租約提供 DHCP客戶機(jī)-->>DHCP服務(wù)器: IP租約選擇 DHCP服務(wù)器-->>DHCP客戶機(jī): IP租約確認(rèn)?```網(wǎng)頁顯示效果
DHCP客戶機(jī)DHCP服務(wù)器IP租約請(qǐng)求IP租約提供IP租約選擇IP租約確認(rèn)DHCP客戶機(jī)DHCP服務(wù)器標(biāo)題：復(fù)雜使用注意：所有的序列圖代碼需要放在一個(gè)語法類型為sequence的代碼塊中。
02. 序列圖語法
序列圖的語法如下圖所示。
具體來說：
- 設(shè)置title，采用title: message。
MarkDown代碼
title: 序列圖標(biāo)題網(wǎng)頁顯示效果
序列圖標(biāo)題- 設(shè)置participant，采用participant: actor
MarkDown代碼
participant A participant B網(wǎng)頁顯示效果
ABAB序列圖標(biāo)題-
設(shè)置note，
- 左側(cè)note： note left of acotor： message
- 右側(cè)note： note right of actor: message,
- 覆蓋note： note over actor:message
MarkDown代碼
note left of A: 左側(cè)note note right of B: 右側(cè)note note over C: 覆蓋note note over A,B: 覆蓋多個(gè)actor note over B,C: 測(cè)試下\n 換行網(wǎng)頁顯示效果
ABC左側(cè)note右側(cè)note覆蓋note覆蓋多個(gè)actor測(cè)試下 換行ABC序列圖標(biāo)題- 設(shè)置會(huì)話，
- 實(shí)線實(shí)箭頭： actor->actor: message
- 虛線實(shí)箭頭： actor–>actor:message
- 實(shí)線虛箭頭： actor->>actor:message
- 虛線虛箭頭： actor–>>actor:message
MarkDown代碼
A->A:自言自語A->B:實(shí)線實(shí)箭頭A-->B:虛線實(shí)箭頭A->>B:實(shí)線虛箭頭A-->>B:虛線虛箭頭網(wǎng)頁顯示效果
AB自言自語實(shí)線實(shí)箭頭虛線實(shí)箭頭實(shí)線虛箭頭虛線虛箭頭AB序列圖標(biāo)題下面的案例演示了序列圖語法的混合使用，參見代碼：
MarkDown代碼
Title: 作業(yè)通知提交序列圖 教師-->班長(zhǎng): 通知明天交作業(yè) note left of 教師:通知 班長(zhǎng)-->同學(xué)們:記得明天交作業(yè) 同學(xué)們->>班長(zhǎng):了解 同學(xué)們-->教師: 交作業(yè) note right of 同學(xué)們:作業(yè)網(wǎng)頁顯示效果
教師班長(zhǎng)同學(xué)們通知明天交作業(yè)通知記得明天交作業(yè)了解交作業(yè)作業(yè)教師班長(zhǎng)同學(xué)們作業(yè)通知提交序列圖03. 流程圖示例
CSDN Markdown基于flowchart.js實(shí)現(xiàn)流程圖。一個(gè)簡(jiǎn)單的流程格式如下代碼所示：
MarkDown代碼
st=>start: Start e=>end op=>operation: My Operation cond=>condition: Yes or No?st->op->cond cond(yes)->e cond(no)->op網(wǎng)頁效果顯示
Created with Rapha?l 2.2.0StartMy OperationYes or No?Endyesno注意：所有的流程圖代碼需要放在一個(gè)語法類型為flow的代碼塊中。
04. 流程圖語法
格式如下：
一般節(jié)點(diǎn)連接：節(jié)點(diǎn)->節(jié)點(diǎn) 條件判斷節(jié)點(diǎn)連接：條件節(jié)點(diǎn)(yes)->正確應(yīng)答節(jié)點(diǎn)條件節(jié)點(diǎn)(no)->錯(cuò)誤應(yīng)答節(jié)點(diǎn)MarkDown代碼
start->isLogin isLogin(yes)->test isLogin(no)->login->test test->end網(wǎng)頁顯示效果
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網(wǎng)頁顯示效果
Created with Rapha?l 2.2.0開始是否已登錄？選擇一張圖片格式是否正確？完成資料資料是否符合要求？完成登陸yesnoyesnoyesno05. Gravizo
在研究Markdown UML圖的時(shí)候，找到了不少在線繪制UML圖的方式，例如Dot、PlantUML和UMLGraph等方式，并且發(fā)現(xiàn)了一個(gè)不用使用任何插件就可調(diào)用圖片的方式-Gravizo。
例如，我們可以使用PlantUML的方式繪制一個(gè)用例圖。
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可以使用下面代碼調(diào)用該圖片
<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 %% 語法示例ganttdateFormat YYYY-MM-DDtitle 軟件開發(fā)甘特圖section 設(shè)計(jì)需求 :done, des1, 2014-01-06,2014-01-08原型 :active, des2, 2014-01-09, 3dUI設(shè)計(jì) : des3, after des2, 5d未來任務(wù) : des4, after des3, 5dsection 開發(fā)學(xué)習(xí)準(zhǔn)備理解需求 :crit, done, 2014-01-06,24h設(shè)計(jì)框架 :crit, done, after des2, 2d開發(fā) :crit, active, 3d未來任務(wù) :crit, 5d耍 :2dsection 測(cè)試功能測(cè)試 :active, a1, after des3, 3d壓力測(cè)試 :after a1 , 20h測(cè)試報(bào)告 : 48h ?```網(wǎng)頁顯示效果
Mon 06Mon 13Mon 20需求 原型 UI設(shè)計(jì) 未來任務(wù) 學(xué)習(xí)準(zhǔn)備理解需求 設(shè)計(jì)框架 開發(fā) 未來任務(wù) 耍 功能測(cè)試 壓力測(cè)試 測(cè)試報(bào)告 設(shè)計(jì)開發(fā)測(cè)試軟件開發(fā)甘特圖07. 其它參考示例
7.1 UML標(biāo)準(zhǔn)時(shí)序圖樣例
MarkDown源碼
?```mermaid %% 時(shí)序圖例子,-> 直線，-->虛線，->>實(shí)線箭頭sequenceDiagramparticipant 張三participant 李四張三->王五: 王五你好嗎？loop 健康檢查王五->王五: 與疾病戰(zhàn)斗endNote right of 王五: 合理 食物 <br/>看醫(yī)生...李四-->>張三: 很好!王五->李四: 你怎么樣?李四-->王五: 很好! ?```網(wǎng)頁顯示效果
張三李四王五王五你好嗎？與疾病戰(zhàn)斗loop[ 健康檢查 ]合理 食物 看醫(yī)生...很好!你怎么樣?很好!張三李四王五作業(yè)通知提交序列圖7.2 UML時(shí)序圖源碼復(fù)雜樣例
MarkDown源碼
?```mermaid sequenceDiagram Title: 標(biāo)題：復(fù)雜使用 對(duì)象A->>對(duì)象B: 對(duì)象B你好嗎?（請(qǐng)求） Note right of 對(duì)象B: 對(duì)象B的描述 Note left of 對(duì)象A: 對(duì)象A的描述(提示) 對(duì)象B-->>對(duì)象A: 我很好(響應(yīng)) 對(duì)象B->>小三: 你好嗎 小三-->>對(duì)象A: 對(duì)象B找我了 對(duì)象A->>對(duì)象B: 你真的好嗎？ Note over 小三,對(duì)象B: 我們是朋友 participant C Note right of C: 沒人陪我玩 ?``` 對(duì)象A對(duì)象B小三C對(duì)象B你好嗎?（請(qǐng)求）對(duì)象B的描述對(duì)象A的描述(提示)我很好(響應(yīng))你好嗎對(duì)象B找我了你真的好嗎？我們是朋友沒人陪我玩對(duì)象A對(duì)象B小三C標(biāo)題：復(fù)雜使用7.3 UML時(shí)序圖源碼樣例
MarkDown源碼
?```mermaid sequenceDiagram 對(duì)象A->>對(duì)象B: 對(duì)象B你好嗎?（請(qǐng)求） Note right of 對(duì)象B: 對(duì)象B的描述 Note left of 對(duì)象A: 對(duì)象A的描述(提示) 對(duì)象B-->>對(duì)象A: 我很好(響應(yīng)) 對(duì)象A->>對(duì)象B: 你真的好嗎？ ?```網(wǎng)頁顯示效果
對(duì)象A對(duì)象B對(duì)象B你好嗎?（請(qǐng)求）對(duì)象B的描述對(duì)象A的描述(提示)我很好(響應(yīng))你真的好嗎？對(duì)象A對(duì)象B標(biāo)題：復(fù)雜使用7.4 標(biāo)準(zhǔn)流程圖源碼格式（橫向）
MarkDown源碼
?```mermaid flowchat st=>start: 開始框 op=>operation: 處理框 cond=>condition: 判斷框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 輸入輸出框 e=>end: 結(jié)束框 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op ?```網(wǎng)頁顯示效果
Created with Rapha?l 2.2.0開始框處理框判斷框(是或否?)輸入輸出框結(jié)束框子流程yesno7.5 標(biāo)準(zhǔn)流程圖源碼格式
MarkDown源碼
?```mermaid flowchat st=>start: 開始框 op=>operation: 處理框 cond=>condition: 判斷框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 輸入輸出框 e=>end: 結(jié)束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op ?```網(wǎng)頁顯示效果
Created with Rapha?l 2.2.0開始框處理框判斷框(是或否?)輸入輸出框yes7.6 豎向流程圖源碼格式
MarkDown源碼
?```mermaid graph TD A[方形] --> B(圓角)B --> C{條件a}C --> |a=1| D[結(jié)果1]C --> |a=2| E[結(jié)果2]F[豎向流程圖] ?```網(wǎng)頁顯示效果
a=1a=2方形圓角條件a結(jié)果1結(jié)果2豎向流程圖7.7 橫向流程圖源碼格式
MarkDown源碼
?```mermaid graph LR A[方形] -->B(圓角)B --> C{條件a}C -->|a=1| D[結(jié)果1]C -->|a=2| E[結(jié)果2]F[橫向流程圖] ?```網(wǎng)頁顯示效果
a=1a=2方形圓角條件a結(jié)果1結(jié)果2橫向流程圖08. 附錄
總結(jié)
以上是生活随笔為你收集整理的【Tools】MarkDown教程(四)-MarkDown中的UML图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Tools】MarkDown教程(三)
- 下一篇： 【Tools】MarkDown教程(五)