PlantUML 画时序图常用代码

待我称王封你为后i 2022-01-20 01:03 561阅读 0赞

> 本文是我画时序图经常使用的“模式”，更详细的语法可以 [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
    复制代码

[plantuml.com]: https://link.juejin.im?target=http%3A%2F%2Fplantuml.com