This article is the “pattern” I often use to draw sequence diagrams. More detailed syntax is available on plantuml.com

What tools?

  1. VSCode

  2. PlantUML plug-in

1. Request, callback, render

@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
Copy the code

2. Call yourself

@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
Copy the code

3. Entrance and exit

@startuml

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

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

@enduml
Copy the code

4. Logical branches

@startuml

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

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

@enduml
Copy the code

5. Cycle

@startuml

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

loop 1000 times
    c -> s: DNS Attack
end

@enduml
Copy the code

6. Customize a group

@startuml

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

group title
    c -> s: do things
end

@enduml
Copy the code

7. Note

@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
Copy the code

8. Dividing line

@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
Copy the code

9. Outside the box

@startuml

participant s as "Server"

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

@enduml
Copy the code