建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
【Markdown高級技巧】寫出高大上的流程圖、時序圖、類圖-創(chuàng)新互聯(lián)
Markdown是一個輕量級的標記語言，使用普通文本編輯器就能快速編寫，不僅顯示格式豐富，功能也毫不含糊，在軟件開發(fā)和開源項目中使用非常普遍。有沒有想過Markdown也能寫出高大上的流程圖、時序圖、類圖？
內(nèi)容目錄
- md寫流程圖
- 語法
- 定義流程
- 連接流程
- 連接方向
- 實例：
- Web服務API請求
- 緩存系統(tǒng)更新流程圖
- 語法
- md寫時序圖
- 語法
- 時序圖4類元素
- 實例：Web服務異步任務調(diào)度時序圖
- md寫UML類圖
- 語法和元素
- 類圖6種關(guān)系
- 實例：Jext開源插件的類圖實例：到期工作日天數(shù)
一，流程圖
1，語法
- 定義流程：流程id=>類型: 顯示內(nèi)容
- start=>start: 開始
- io=>inputoutput: 輸入輸出
- op=>operation: 操作
- cond=>condition: 條件
- sub=>subroutine: 子流程
- end=>end: 結(jié)束
- 連接流程：將流程id使用->連接，支持級聯(lián)或者分行兩種寫法
- 級聯(lián)：start->io->op->cond
- 分行：
start->io io->op op->cond - 條件連接：添加(yes)或者(no)分支
cond(no)->sub cond(yes)->end
- 連接方向
- 支持4個方向，上下左右，跟在連接線開始的元素后面，(top), (bottom), (left), (right)，默認(bottom)
op(right)->sub - 條件連接有兩種方向，只需指定yes或no：(yes, right), (yes, bottom)，或者(no, right), (no, bottom)，默認(yes, bottom)
cond(yes, right)
- 支持4個方向，上下左右，跟在連接線開始的元素后面，(top), (bottom), (left), (right)，默認(bottom)
start=>start: 開始
io=>inputoutput: 輸入輸出
op=>operation: 操作
cond=>condition: 條件
sub=>subroutine: 子流程
end=>end: 結(jié)束
start->io->op(right)->cond
cond(no)->sub
cond(yes, right)->end2，Web服務API請求時讀取緩存流程圖
start=>start: API請求
cache=>operation: 讀取Redis緩存
cached=>condition: 是否有緩存？
sendMq=>operation: 發(fā)送MQ，后臺服務更新緩存
info=>operation: 讀取信息
setCache=>operation: 保存緩存
end=>end: 返回信息
start->cache->cached
cached(yes)->sendMq
cached(no)->info
info->setCache
setCache->end
sendMq->end顯示效果
3，Web服務緩存系統(tǒng)更新流程圖
start=>start: 接收到消息
info=>operation: 讀取信息
setCache=>operation: 更新緩存
end=>end: 處理結(jié)束
start->info->setCache->end顯示效果
md在線編輯器：https://www.mdeditor.com/
二，時序圖
1，語法圖
2，時序圖4類元素
- title: 標題
- participant：定義參與的成員，as定義別名
- 流向箭頭
- ->：實線黑體箭頭，同步調(diào)用
- -->：虛線黑體箭頭，返回結(jié)果
- ->>：實線空箭頭，異步消息
- -->>：虛線空箭頭，返回結(jié)果
- 注釋
- note over：注釋，懸浮在成員上
- note left of：注釋，成員左邊
- note right of：注釋，成員右邊
3，Web服務異步任務調(diào)度時序圖示例
title: Web服務緩存更新時序圖
participant 數(shù)據(jù)中臺 as api
participant 緩存 as cache
participant 消息隊列 as mq
participant 數(shù)據(jù)服務 as srv
api->cache: 讀取緩存
cache-->api: 返回緩存
Note over api: 如果沒有讀到緩存，就調(diào)用數(shù)據(jù)服務
api->>mq: 請求更新緩存
mq->>srv: 觸發(fā)更新緩存
srv-->cache: 更新緩存顯示效果
md在線編輯器：https://www.mdeditor.com/
三，UML類圖
1，語法
- Title: 標題
注釋
- ' xxx: 單行注釋以單引號開頭
- /' xxx '/: 多行注釋
類圖元素
- interface：接口
- abstract class：抽象類
- class：類
- 方法和屬性訪問權(quán)限
- + public
- - private
- # protected
- ~ package private
@startuml
Title 方法和屬性訪問權(quán)限示例
interface IHello {
+ method()
}
class Hello {
+ field1
- field2
# field3
+ method()
- method1()
# method2()
~ method3()
}
@enduml2，類圖關(guān)系，1張表整理清楚常見6種關(guān)系，必須記住啦：泛化、實現(xiàn)、組合、聚合、關(guān)聯(lián)、依賴。
類或接口名稱前可包含包名稱，可加關(guān)鍵字namespace：
@startuml
Title 包名稱示例
class BaseEntity
namespace com.hello {
.BaseEntity <|-- Meeting
.BaseEntity <|-- Person
Meeting o-- Person
}
namespace com.foo {
.BaseEntity <|-- Person
com.hello.Person <|-- Person
com.hello.Meeting o-- Person
}
@enduml3，分享一個Jext開源插件擴展JIRA時畫的類圖
@startuml
Title 到期工作日天數(shù)
內(nèi)置DueWorkdaysField ..> DueWorkdays
預定義DueWorkdaysField ..> DueWorkdays
DueWorkdays ..> WorkdayHelper
DueWorkdays ..> HistoryHelper
DueWorkdays ..> StatusHelper
WorkdayHelper ..> DateUtil
class DueWorkdays{
+ getDueWorkdays()
}
class WorkdayHelper{
+ countWorkdays()
+ isHoliday()
}
class DateUtil{
+ isWeekend()
}
@enduml顯示效果
在線編輯工具
- 流程圖，時序圖：md在線編輯器：https://www.mdeditor.com/
- UML類圖：PlantUML在線工具：http://www.plantuml.com/plantuml/uml/
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
新聞名稱：【Markdown高級技巧】寫出高大上的流程圖、時序圖、類圖-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://fisionsoft.com.cn/article/jpooi.html
