画图工具之PlantUML使用！

PlantUML是一个多功能组件，可快速、直接地创建图表。

用户可以使用简单直观的语言起草各种图表。

它允许用简单的文本描述来创建UML图：

  • 包括序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图。

官方文档：https://plantuml.com/zh/

预览网站：https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000

PlantUML插件

PlantUML Integration 可以直接在 IDE 中查看和编辑 PlantUML 图表。

各种主题

PlantUML 内置了 30 多种主题，可以通过 help themes 命令查看内置主题列表。

1
2
3
@startuml
help themes
@enduml

在文件开头可以通过指令 !theme 来指定需要的主题名称。

1
2
3
4
5
6
7
8
9
@startuml 
!theme mars
title 这是图的主题
header 页眉内容
footer 页脚内容
Alice -> Bob: 认证请求
Bob -> Bob: 认证处理
Bob -> Alice: 认证接受
@enduml

Hello World

通过-> 、-->和 :就可以在参与者之间传递消息，不用明确声明参与者。

1
2
3
4
5
6
7
@startuml
老张 -> 老王 : 老王，你好啊
老王--> 老张: 老张，你好啊

老张 -> 老王: 最近有空一起喝茶
老张 <-- 老王: OK
@enduml

在这里插入图片描述

声明参与者

使用关键字participant来声明参与者，就可以对该参与者进行更多的控制。

声明的顺序就是默认的显示顺序。

也可以用这些关键字来声明参与者，给参与者设置不同的形状。

  • actor（角色）
  • boundary（边界）
  • control（控制）
  • entity（实体）
  • database（数据库）
  • collections（集合）
  • queue（队列）

还可以通过 as关键字重命名参与者。

1
2
3
4
5
6
7
8
9
10
@startuml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
@enduml

在这里插入图片描述

默认的颜色比较单调，也可以通过#来设置参与者的颜色：

1
2
3
4
5
6
7
8
9
10
11
@startuml
actor Bob #blue
' The only difference between actor
'and participant is the drawing
participant Alice #SkyBlue
participant "I have a really\nlong name" as L #00ff00

Alice->Bob: Authentication Request
Bob->Alice: Authentication Response
Bob->L: Log transaction
@enduml

在这里插入图片描述

消息传递

在不同参与者之间，通过箭头+:来表示消息传递。

同步消息：

1
A -> B: 同步消息文本

在这里插入图片描述

异步消息：

由发送者A指向接收者B，表示A发送后不需要等待B立即处理。

1
A ->> B: 异步消息文本

在这里插入图片描述

返回消息：

通常从接收者返回到发送者，标识一个回应。

1
A <-- B: 返回消息文本

在这里插入图片描述

自调用：

一个参与者直接发送消息给自己，表示自我处理或运算。

1
A ->A: 自调用

在这里插入图片描述

生命线（Lifeline）与激活条（Activation Bar）

在时序图中，生命线表示对象在一段时间内的活动状态，也就是从参与者往下延伸的那条虚线。

激活条用来表示参与者或对象在处理某个任务期间的活动状态，是生命线的一部分，矩形条形式出现。

生命线的激活与撤销：可以用下面这些关键字来控制生命线的激活与撤销。

  • activate: 显示参与者的活动状态开始。
  • deactivate: 指示参与者的活动状态结束。
  • destroy: 用于表示参与者的生命线终结，通常表示对象生命周期的结束。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@startuml
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml

在这里插入图片描述

生命线的嵌套与颜色：

还可以使用嵌套激活条来表示内部调用，并可以给生命线添加颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@startuml
participant User
User -> A: DoWork
activate A #FFBBBB
A -> A: Internal call
activate A #DarkSalmon
A -> B: << createRequest >>
activate B
B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A
@enduml

在这里插入图片描述

自动激活：

在发送消息时自动显示激活条。

1
A->B++: 激活B并发送消息

在这里插入图片描述

自动去激活：

在接收回应时自动隐藏激活条。

1
2
A->B++: 激活B并发送消息
A <--B--: B去激活并回应消息

在这里插入图片描述

分组：

用于逻辑上分组一系列交互。

1
2
3
4
group 分组名
A -> B: 消息
...
end group

在这里插入图片描述

分组设置颜色：

1
2
3
4
group #LightGray 补充上下文信息
NewTaskCreate -> NewTaskCreate:<color:red>补充五元组信息<color:red>
NewTaskCreate -> NewTaskCreate:补充其他上下文
end group

替代（Alt/Else）：

表示基于条件的替代执行流程。

1
2
3
4
5
alt 条件1
A -> B: 满足条件1的消息
else 条件2
A -> B: 满足条件2的消息
end

在这里插入图片描述

注释

注释用于添加说明性文本。

可以用note left of，note right of或note over来控制注释相对节点的位置。

  • 还可以通过修改背景色来高亮显示注释。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@startuml
participant Alice
participant Bob
note left of Alice #aqua
This is displayed
left of Alice.
end note

note right of Alice: This is displayed right of Alice.

note over Alice: This is displayed over Alice.

note over Alice, Bob #FFAAAA: This is displayed\n over Bob and Alice.

note over Bob, Alice
This is yet another
example of
a long note.
end note
@enduml

在这里插入图片描述

颜色

Choosing colors在 PlantUML 中，可以对时序图的各个元素自定义颜色。

  • 比如参与者（actors）、对象（objects）、激活条（activation bars)等。

在声明元素时，可以直接指定颜色，格式为#颜色代码。

直接指定颜色：

颜色代码可以是一个十六进制颜色值，也可以是预定义的颜色名称。

1
2
3
4
5
6
7
8
@startuml
actor 用户  #Green
participant 参与者  #B4A7E5

用户-[#red]>参与者:消息
activate 参与者 #Blue

@enduml

在这里插入图片描述

使用 skinparam 设置颜色

除了直接为特定元素指定颜色外，还可以使用 skinparam 全局设置时序图中的颜色。

1
2
3
4
5
6
7
@startuml
skinparam ActorBorderColor #DarkOrange
skinparam ParticipantBackgroundColor #SkyBlue

actor 用户
participant 参与者
@enduml

在这里插入图片描述

当使用 skinparam 时，可以设置许多不同属性的颜色。

如边框颜色（BorderColor）、背景颜色（BackgroundColor）、字体颜色（FontColor）和激活条颜色（SequenceGroupBodyBackgroundColor）。

给文字设置颜色：

1
NewTaskCreate -> NewTaskCreate:<color:red>补充五元组信息<color:red>

入口和出口

在这里插入图片描述

1
2
3
4
5
6
7
8
9
@startuml

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

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

@enduml

循环

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
@startuml

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

loop 1000 times
    c -> s: DNS Attack
end

@enduml

分隔线

在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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

外框

在这里插入图片描述

1
2
3
4
5
6
7
8
9
@startuml

participant s as "Server"

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

@enduml

支持使用关键字 autonumber 用于自动对消息编号，title 关键字用于为页面添加标题。

页面可以使用 header 和 footer 显示页眉和页脚。

使用这些关键词来组合消息：alt/else、opt、loop、par、break、critical、group。

后面紧跟着消息内容，关键词 end 用来结束分组，分组是可以嵌套使用的。

在这里插入图片描述

时序图

https://plantuml.com/zh/sequence-diagram

UML类图

使用 class 定义类，默认会自动将属性和方法分割开，也可以使用分隔符 --..==__. 分隔符中也可以添加文字。

https://plantuml.com/zh/class-diagram

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

活动图

https://plantuml.com/zh/activity-diagram-beta

在这里插入图片描述

在这里插入图片描述

流程图

在这里插入图片描述

脑图

https://plantuml.com/zh/mindmap-diagram

在这里插入图片描述

用例图

packag 定义一个包，as 定义对应别名，usecase 定义用例，箭头定义关系。

https://plantuml.com/zh/use-case-diagram

在这里插入图片描述

部署图

node 标识节点，file 标识文件，cloud 定义云。

https://plantuml.com/zh/component-diagram

https://plantuml.com/zh/deployment-diagram

在这里插入图片描述

状态图

https://plantuml.com/zh/state-diagram

定时图

https://plantuml.com/zh/timing-diagram

甘特图

https://plantuml.com/zh/gantt-diagram

JSON图

https://plantuml.com/zh/json

对象图

https://plantuml.com/zh/object-diagram

C4模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@startuml "enterprise"
'!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
'!include C:/repo/C4-PlantUML/C4_Container.puml
!include <C4/C4_Container>

title 网银系统容器图

Person(customer, 客户, "银行客户有自己的私人银行账号")
 
System_Boundary(c1, "网银") {
    Container(web_app, "Web 应用", "Java, Spring MVC", "传递静态内容和网银SPA")
    Container(spa, "单页应用", "JavaScript, Angular", "通过浏览器对用户提供所有的网银功能")
    Container(mobile_app, "手机应用", "C#, Xamarin", "通过手机设备提供有限的网银功能")
    ContainerDb(database, "数据库", "SQL 数据库", "存储用户的注册信息，随机认证密码，访问日志等")
    Container(backend_api, "API应用", "Java, Docker容器", "通过API提供网银功能")
}

System_Ext(email_system, "邮件系统", "网络软件交换系统")
System_Ext(banking_system, "Mainframe银行系统", "存储所有的核心客户，账号，事务银行信息")

Rel(customer, web_app, "使用", "HTTPS")
Rel(customer, spa, "使用", "HTTPS")
Rel(customer, mobile_app, "使用")

Rel_Neighbor(web_app, spa, "传输")
Rel(spa, backend_api, "使用", "异步, JSON/HTTPS")
Rel(mobile_app, backend_api, "使用", "异步, JSON/HTTPS")
Rel_Back_Neighbor(database, backend_api, "读写", "同步, JDBC")

Rel_Back(customer, email_system, "发送邮件到")
Rel_Back(email_system, backend_api, "发送邮件", SMTP")
Rel_Neighbor(backend_api, banking_system, "使用", "同步/异步, XML/HTTPS")

在这里插入图片描述

结合ChatGPT

将一个登录流程的描述告诉 GPT 让它画出时序图。

Prompt 如下：

以客户端、登录服务、数据库为3个主体，画出整个登录过程的Sequence Diagrams。

  • 客户端输入手机号，调用登录服务，查询数据库，查看手机号是否存在。

  • 如果不存在，直接通知客户端用户不存。

  • 如果存在，登录服务查询数据库验证手机号和密码是否匹配。

  • 如果匹配，返回用户信息，客户端跳转到首页。

请帮我生成 PlantUML 格式的类图，请开始画图吧。

完整实例

在这个例子中，要在原本的登录的基础上，引入Google登录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
@startuml
skinparam ParticipantBackgroundColor #DeepSkyBlue

actor 用户 as c  #DeepSkyBlue
participant "客户端" as client
participant "服务网关" as ga
participant "用户服务" as user
database "数据库" as DB  #DeepSkyBlue
participant "Google服务" as google  #LightCoral

activate c #DeepSkyBlue
activate client #DeepSkyBlue

c->client:用户登录

group#LightCoral #LightCoral Google登录客户端流程
  client -> google : 请求Google OAuth登录
            activate google #DeepSkyBlue
            google-->client:登录url
            client->google:跳转登录页
            google -> google : 用户登录
            google --> client : Google登录Token
            deactivate google
end

|||

client -> ga : 登录请求
note right#LightCoral:新增登录方式，三方登录请求实体
activate ga #DeepSkyBlue
ga ->user:请求转发
activate user #DeepSkyBlue


alt#DeepSkyBlue 常规登录
    user -> DB : 查询用户信息
    activate DB #DeepSkyBlue
    DB -> user : 用户信息
    deactivate DB
    user->user:登录密码校验

|||
else Google登录
    group#LightCoral #LightCoral Google登录服务端流程
          user->google:验证token
          activate google #DeepSkyBlue
          google-->user:用户信息
          deactivate google
          user->user:存储或更新用户信息
    end group
end


user-->ga:登录结果
deactivate user
ga -> client : 响应
deactivate ga
alt#DeepSkyBlue 成功
        client -> c : 登录成功
else 失败
        client -> c : 登录失败
end
deactivate client
|||
@enduml

在这里插入图片描述