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

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

內容目錄

• md寫流程圖
  • 語法
    • 定義流程
    • 連接流程
    • 連接方向
  • 實例：
    • Web服務API請求
    • 緩存系統更新流程圖
• md寫時序圖
  • 語法
  • 時序圖4類元素
  • 實例：Web服務異步任務調度時序圖
• md寫UML類圖
  • 語法和元素
  • 類圖6種關系
  • 實例：Jext開源插件的類圖實例：到期工作日天數

一，流程圖

1，語法

• 定義流程：流程id=>類型: 顯示內容
  • start=>start: 開始
  • io=>inputoutput: 輸入輸出
  • op=>operation: 操作
  • cond=>condition: 條件
  • sub=>subroutine: 子流程
  • end=>end: 結束
• 連接流程：將流程id使用->連接，支持級聯或者分行兩種寫法
  • 級聯：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)

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

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

2，Web服務API請求時讀取緩存流程圖

start=>start: API請求
cache=>operation: 讀取Redis緩存
cached=>condition: 是否有緩存？
sendMq=>operation: 發送MQ，后臺服務更新緩存
info=>operation: 讀取信息
setCache=>operation: 保存緩存
end=>end: 返回信息

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

顯示效果

3，Web服務緩存系統更新流程圖

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

start->info->setCache->end

顯示效果

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

二，時序圖

1，語法圖

2，時序圖4類元素

• title: 標題
• participant：定義參與的成員，as定義別名
• 流向箭頭
  • ->：實線黑體箭頭，同步調用
  • -->：虛線黑體箭頭，返回結果
  • ->>：實線空箭頭，異步消息
  • -->>：虛線空箭頭，返回結果
• 注釋
  • note over：注釋，懸浮在成員上
  • note left of：注釋，成員左邊
  • note right of：注釋，成員右邊

3，Web服務異步任務調度時序圖示例

title: Web服務緩存更新時序圖
participant 數據中臺 as api
participant 緩存 as cache
participant 消息隊列 as mq
participant 數據服務 as srv

api->cache: 讀取緩存
cache-->api: 返回緩存
Note over api: 如果沒有讀到緩存，就調用數據服務
api->>mq: 請求更新緩存
mq->>srv: 觸發更新緩存
srv-->cache: 更新緩存

顯示效果

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

三，UML類圖

1，語法

• Title: 標題

• 注釋

  • ' xxx: 單行注釋以單引號開頭
  • /' xxx '/: 多行注釋

• 類圖元素

  • interface：接口
  • abstract class：抽象類
  • class：類
• 方法和屬性訪問權限
  • + public
  • - private
  • # protected
  • ~ package private

@startuml
Title 方法和屬性訪問權限示例

interface IHello {
+ method()
}

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

2，類圖關系，1張表整理清楚常見6種關系，必須記住啦：泛化、實現、組合、聚合、關聯、依賴。

類或接口名稱前可包含包名稱，可加關鍵字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
}
@enduml

3，分享一個Jext開源插件擴展JIRA時畫的類圖

@startuml
Title 到期工作日天數

內置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/