使用VSCode的PlantUML插件绘制时序图

808 阅读1分钟

plantUML可以使用编码的方式生成UML图,更易用且更符合程序员使用习惯。

它上手简单,只需要记住角色和箭头的基本用法就可以绘制出时序图。

安装

0aac6b28-f07f-45fa-bcad-ae0248b2c007.png

时序图DEMO

8b31afcd-6b0b-4d0b-aa77-9e8a6ee9dd9d.png

@startuml DEMO
A -> B --++: DO 11
note right 
DO 11
end note
A <- B --++:DO 22
B -> C --++:DO 33
C -> C --++:do self
note right
SELF
end note
C -> A --++:DO 44
A -> D --++:DO 55
D -> E --++:DO 66
@enduml

基本用法

37774de0-ddb2-4f9d-a633-0ec426bd3c4a.png

@startuml
A -> B: do something
B -> A: do something
@enduml

设置角色类型

时序图角色类型有: actor, boundary, control, entity, database 每种角色对应不同的图形 4eb1b063-008a-47e0-ba5f-fb0943f77c33.png

@startuml
actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
collections Foo6

Foo1 -> Foo2 : To boundary
Foo1 -> Foo3 : To control
Foo1 -> Foo4 : To entity
Foo1 -> Foo5 : To database
Foo1 -> Foo6 : To collections 
@enduml

添加注解

c6a325af-da25-4ccc-b036-49efa48c47c7.png

@startuml 
header Page Header
footer Page %page% of %lastpage% 
Title this is a Title
Alice -> Bob : message 1
note right: this is a rightnote
Alice -> Bob : message 2 
@enduml

其他不常用的箭头类型

7a74aea2-a16a-45ae-9d91-a018731b5a10.png

@startuml
A ->x B
A -> B
A ->> B
A -\ B
A - B
A //-- B 
A ->o B
A o-- B 
A <-> B
A <->o B
A -[#red]> B : hello
B -[#0000FF]->A : ok
@enduml