时序图语法

发表于 | 分类于 ，
| 字数统计: 1.3k

使用Emacs敲出UML，PlantUML快速指南
PlantUML 之时序图

顺序图（Sequence Diagram）

简单示例
顺序图用 -> , –>, <-, <– 来绘制参与者（Participants）之 间的消息（Message）。

1
2
3
4
5
6
7
8
9
10
11
@startuml
hide footbox
title login by token

  Alice -> Bob: Authentication Request
  Bob --> Alice: Authentication Response

  Alice -> Bob: Another atuhentication Request
  Alice <-- Bob: Another authentication Response

@enduml

image

注解方式

分为行注解使用英文符号 ‘+行内容
多行注解使用英文符号/‘ + 内容 + ‘/

申明参与者

申明参与者，可以使用 participant 关键词，也可以使用下面的参与者 分类关键词来申明参与者：

  • actor
  • boundary
  • control
  • entity
  • database

不同的参与者类型，其图标也是不一样的

1
2
3
4
5
6
7
8
9
@startuml
hide footbox
actor actor #red
boundary boundary #yellow
control control #blue
entity entity #green
database database #EE4000
"学术袁" -> Blog :方形
@enduml

image

使用 as 关键词可以为参与者起一个别名

1
participant "I have a really\nlong name" as L #99ff99

改变箭头的样式（Change arrow style）

在用例图里可以通过以下方式来改变箭头的样式：

使用 \ 或 / 来替换 < 或 > 可以让箭头只显示上半部分或下半 部分。
重复输入箭头或斜杠（ >> // ），用来绘制空心箭头。
使用双横线 – 替代 - 可以用来绘制点线。
在箭头后面加个 o 可以在箭头前绘制一个圆圈。
使用 <-> 可用来绘制双向箭头。 

1
2
3
4
5
6
7
8
9
10
11
Bob -> Alice
Bob ->> Alice
Bob -\ Alice
Bob \\- Alice
Bob //-- Alice

Bob ->o Alice
Bob o\\-- Alice

Bob <-> Alice
Bob <<-\\o Alice

image

改变箭头的颜色（Change arrow color）

要改变箭头的颜色，可以使用HTML颜色符号，参看下面的例子：

1
2
Bob -[#red]> Alice : hello
 Alice -[#0000FF]->Bob : ok

image

消息序号（Message sequence numbering）

关键词 autonumber 用来给自动的给消息添加上序号。

1
2
3
4
5
6
7
8
9
10
11
autonumber
 Bob -> Alice : Authentication Request
 Bob <- Alice : Authentication Response

 autonumber 15
 Bob -> Alice : Another authentication Request
 Bob <- Alice : Another authentication Response

 autonumber 40 10
 Bob -> Alice : Yet another authentication Request
 Bob <- Alice : Yet another authentication Response

image

标题（Title）

要给图形加一个标题可以用 title 关键词来设置。

1
title Simple Comunication example

image

消息分组（Grouping message）

有时候可能需要对消息进行分组，那么可以使用下面的关键词来实现：

  • alt/else
  • opt
  • loop
  • par
  • break
  • critical
  • group
    这个关键词后面的文字会作为组名显示在图形上
    上面的关键词后可以添加一些文本用来显示在头部（注： group 除外，因 为它后面的文本用来显示在组名称的位置）。在组嵌套组的结构里可以用关 键词 end 来关闭组或者说是表示一个组符号的结束符（类似 if/endif ）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Alice -> Bob: Authentication Request

 alt successful case
   Bob -> Alice: Authentication Accepted
 else some kind of failure
   Bob -> Alice: Atuhentication Failue
   group My own label
     Alice -> Log : Log attack start
     loop 1000 times
       Alice -> Bob: DNS Attack
     end
     Alice -> Log : Loag alice end
   end
 else Another type of failue
   Bob -> Alice: Please repeat
 end

image

消息注解（Notes on messages）

我们可能经常会在消息的左边或右边使用注解，要添加注解，只要使用 note left 或 note right 关键词就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
Alice -> Bob : hello
  note left: this is a first note

  Bob -> Alice : ok
  note right: this is anther note

  Bob -> Bob : I am thinking
  note left
       a note
       can also be defined
       on several lines
  end note

image

一些其他的注解方式（Some other notes）

通过使用关键词 note left of ， note right of 或 note over ， 我们还可以把注解放置在与之相关的参与者的左边或右边，或下方。

通过改变注解的背景色，我们还可以高亮一个注解文本块。

如果要使用多行注解，可以使用关键词 end note 来表示注解的结束

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

image

使用HTML进行格式化（Formatting using HTML）

我们可以使用少量的HTML标签来格式化文本：

1
2
3
4
5
6
7
8
9
10
<b> 加粗文本
<u> 或 <u:#AAAAAA> 或 <u:colorName> 用来加下划线
<i> 斜体
<s> 或 <s:#AAAAAA> 或 <s:colorName> 用来加删除线
<w> 或 <w:#AAAAAA> 或 <w:colorName> 用来加波浪线
<color:#AAAAAA> 或 <color:colorName> 用来设置文本颜色
<back:#AAAAAA> 或 <back:colorName> 用来设置背景色
<size:nn> 设置字体大小
<img src="file"> 或 <img:file> 用来添加图片，图片文件必须 是可以访问得到才行。
<img src="http://url"> 或 <img:http://url> 用来添加一个互 联网图片，同样的图片地址必须是可用的才行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
participant Alice
 participant "The <b>Famous</b> Bob" as Bob

 Alice -> Bob : A <i>well formated</i> message
 note right of Alice
   This is <back:cadetblue><size:18>displayed</size></back>
   <u>left of</u> Alice.
 end note
 note left of Bob
   <u:red>This</u> is <color #118888>displayed</color>
   <b><color purple>left of</color> <s:red>Alice</strike> Bob</b>
 end note
 note over Alice, Bob
   <w:#FF33FF>This is hosted</w> by <img ../img/code.png>
 end note

image