真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖-創(chuàng)新互聯(lián)

Markdown是一個(gè)輕量級的標(biāo)記語言,使用普通文本編輯器就能快速編寫,不僅顯示格式豐富,功能也毫不含糊,在軟件開發(fā)和開源項(xiàng)目中使用非常普遍。有沒有想過Markdown也能寫出高大上的流程圖、時(shí)序圖、類圖?

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計(jì),萊西網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:萊西等地區(qū)。萊西做網(wǎng)站價(jià)格咨詢:18980820575

內(nèi)容目錄

  • md寫流程圖
    • 語法
      • 定義流程
      • 連接流程
      • 連接方向
    • 實(shí)例:
      • Web服務(wù)API請求
      • 緩存系統(tǒng)更新流程圖
  • md寫時(shí)序圖
    • 語法
    • 時(shí)序圖4類元素
    • 實(shí)例:Web服務(wù)異步任務(wù)調(diào)度時(shí)序圖
  • md寫UML類圖
    • 語法和元素
    • 類圖6種關(guān)系
    • 實(shí)例:Jext開源插件的類圖實(shí)例:到期工作日天數(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個(gè)方向,上下左右,跟在連接線開始的元素后面,(top), (bottom), (left), (right),默認(rèn)(bottom)
      op(right)->sub
    • 條件連接有兩種方向,只需指定yes或no:(yes, right), (yes, bottom),或者(no, right), (no, bottom),默認(rèn)(yes, bottom)
      cond(yes, right)

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

start=>start: 開始
io=>inputoutput: 輸入輸出
op=>operation: 操作
cond=>condition: 條件
sub=>subroutine: 子流程
end=>end: 結(jié)束

start->io->op(right)->cond
cond(no)->sub
cond(yes, right)->end

2,Web服務(wù)API請求時(shí)讀取緩存流程圖

start=>start: API請求
cache=>operation: 讀取Redis緩存
cached=>condition: 是否有緩存?
sendMq=>operation: 發(fā)送MQ,后臺(tái)服務(wù)更新緩存
info=>operation: 讀取信息
setCache=>operation: 保存緩存
end=>end: 返回信息

start->cache->cached
cached(yes)->sendMq
cached(no)->info
info->setCache
setCache->end
sendMq->end

顯示效果

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

3,Web服務(wù)緩存系統(tǒng)更新流程圖

start=>start: 接收到消息
info=>operation: 讀取信息
setCache=>operation: 更新緩存
end=>end: 處理結(jié)束

start->info->setCache->end

顯示效果

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

md在線編輯器:https://www.mdeditor.com/

二,時(shí)序圖

1,語法圖

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

2,時(shí)序圖4類元素

  • title: 標(biāo)題
  • participant:定義參與的成員,as定義別名
  • 流向箭頭
    • ->:實(shí)線黑體箭頭,同步調(diào)用
    • -->:虛線黑體箭頭,返回結(jié)果
    • ->>:實(shí)線空箭頭,異步消息
    • -->>:虛線空箭頭,返回結(jié)果
  • 注釋
    • note over:注釋,懸浮在成員上
    • note left of:注釋,成員左邊
    • note right of:注釋,成員右邊

3,Web服務(wù)異步任務(wù)調(diào)度時(shí)序圖示例

title: Web服務(wù)緩存更新時(shí)序圖
participant 數(shù)據(jù)中臺(tái) as api
participant 緩存 as cache
participant 消息隊(duì)列 as mq
participant 數(shù)據(jù)服務(wù) as srv

api->cache: 讀取緩存
cache-->api: 返回緩存
Note over api: 如果沒有讀到緩存,就調(diào)用數(shù)據(jù)服務(wù)
api->>mq: 請求更新緩存
mq->>srv: 觸發(fā)更新緩存
srv-->cache: 更新緩存

顯示效果

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

md在線編輯器:https://www.mdeditor.com/

三,UML類圖

1,語法

  • Title: 標(biāo)題
  • 注釋

    • ' xxx: 單行注釋以單引號開頭
    • /' xxx '/: 多行注釋
  • 類圖元素

    • interface:接口
    • abstract class:抽象類
    • class:類
  • 方法和屬性訪問權(quán)限
    • + public
    • - private
    • # protected
    • ~ package private

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

@startuml
Title 方法和屬性訪問權(quán)限示例

interface IHello {
+ method()
}

class Hello {
+ field1
- field2
# field3
+ method()
- method1()
# method2()
~ method3()
}
@enduml

2,類圖關(guān)系,1張表整理清楚常見6種關(guān)系,必須記住啦:泛化、實(shí)現(xiàn)、組合、聚合、關(guān)聯(lián)、依賴。

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

類或接口名稱前可包含包名稱,可加關(guān)鍵字namespace:
【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

@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
}
@enduml

3,分享一個(gè)Jext開源插件擴(kuò)展JIRA時(shí)畫的類圖

@startuml
Title 到期工作日天數(shù)

內(nèi)置DueWorkdaysField ..> DueWorkdays
預(yù)定義DueWorkdaysField ..> DueWorkdays
DueWorkdays ..> WorkdayHelper
DueWorkdays ..> HistoryHelper
DueWorkdays ..> StatusHelper
WorkdayHelper ..> DateUtil

class DueWorkdays{
+ getDueWorkdays()
}

class WorkdayHelper{
+ countWorkdays()
+ isHoliday()
}

class DateUtil{
+ isWeekend()
}
@enduml

顯示效果

【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖

在線編輯工具

  • 流程圖,時(shí)序圖:md在線編輯器:https://www.mdeditor.com/
  • UML類圖:PlantUML在線工具:http://www.plantuml.com/plantuml/uml/

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。


文章題目:【Markdown高級技巧】寫出高大上的流程圖、時(shí)序圖、類圖-創(chuàng)新互聯(lián)
URL網(wǎng)址:http://weahome.cn/article/jpooi.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部