简介

时序图（Sequence Diagram）用于描述参与者之间消息交互的顺序，也叫序列图。

包括的建模元素主要有：参与者（Actor）、消息（Message）、生命线（Lifeline）、控制流（Focus of control）等等。

相关资料：

实战

最终效果

时序图 Sequence - 图2

Step by Step

初始化

首先，我们初始化，我个人习惯会如下配置：

  • autonumber 自动对 消息 进行编号

  • hide footbox 只在顶部显示 参与者

  • title 图表标题

参与者

主要格式：类型 别名 as 标识符 样式

  • actor "用户" as User 是用户类型的参与者，如果不需要别名，可以直接 actor User 。

  • participant "浏览器" as Browser 就是常用的方框。

  • participant "服务端" as Server #orange 后面的样式用来加底色，好看一点。

| ``` @startuml

autonumber hide footbox title 访问页面

actor “用户” as User participant “浏览器” as Browser participant “服务端” as Server #orange

@enduml

  1.  | <br />![](https://cdn.nlark.com/__puml/0d2554932151467d7c7501b21048755a.svg#align=left&card=puml&code=%40startuml%0A%0Aautonumber%0Ahide%20footbox%0Atitle%20%2A%2A%E8%AE%BF%E9%97%AE%E9%A1%B5%E9%9D%A2%2A%2A%0A%0Aactor%20%22%E7%94%A8%E6%88%B7%22%20as%20User%0Aparticipant%20%22%E6%B5%8F%E8%A7%88%E5%99%A8%22%20as%20Browser%0Aparticipant%20%22%E6%9C%8D%E5%8A%A1%E7%AB%AF%22%20as%20Server%20%23orange%0A%0A%0A%40enduml%0A&height=148&id=bf7d86d3&width=189) |
  2. | --- | --- |
  4. <a name="g5ctpm"></a>
  5. ### 消息
  7. 主要格式：`参与者 A -> 参与者 B : 消息描述` 
  9. - `User -> Browser: 输入 URL` 非常简明达意的表达了： `User 在 Browser 中输入 URL` 这个意图。
  11. - `Server -> Server` 表示给自己发消息。
  13. - `Browser --> User` 用虚线来表示返回。
  15. |

@startuml

autonumber hide footbox title 访问页面

actor “用户” as User participant “浏览器” as Browser participant “服务端” as Server #orange

User -> Browser: 输入 URL Browser -> Server: 请求服务器 Server -> Server: 模板渲染 Server -> Browser: 返回 HTML Browser —> User

@enduml

  1.  | <br />![](https://cdn.nlark.com/__puml/87a9be65f13ba8aa349190ff7292058a.svg#align=left&card=puml&code=%40startuml%0A%0Aautonumber%0Ahide%20footbox%0Atitle%20%2A%2A%E8%AE%BF%E9%97%AE%E9%A1%B5%E9%9D%A2%2A%2A%0A%0Aactor%20%22%E7%94%A8%E6%88%B7%22%20as%20User%0Aparticipant%20%22%E6%B5%8F%E8%A7%88%E5%99%A8%22%20as%20Browser%0Aparticipant%20%22%E6%9C%8D%E5%8A%A1%E7%AB%AF%22%20as%20Server%20%23orange%0A%0AUser%20-%3E%20Browser%3A%20%E8%BE%93%E5%85%A5%20URL%0ABrowser%20-%3E%20Server%3A%20%E8%AF%B7%E6%B1%82%E6%9C%8D%E5%8A%A1%E5%99%A8%0AServer%20-%3E%20Server%3A%20%E6%A8%A1%E6%9D%BF%E6%B8%B2%E6%9F%93%0AServer%20-%3E%20Browser%3A%20%E8%BF%94%E5%9B%9E%20HTML%0ABrowser%20--%3E%20User%0A%0A%40enduml&height=305&id=a944bfb2&width=300) |
  2. | --- | --- |
  4. <a name="c1qeqg"></a>
  5. ### 美化
  7. **到这一步时，绝大部分情况下，就已经够了，我们用了最小的成本，来最大化的满足两个开发者者之间的图形化理解沟通。**
  9. 接着，如果你们团队成员完全掌握了 PlantUML 并且都追求完美的话，可以来美化下：
  11. - `activate User` 和 `deactivate Server` 用于控制参与者的 `生命线` 上的 `活动条` 。
  13. - `User -[#blue]> Browser` 可以用来为线条着色。
  15. - `note right of Server: 记录访问日志` 用于显示备注。
  17. - `...` 用于截断，表达异步；`|||` 用于增加上下两条线的空间。
  20. |

@startuml

autonumber hide footbox title 访问页面

actor “用户” as User participant “浏览器” as Browser participant “服务端” as Server #orange

activate User User -[#blue]> Browser: 输入 URL activate Browser Browser -> Server: 请求服务器 activate Server #orange Server -> Server: 模板渲染 note right of Server: 记录访问日志 Server -> Browser: 返回 HTML … Browser -> Server: 请求静态资源 JS/CSS deactivate Server ||| Browser -> Browser: 排版 + 渲染 Browser —> User

@enduml

  1.  | <br />![](https://cdn.nlark.com/__puml/6885da1a6437b81931f5b65b086d44b5.svg#align=left&card=puml&code=%40startuml%0A%0Aautonumber%0Ahide%20footbox%0Atitle%20%2A%2A%E8%AE%BF%E9%97%AE%E9%A1%B5%E9%9D%A2%2A%2A%0A%0Aactor%20%22%E7%94%A8%E6%88%B7%22%20as%20User%0Aparticipant%20%22%E6%B5%8F%E8%A7%88%E5%99%A8%22%20as%20Browser%0Aparticipant%20%22%E6%9C%8D%E5%8A%A1%E7%AB%AF%22%20as%20Server%20%23orange%0A%0Aactivate%20User%0AUser%20-%5B%23blue%5D%3E%20Browser%3A%20%E8%BE%93%E5%85%A5%20URL%0Aactivate%20Browser%0ABrowser%20-%3E%20Server%3A%20%E8%AF%B7%E6%B1%82%E6%9C%8D%E5%8A%A1%E5%99%A8%0Aactivate%20Server%20%23orange%0AServer%20-%3E%20Server%3A%20%E6%A8%A1%E6%9D%BF%E6%B8%B2%E6%9F%93%0Anote%20right%20of%20Server%3A%20%E8%AE%B0%E5%BD%95%E8%AE%BF%E9%97%AE%E6%97%A5%E5%BF%97%0AServer%20-%3E%20Browser%3A%20%E8%BF%94%E5%9B%9E%20HTML%0A...%0ABrowser%20-%3E%20Server%3A%20%E8%AF%B7%E6%B1%82%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%20JS%2FCSS%0Adeactivate%20Server%0A%7C%7C%7C%0ABrowser%20-%3E%20Browser%3A%20%E6%8E%92%E7%89%88%20%2B%20%E6%B8%B2%E6%9F%93%0ABrowser%20--%3E%20User%0A%0A%40enduml&height=468&id=bdb546ef&width=416) |
  2. | --- | --- |
  5. <a name="3xgvzg"></a>
  6. # 更多语法
  8. 在 PlantUML 里面，时序图是比较完善的语法，我们上面的介绍只是涵盖了最常用的内容，其他的可以参见[官方文档](http://plantuml.com/sequence-diagram) ：
  10. - 箭头的样式
  12. - 表示 `if/else` 或 `loop` 循环
  14. - 区域分割，用于表示不同阶段
  17. <a name="0bqait"></a>
  18. # 写在最后
  20. 一定一定要切记性价比，不要过度美化，不要忘了我们的初心是：没有心智负担的绘图体验。 
  22. 最后秀一张我最近画的时序图：
  25. ![](https://cdn.nlark.com/__puml/8a6d32aa643e823407721543b4f59796.svg#align=left&card=puml&code=%40startuml%0A%0Aautonumber%0Ahide%20footbox%0Atitle%20%2A%2ANode%20%E5%BA%94%E7%94%A8%E7%A0%94%E5%8F%91%E9%83%A8%E7%BD%B2%E6%B5%81%E7%A8%8B%2A%2A%0A%0Aactor%20%22%E5%BC%80%E5%8F%91%E8%80%85%22%20as%20user%0Aparticipant%20%22%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93%28GitLab%29%22%20as%20gitlab%0Aparticipant%20%22%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90%E7%B3%BB%E7%BB%9F%22%20as%20ci%0Aparticipant%20%22%E8%BF%90%E7%BB%B4%E5%8F%91%E5%B8%83%E7%B3%BB%E7%BB%9F%22%20as%20sys%20%23orange%0Aparticipant%20%22%E6%9C%8D%E5%8A%A1%E5%99%A8%22%20as%20server%0A%0A%3D%3D%20%E7%A0%94%E5%8F%91%E6%B5%81%E7%A8%8B%20%3D%3D%0Auser%20-%3E%20gitlab%3A%20%E6%8F%90%E4%BA%A4%E4%BB%A3%E7%A0%81%0Aactivate%20user%0Adeactivate%20user%0Aactivate%20gitlab%0Agitlab%20-%3E%20ci%3A%20%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95%0Adeactivate%20gitlab%0Aactivate%20ci%0Anote%20right%20of%20ci%3A%20tar%20%E6%88%96%20docker%0Aci%20-%3E%20ci%3A%20%E6%89%93%E5%8C%85%0Aci%20-%3E%20sys%3A%20%E6%8E%A8%E9%80%81%0Anote%20right%20of%20sys%3A%20%E5%AD%98%E5%82%A8%E5%88%B0%20oss%0Aactivate%20sys%20%23orange%0Adeactivate%20ci%0Adeactivate%20sys%0A%0A...%0A%0A%3D%3D%20%E4%B8%8A%E7%BA%BF%2F%E5%9B%9E%E6%BB%9A%E6%B5%81%E7%A8%8B%20%3D%3D%0Auser%20-%3E%20sys%3A%20%E9%80%89%E6%8B%A9%E8%A6%81%E4%B8%8A%E7%BA%BF%E7%9A%84%E7%89%88%E6%9C%AC%0Aactivate%20sys%20%23orange%0Aactivate%20user%0Adeactivate%20user%0Asys%20-%3E%20server%3A%20%E6%8E%A8%E9%80%81%0Aactivate%20server%0Anote%20right%20of%20server%3A%20%2A%2A%E6%97%A0%E9%9C%80--%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96--%EF%BC%8C%E5%BF%AB%E9%80%9F%E4%B8%94%E7%A1%AE%E5%AE%9A%2A%2A%0Aserver%20-%3E%20server%3A%20%E8%A7%A3%E5%8E%8B%0Aserver%20-%3E%20server%3A%20%E5%90%AF%E5%8A%A8%0Aserver%20--%3E%20sys%0A%0A%40enduml&id=557dd7d3)
  26. 对应的源码：

@startuml

autonumber hide footbox title Node 应用研发部署流程

actor “开发者” as user participant “代码仓库(GitLab)” as gitlab participant “持续集成系统” as ci participant “运维发布系统” as sys #orange participant “服务器” as server

== 研发流程 == user -> gitlab: 提交代码 activate user deactivate user activate gitlab gitlab -> ci: 单元测试 deactivate gitlab activate ci note right of ci: tar 或 docker ci -> ci: 打包 ci -> sys: 推送 note right of sys: 存储到 oss activate sys #orange deactivate ci deactivate sys

…

== 上线/回滚流程 == user -> sys: 选择要上线的版本 activate sys #orange activate user deactivate user sys -> server: 推送 activate server note right of server: 无需—安装依赖—，快速且确定 server -> server: 解压 server -> server: 启动 server —> sys

@enduml ```