本文是我画时序图经常使用的“模式”，更详细的语法可以 http://plantuml.com 查看

什么工具？

VSCode
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