入職新公司之后，寫程序文檔空前多了起來，畫時序圖是基本要求。
用vscode里的PlantUml插件可以畫時序圖，PlantUml官網：https://plantuml.com/zh/
圖中可以看到，除了時序圖，這個uml工具還可以畫好多圖，這里只記錄下時序圖的常用用法，其他需要的時候再學習一下。
首先去vscode下載plantuml插件
然后新建一個后綴名為puml或者pu的文件
用vscode打開就可以直接畫圖了。
一般格式為下面這樣
@startuml
skinparam SequenceGroupBodyBackGroundColor transparent
title I'm title
actor User order 1
box "Offboard App" #ffff99
participant "smartphone app" as app order 2
end box
participant "platform" as pf order 3
participant "background management" as bm order 4
actor Admin order 5
autonumber
==create activity==
Admin -[#blue]>bm:Admin input the activity through the bm
activate bm
bm->pf:Request upload activity (picture or video) (activityInfo,uid)
activate pf
pf-->bm:Response return the save result and status
deactivate pf
bm -[#blue]-> Admin:Show the result to admin
deactivate bm
== read activity==
group job
User -[#blue]> app:User open the activity's page
activate app
app->pf:Request get the activity
activate pf
pf-->app:Response the result
deactivate pf
app -[#blue]-> User:Show the activity to User
end
@enduml
上面寫了一個小例子，在vscode中編輯完之后，alt+D就可以預覽出圖效果，
按shift+ctrl+p 就可以調出導出圖片
用鼠標點擊第一個，右下角會出現review的提示，點擊可以顯示導出圖片的路徑，這里可以選擇png,svg等多種導出格式。
alt+D運行效果圖：
案例中@startuml和@enduml是固定格式，表示開始和結束，title關鍵詞 可以給時序圖設置一個標題，actor 關鍵詞 是定義一個小人，participant 關鍵詞定義一個框框，可以用as給框框起別名，order表示框框的順序，可以把一個或者多個框框用box框起來，設置skinparam SequenceGroupBodyBackGroundColor transparent從而不會被上一層遮住。
==xx==表示分隔線，->表示實線箭頭，-->表示虛線箭頭，[#blue] 可以設置顏色，不設置默認是紅色，activate 表示一個生命周期的開始，deactivate 表示一個生命周期的結束，group xx和end是一個固定格式，表示框出一段過程，并為這個過程起名。
這個案例雖然看起來很簡單，但是已經涵蓋了通常用到的場景，可以表達出各種各樣的業(yè)務代碼場景，因為平時還是敲代碼多，所以時序圖只起輔助作用，學習動力不太大，以后用的多了再深入學習一下，暫時這些就已經很夠用了，沒錯，示例就是這么樸實無華且枯燥~
