PlantUML 畫時序圖經常使用代碼

本文是我畫時序圖常用的「模式」，更詳細的語法能夠 plantuml.com 查看

什麼工具？

1. VSCode

2. PlantUML 插件

1. 請求、回調、渲染

@startuml

participant c as "Client"
participant s as "Server"

c -> s: fetch
activate s

c -> c: render
activate c
deactivate c

s --> c: callback
deactivate s

c -> c: render
activate c
deactivate c

@enduml
複製代碼

2. 自我調用

@startuml

participant c as "Client"
participant s as "Server"

activate c
c -> c: internal call 1
activate c
deactivate c

c -> c: internal call 2
activate c
deactivate c

@enduml
複製代碼

3. 入口和出口

@startuml

participant c as "Client"
participant s as "Server"

[-> c: enter
[<- c: leave

@enduml
複製代碼

4. 邏輯分支

@startuml

participant c as "Client"
participant s as "Server"

alt a 
c -> s: a
else b
c -> s: b
end

@enduml
複製代碼

5. 循環

@startuml

participant c as "Client"
participant s as "Server"

loop 1000 times
    c -> s: DNS Attack
end

@enduml
複製代碼

6. 自定義組

@startuml

participant c as "Client"
participant s as "Server"

group title
    c -> s: do things
end

@enduml
複製代碼

7. 註解

@startuml

participant c as "Client"
participant s as "Server"

c -> s: fetch 
note left: left note

note over c, s
multiline
middle note
end note

s --> c: callback
note right: right note

@enduml
複製代碼

8. 分隔線

@startuml

participant c as "Client"
participant s as "Server"

== Stage A ==
c -> s: A 
s --> c: callback

== Stage B ==
c -> s: B 
s --> c: callback

@enduml
複製代碼

9. 外框

@startuml

participant s as "Server"

box "Box" #LightBlue
	participant c as "Client"
end box

@enduml
複製代碼