Plantuml时序图绘制指南

最新推荐文章于 2024-07-23 17:51:16 发布

Vainycos

最新推荐文章于 2024-07-23 17:51:16 发布

阅读量921

点赞数 1

分类专栏： share 文章标签：前端服务器 java uml

本文链接：https://blog.csdn.net/imVainiycos/article/details/129802576

版权

share 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

旨在记录使用Plantuml时序图的常用语法，方便绘制参考。

文章目录

基本语法
进阶语法
完整参考示例

基本语法

开始结束标识：必须包含开始，结束标识
```
@startuml
//...
@enduml
```
额外标识：autonumber（表示自动标识序号）
```
@startuml
autonumber
@enduml
```
时序节点标识：actor，participant（代表不同的图案）可使用as取别名，之后就可以使用as后面的别名进行指定
```
@startuml
autonumber

actor 用户 as user
participant 浏览器 as web
participant 后端服务 as service

@enduml
```

组别标识：group，一般成对出现，group开头，end group结尾，标识各个流程的不同阶段

@startuml
autonumber

actor 用户 as user
participant 浏览器 as web
participant 后端服务 as service

group 用户登录流程
// ...描述登录流程
end group

@enduml

流程标识：使用->（实线）–>（虚线）进行前后连接各个组件之间的关系，并且可以用英文冒号进行说明

@startuml
autonumber

actor 用户 as user
participant 浏览器 as web
participant 后端服务 as service

group 用户登录流程

user->web:访问浏览器
web->service:校验用户名密码
service->web:返回校验结果
web-->user:提示用户登录成功/失败

end group

@enduml

进阶语法

使用title标识标题，使用note标识备注(note后面可以使用left/right表示备注框的左右显示)

 @startuml
 title 简单登录流程
 autonumber

 actor 用户 as user
 participant 浏览器 as web
 participant 后端服务 as service

 group 用户登录流程

 user->web:访问浏览器
 activate user
 activate web

 web->service:校验用户名密码
 activate service
 note right:使用md5加密校验
 service->web:返回校验结果
 deactivate service
 web-->user:友好提示用户登录成功/失败
 deactivate web
 deactivate user
 end group

 @enduml

激活时序生命线的激活与撤销：activate/deactivate，表示参与者的生命活动，往往成对出现

@startuml
autonumber

actor 用户 as user
participant 浏览器 as web
participant 后端服务 as service

group 用户登录流程

user->web:访问浏览器
activate user
activate web

web->service:校验用户名密码
activate service
service->web:返回校验结果
deactivate service
web-->user:友好提示用户登录成功/失败
deactivate web
deactivate user
end group

@enduml

box:用来标识组件之间的隔离关系，标识在组件内容。一般成对出现，以box开头，end box结尾


    @startuml
    autonumber

    actor 用户 as user
    box 前端
    participant 浏览器 as web
    end box
    box 后端
    participant 服务 as service
    database 数据库 as db
    end box

    group 用户登录流程

    user->web:访问浏览器
    activate user
    activate web

    web->service:校验用户名密码
    activate service
    service->web:返回校验结果
    deactivate service
    service->db:校验该用户
    db->service:返回校验结果
    web-->user:友好提示用户登录成功/失败
    deactivate web
    deactivate user
    end group

    @enduml

在这里插入图片描述

完整参考示例

 @startuml
 title Oauth2令牌颁发之授权码模式

 actor User as user
 participant "User Agent" as userAgent
 participant "Client" as client
 participant "Auth Login" as login
 participant "Auth Server" as server

 autonumber
 user->userAgent:访问客户端
 activate userAgent
 userAgent->login:重定向到授权页面+clientId+redirectUrl
 activate login
 login->server:用户名+密码+clientId+redirectUrl
 activate server
 server-->login:返回授权码
 login-->userAgent:重定向到redirectUrl+授权码code
 deactivate login
 userAgent->client:使用授权码code换取令牌
 activate client
 client->server:授权码code+clientId+clientSecret
 server-->client:颁发访问令牌accessToken+refreshToken
 deactivate server
 client-->userAgent:返回访问和刷新令牌
 deactivate client
 userAgent--> user:令牌颁发完成
 deactivate userAgent
 @enduml

在这里插入图片描述