PlantUML的使用以及各种图表示例

1.介绍

PlantUML是一个通用性很强的工具，可以快速、直接地创建各种图表。利用简单直观的语言，用户可以毫不费力地绘制各种类型的图表。

2.支持的 UML 图表

使用 PlantUML，您可以创建结构良好的 UML 图表，包括但不限于以下内容：

• 序列图
• 用例图
• 类图
• 对象图
• 活动图（在此查找传统语法）
• 组件图
• 部署图
• 状态图
• 时序图

3.支持的非 UML 图表

除了传统的 UML 图表，PlantUML 还支持创建其他各种图表类型，如

• JSON 数据
• YAML 数据
• EBNF 图表
• Regex 图表
• 网络图 (nwdiag)
• 用户界面模型 (salt)
• 架构图
• 规范和描述语言（SDL）
• Ditaa 图表
• 甘特图
• 时序图
• 思维导图
• WBS 图表
• 使用 AsciiMath 或 JLaTeXMath 符号进行数学计算
• 信息工程图
• 实体关系图

4.其他功能

• 利用这些附加功能增强图表的活力和信息量：
• 超链接和工具提示可* 提供额外的上下文和交互性
• 丰富的文本格式、表情符号、Unicode 和 Creole 图标可提供具有* 视觉吸引力的演示
• OpenIconic 图标可* 增强可视化表示
• Sprite 图标可* 添加自定义符号
• AsciiMath 数学表达式可* 提供精确的数学表示

@startuml
:<math>int_0^1f(x)dx</math>;
:<math>x^2+y_1+z_12^34</math>;
note right
Try also
<math>d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h</math>
<math>P(y|bb"x") or f(bb"x")+epsilon</math>
end note
@enduml

5. 使用docker部署使用

使用Docker测试 PlantUML 提供了一个隔离的环境，不需要在机器上直接安装PlantUML 或其依赖项。

1. 提取 PlantUML 的 Docker 镜像，Docker Hub 上有 PlantUML 的官方Docker 镜像。

docker pull plantuml/plantuml-server:jetty

2. 运行 PlantUML 服务器容器
   一旦下载了镜像，就可以运行基于此镜像的容器。

docker run -d -p 18080:8080 plantuml/plantuml-server:jetty

该命令执行以下操作：

• -d ： * 以分离模式运行容器。
• -p 18080:8080 ： * 将容器的 8080 端口映射到主机上的 18080 端口。

3. 访问 PlantUML 服务器
   一旦容器运行，您就可以通过浏览器访问 PlantUML 服务器，网址是http://localhost:18080
   您应该看到 PlantUML 服务器的用户界面，它允许您键入 PlantUML 代码，并在运行中看到可视化表示。
   

4. 测试您的 PlantUML 代码
   在 PlantUML 服务器界面中：
   在 * 提供的文本区域中键入或粘贴您的 PlantUML 代码。

@startuml
Bob -> Alice : hello
@enduml

6. 几种puml示例

6.1 APP登录

UML代码：

@startuml
actor 用户 as A
participant 手机客户端 as B
participant 后端登录服务 as C

A -> B: 输入账号（用户名+密码）
B -> C: 发送登录请求（用户名+密码）
C -> C: 账号验证（用户名+密码）
C -> C: 生成token
C --> B: 登录成功（返回token）
A -> B: 访问其他页面
B -> C: 调用其他接口（请求头中携带token）

@enduml

效果：

6.2 扫码登录

UML代码：

@startuml
actor 用户 as A
participant 手机客户端 as B
participant 网页端 as C
participant 后端登录服务 as D
participant Redis as E

autonumber
alt 手机端登录
A -> B: 手机端先登录
B -> D: 调用登录接口
D --> B: 登录成功（返回token）
end

alt 网页端获取登录二维码
A -> C: 点击扫码登录
C -> D: 获取扫码登录二维码
D -> D: 生成二维码UUID
D -> E: 将二维码UUID存到redis中（set UUID 0）,有效期1分钟
D --> C: 返回扫码登录的二维码
end

alt 手机端扫码登录
A -> B: 扫码（使用手机扫描网页端登录二维码）
B -> B: 弹出提示：确认登录？
A -> B: 点击确认登录
B -> D: 请求登录(二维码UUID+手机端登录成功时后端返回的token)
D -> E: 码是否过期？(get UUID)
D -> D: 根据token，拿到用户id
D -> E: SET UUID 用户id
D --> B: 成功
end

alt 网页端轮询扫码状态（可以每秒轮询一次、或者长轮询）
C -> D: 轮询扫码状态（二维码UUID）
D -> E: 查询UUID对应的用户id
D -> D: 根据用户id生成网页端token
D --> C: 登录成功（返回token给网页端）
A -> C: 访问其他页面
end
@enduml

效果：

6.3 电商重复支付

UML代码：

@startuml
actor 用户 as A
participant 电商APP as B
participant 电商后台 as C
participant 微信 as D


autonumber
alt#LightBlue #LightBlue 用户下单 && 支付流程
A -> B: 下单，金额100
B -> C: 下单，金额100
C -> C: 订单表插入记录，insert into t_order (id, price, status) values(1, 100, 待支付)
C --> B: 下单成功，等待用户支付
B -> C: 用户发起支付
C -> C: 创建一条订单支付记录，insert into t_order_pay (id, order_id, price,status) values (1, 1, 100, 支付中)
C -> C: 组装微信支付请求，包含：out_trade_no：电商这边支付订单号(可以使用t_order_pay.id)，price：支付金额
C --> B: 返回微信支付请求信息
B -> D: 携带微信支付请求信息，跳转到微信
D --> B: 等待用户确认
B --> D: 用户输入微信支付密码，点击确认支付
D --> B: 支付成功
B --> A: 支付成功
end

alt#FF0 #FF0 微信服务端，异步的方式，向电商系统，发送支付结果通知
D -> C: 异步发送支付通知，包含的信息有（out_order_no：电商这边支付订单号；trade_state：交易状态，比如成功还是失败）
C -> C: 处理支付回调
C --> D: SUCCESS
end
@enduml

效果：

6.4 项目甘特图

UML代码：

@startgantt
Project starts the 20th of september 2024
sunday are close
saturday are close
2024/09/21 to 2024/09/23 are colored in salmon
2024/09/21 to 2024/09/30 are named [Project 2024] 

today is 30 days after start and is colored in #AAF

[Prepare1] requires 3 days and starts 10 days after start
[Prepare2] requires 6 days and starts 3 days after start
[Prepare3] requires 6 days and starts 5 days after start
[Prepare4] requires 16 days and starts 7 days after start
[Prepare5] requires 6 days and starts 9 days after start
[Start] happens 40 days after start

@endgantt

效果：