快速绘图：画图工具PlantUML

本篇开始前我们需要知道时序图的作用，以及为什么要绘制时序图。
时序图在Java中主要用于描述对象之间的交互和协作关系，以及对象之间消息传递的时间顺序。绘制时序图有以下几个原因：

1. 明确对象间的交互关系：通过时序图可以清晰地展示各个对象之间的调用关系，帮助开发者更好地理解系统的运行流程。

2. 便于分析和设计：时序图可以帮助开发者分析系统的性能瓶颈、潜在的问题和风险，从而优化系统设计和提高代码质量。

3. 提高团队协作效率：时序图为团队成员提供了一个统一的交流和协作平台，有助于提高团队的沟通效率和项目的执行效率。

4. 利于文档编写和维护：时序图为软件文档提供了直观的图形化表示，有助于提高文档的可读性和易维护性。

5. 有助于测试和调试：时序图为测试人员提供了一个清晰的测试用例视图，有助于提高测试的效率和准确性；同时，时序图也可以帮助开发者快速定位和解决问题。

IDEA 中安装 PlantUML 插件

在 IDEA 中安装PlantUML比较方便，直接搜索 PlantUML Integration，选择下载，下载完成后重启 IDEA 安装完成。
安装Graphviz(Graphviz是一个开源的图形可视化软件，它能够从简单的文本文件描述中生成复杂的图形和网络)：

brew install graphviz

流程图

@startuml
start
repeat
  :测试某事;
    if (发生错误?) then (没有)
      #palegreen:好的;
      break
    endif
    ->not ok;
    :弹窗 "文本过长错误";
repeat while (某事发生文本过长错误?) is (是的) not (不是)
->//合并步骤//;
:弹窗 "成功！";
stop
@enduml

• @startuml：表示开始绘制流程图。
• start：表示流程图的起点。
• repeat：表示重复执行一段代码块。
• if (发生错误？) then (没有)：判断条件语句，如果发生错误则执行括号内的代码块。
• #palegreen:好的；：在图形界面中显示绿色的文字"好的"。
• break：跳出循环，结束重复执行。
• endif：表示条件语句的结束。
• ->not ok;：箭头指向"not ok"节点，表示流程的方向。
• :弹窗 “文本过长错误”;：弹出一个对话框，显示文本"文本过长错误"。
• repeat while (某事发生文本过长错误？) is (是的) not (不是)：重复执行一段代码块，直到满足某个条件为止。
• ->//合并步骤//;：箭头指向注释节点，表示流程的方向。
• :弹窗 “成功！”;：弹出一个对话框，显示文本"成功！"。
• stop：表示流程图的终点。
• @enduml：表示结束绘制流程图。

类图

 @startuml

abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection

List <|-- AbstractList
Collection <|-- AbstractCollection

Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList

class ArrayList {
Object[] elementData
size()
}

enum TimeUnit {
DAYS
HOURS
MINUTES
}

@enduml

在类图中，我们可以看到以下关系：

抽象列表（AbstractList）继承自抽象集合（AbstractCollection）。
列表接口（List）继承自抽象列表（AbstractList）。
集合接口（Collection）继承自抽象集合（AbstractCollection）。
集合接口（Collection）实现列表接口（List）。
抽象集合（AbstractCollection）实现抽象列表（AbstractList）。
抽象列表（AbstractList）实现ArrayList类。

时序图

新建一个plantuml file:

@startuml
actor 用户
participant 系统

用户 -> 系统: 点击下单按钮
activate 系统
系统 -> 用户: 显示订单确认页面
deactivate 系统

用户 -> 系统: 填写订单信息
activate 系统
系统 -> 用户: 显示订单提交成功页面
deactivate 系统

用户 -> 系统: 支付订单
activate 系统
系统 -> 用户: 显示支付成功页面
deactivate 系统

用户 -> 系统: 确认收货
activate 系统
系统 -> 用户: 显示订单已完成页面
deactivate 系统
@enduml

在这个案例中，我们有一个用户和一个系统。用户通过点击下单按钮来触发订单流程。系统会依次执行以下操作：

显示订单确认页面，让用户确认订单信息。
显示订单提交成功页面，通知用户订单已提交成功。
支付订单，让用户完成支付操作。
显示支付成功页面，通知用户支付已成功。
确认收货，让用户确认收货信息。
显示订单已完成页面，通知用户订单已完成。

以下演示一个简单的系统登录时序图：

@startuml
actor User as U
boundary FrontEnd as FE
control LoginController as LC
entity UserService as US
database UserRepository as UR

U -> FE : Click Login Button
activate FE

FE -> LC : login(username, password)
activate LC

LC -> LC : validateInputs(username, password)
note right: 检查输入是否为空或遵循特定模式

LC -> US : verifyUserCredentials(username, password)
activate US

US -> UR : findByUsername(username)
activate UR
UR --> US : userData
deactivate UR

note over US : 校验密码
US -> US : validatePassword(password, userData.passwordHash)

US -> US : createJwtToken(username)
note right : 创建token
US --> LC : jwtToken
deactivate US

LC --> FE : authenticationResponse(jwtToken/success or error message)
deactivate LC
deactivate FE
@enduml