时序图 用例图 类图 活动图 组件图 状态图 对象图 部署图 定时图 Regex Network Wireframe Archimate Gantt MindMap WBS EBNF JSON YAML
PlantUML Language specification Timing Diagram

Edit in DokuwikiEdit in AsciidocEdit in Markdown
时序图

UML 中的时序图是一种特定类型的交互图，可视化系统的时序约束。它侧重于事件的时间顺序，展示不同对象如何随着时间的推移相互影响。定时图在实时系统和嵌入式系统中特别有用，可用于了解对象在整个给定时间段内的行为。

[Ref. of initial request QA-5383]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
声明参与者

使用以下关键字声明参与者, 可根据需要选择显示样式。

关键词 描述
analog 模拟信号的变化是连续的，其值在给定值之间会进行线性插值。
binary 二进制信号，只有两个状态。 (binary)
clock 时钟信号 ，即从高电平到低电平反复转换的信号，需要用period设置周期。可选的参数还有脉冲时长pulse和偏移量offset
concise 简明的图形化数据表示，可表示数据的移动（非常适合表示信息）。
robust 用信号线表示的状态，便于呈现状态间的转化（可设置多种状态）。

通过 @ 标注, 和 is 动词定义状态.

🎉 Copied! 

@startuml
robust "Web 浏览器" as WB
concise "Web 用户" as WU

@0
WU is 空闲
WB is 空闲

@100
WU is 等待中
WB is 处理中

@300
WB is 等待中
@enduml

🎉 Copied! 

@startuml
clock   "Clock_0"   as C0 with period 50
clock   "Clock_1"   as C1 with period 50 pulse 15 offset 10
binary  "Binary"  as B
concise "Concise" as C
robust  "Robust"  as R
analog  "Analog"  as A


@0
C is Idle
R is Idle
A is 0

@100
B is high
C is Waiting
R is Processing
A is 3

@300
R is Waiting
A is 1
@enduml

[Ref. QA-14631 and QA-14647 and QA-11288]

[Ref. QA-14631, QA-14647, QA-11288 and GH-2409]
WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
二进制及时钟信号

使用以下关键字可以绘制二进制及时钟信号：

🎉 Copied! 

@startuml
clock clk with period 1
binary "Enable" as EN

@0
EN is low

@5
EN is high

@10
EN is low
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
增加标示

使用下述的语法，增加对某一时刻信号变动的描述。

🎉 Copied! 

@startuml
robust "Web 浏览器" as WB
concise "Web 用户" as WU

@0
WU is 空闲
WB is 空闲

@100
WU -> WB : URL
WU is 等待中
WB is 处理中

@300
WB is 等待中
@enduml
@enduml

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
相对时间

可以使用 @+和@- 符号表示相对时间.

🎉 Copied! 

@startuml
robust "DNS Resolver" as DNS
robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle
DNS is Idle

@+100
WU -> WB : URL
WU is Waiting
WB is Processing

@+200
WB is Waiting
WB -> DNS@+50 : Resolve URL

@+100
DNS is Processing

@+300
DNS is Idle
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
锚点

，而不是在绝对时间上使用绝对时间或相对时间，你可以通过使用as 关键字和以: 开始的名称来定义一个时间作为锚点。 

@XX as :<anchor point name>

🎉 Copied! 

@startuml
clock clk with period 1
binary "enable" as EN
concise "dataBus" as db

@0 as :start
@5 as :en_high 
@10 as :en_low
@:en_high-2 as :en_highMinus2

@:start
EN is low
db is "0x0000"

@:en_high
EN is high

@:en_low
EN is low

@:en_highMinus2
db is "0xf23a"

@:en_high+6
db is "0x0000"
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Anchor Points with decimal offset

🎉 Copied! 

@startuml
binary "enable" as EN

@3          as :start
@5.5        as :en_high 
@10         as :en_low
@:en_high-2 as :en_highMinus2

@:start
EN is low

@:en_high+1.2
EN is high

@10.5
EN is low
@enduml

[Ref. QA-17885]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
参与者

按时间顺序来描述状态变化可能会有些麻烦，不如将每个参与者的变化放在一起。

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

@WB
0 is idle
+200 is Proc.
+100 is Waiting

@WU
0 is Waiting
+500 is ok
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
设置缩放

你还可以设置缩放比例。

🎉 Copied! 

@startuml
concise "Web User" as WU
scale 100 as 50 pixels

@WU
0 is Waiting
+500 is ok
@enduml

当使用绝对时间或者日期时，1单位为1秒。

🎉 Copied! 

@startuml
concise "季节" as S
'这里将30天缩放到50像素
scale 2592000 as 50 pixels

@2000/11/01
S is "冬"

@2001/02/01
S is "春"

@2001/05/01
S is "夏"

@2001/08/01
S is "秋"
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
初始状态

你可以定义初始状态。

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

WB is Initializing
WU is Absent

@WB
0 is idle
+200 is Processing
+100 is Waiting

@WU
0 is Waiting
+500 is ok
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
模糊状态

一个信号在某个时段可能是模糊的，有多个可能的状态区间。

模糊或者未定义鲁棒状态信号

🎉 Copied! 

@startuml
robust "Signal1" as S1
robust "Signal2" as S2
S1 has 0,1,2,hello
S2 has 0,1,2
@0
S1 is 0
S2 is 0
@100
S1 is {0,1} #SlateGrey
S2 is {0,1}
@200
S1 is 1
S2 is 0
@300
S1 is hello
S2 is {0,2}
@enduml

模糊或者未定义二进制信号

🎉 Copied! 

@startuml
clock "Clock" as C with period 2
binary "Enable" as EN

@0
EN is low
@1
EN is high
@3
EN is low
@5
EN is {low,high}
@10
EN is low
@enduml

[ Ref. QA-11936 and QA-15933 ]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
隐藏状态

可以隐藏某个时段的状态。

🎉 Copied! 

@startuml
concise "Web User" as WU

@0
WU is {-}

@100
WU is A1

@200
WU is {-}

@300
WU is {hidden}

@400
WU is A3

@500
WU is {-}
@enduml

🎉 Copied! 

@startuml
scale 1 as 50 pixels

concise state0
concise substate1
robust bit2

bit2 has HIGH,LOW

@state0
0 is 18_start
6 is s_dPause
8 is 10_data
14 is {hidden}

@substate1
0 is sSeq
4 is sPause
6 is {hidden}
8 is dSeq
12 is dPause
14 is {hidden}

@bit2
0 is HIGH
2 is LOW
4 is {hidden}
8 is HIGH
10 is LOW
12 is {hidden}
@enduml

[Ref.QA-12222]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Negative time value

🎉 Copied! 

@startuml
robust "R-Deci" as RD
concise "R-Algo-0" as RA0
robust "R-Algo-1" as RA1

@200
RD is 0
RA0 is 0

@-200
RD is 1
RA0 is 3

@100
RD is 0
@enduml

[Ref. QA-7698]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
隐藏时间轴

可以隐藏时间轴。

🎉 Copied! 

@startuml
hide time-axis
concise "Web User" as WU

WU is Absent

@WU
0 is Waiting
+500 is ok
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
使用日期

时间轴除时间以外也可以改用日期表示。

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

@2019/07/02
WU is Idle
WB is Idle

@2019/07/04
WU is Waiting : some note
WB is Processing : some other note

@2019/07/05
WB is Waiting
@enduml

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

@1:15:00
WU is Idle
WB is Idle

@1:16:30
WU is Waiting : some note
WB is Processing : some other note

@1:17:30
WB is Waiting
@enduml

*[Ref. [QA-7019](https://forum.plantuml.net/7019/hh-mm-ss-time-format-in-timing-diagram)]*

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Change Date Format

It is also possible to change date format.

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

use date format "YY-MM-dd"

@2019/07/02
WU is Idle
WB is Idle

@2019/07/04
WU is Waiting : some note
WB is Processing : some other note

@2019/07/05
WB is Waiting
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Manage time axis labels

You can manage the time-axis labels.

Label on each tick (by default)

🎉 Copied! 

@startuml
scale 31536000 as 40 pixels
use date format "yy-MM"

concise "OpenGL Desktop" as OD

@1992/01/01
OD is {hidden}

@1992/06/30
OD is 1.0

@1997/03/04
OD is 1.1

@1998/03/16
OD is 1.2

@2001/08/14
OD is 1.3

@2004/09/07
OD is 3.0

@2008/08/01
OD is 3.0

@2017/07/31
OD is 4.6

@enduml

Manual label (only when the state changes)

🎉 Copied! 

@startuml
scale 31536000 as 40 pixels

manual time-axis
use date format "yy-MM"

concise "OpenGL Desktop" as OD

@1992/01/01
OD is {hidden}

@1992/06/30
OD is 1.0

@1997/03/04
OD is 1.1

@1998/03/16
OD is 1.2

@2001/08/14
OD is 1.3

@2004/09/07
OD is 3.0

@2008/08/01
OD is 3.0

@2017/07/31
OD is 4.6

@enduml

[Ref. GH-1020]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
添加约束

可以在图上标示时间约束。

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

WB is Initializing
WU is Absent

@WB
0 is idle
+200 is Processing
+100 is Waiting
WB@0 <-> @50 : {50 ms lag}

@WU
0 is Waiting
+500 is ok
@200 <-> @+150 : {150 ms}
@enduml

= 设置高亮

你可以给图表中的某一时段设置高亮。

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle

@100
WU -> WB : URL
WU is Waiting #LightCyan;line:Aqua

@200
WB is Proc.

@300
WU -> WB@350 : URL2
WB is Waiting

@+200
WU is ok

@+200
WB is Idle

highlight 200 to 450 #Gold;line:DimGrey : This is my caption
@enduml

*[Ref. [QA-10868](https://forum.plantuml.net/10868/highlighted-periods-in-timing-diagrams)]*

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
添加注释

你可以使用 note top of 或 note bottom of 关键字在某一时刻或参与者的上方或下方添加注释 （只可以在 concise 类型的参与者中使用）。

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle

@100
WU is Waiting
WB is Processing
note top of WU : first note\non several\nlines
note bottom of WU : second note\non several\nlines

@300
WB is Waiting
@enduml

[Ref. QA-6877]

*[Ref. [QA-6877](https:forum.plantuml.net/6877), [GH-1465](https:github.com/plantuml/plantuml/issues/1465)]*
WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
添加文本

你可以选择添加标题、页眉、页脚、图例和说明。

🎉 Copied! 

@startuml
Title Some title
header: Some header
footer: Some footer
legend
Some legend
end legend
caption Some caption

robust "Web Browser" as WB
concise "Web User" as WU

@0
WU is Idle
WB is Idle

@100
WU is Waiting
WB is Processing

@300
WB is Waiting
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
完整样例

感谢Adam Rosien提供该样例。

🎉 Copied! 

@startuml
concise "Client" as Client
concise "Server" as Server
concise "Response freshness" as Cache

Server is idle
Client is idle

@Client
0 is send
Client -> Server@+25 : GET
+25 is await
+75 is recv
+25 is idle
+25 is send
Client -> Server@+25 : GET\nIf-Modified-Since: 150
+25 is await
+50 is recv
+25 is idle
@100 <-> @275 : no need to re-request from server

@Server
25 is recv
+25 is work
+25 is send
Server -> Client@+25 : 200 OK\nExpires: 275
+25 is idle
+75 is recv
+25 is send
Server -> Client@+25 : 304 Not Modified
+25 is idle

@Cache
75 is fresh
+200 is stale
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
数据表示样例

🎉 Copied! 

@startuml
scale 5 as 150 pixels

clock clk with period 1
binary "enable" as en
binary "R/W" as rw
binary "data Valid" as dv
concise "dataBus" as db
concise "address bus" as addr

@6 as :write_beg
@10 as :write_end

@15 as :read_beg
@19 as :read_end


@0
en is low
db is "0x0"
addr is "0x03f"
rw is low
dv is 0

@:write_beg-3
 en is high
@:write_beg-2
 db is "0xDEADBEEF"
@:write_beg-1
dv is 1
@:write_beg
rw is high


@:write_end
rw is low
dv is low
@:write_end+1
rw is low
db is "0x0"
addr is "0x23"

@12
dv is high
@13 
db is "0xFFFF"

@20
en is low
dv is low
@21 
db is "0x0"

highlight :write_beg to :write_end #Gold:Write
highlight :read_beg to :read_end #lightBlue:Read

db@:write_beg-1 <-> @:write_end : setup time
db@:write_beg-1 -> addr@:write_end+1 : hold
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
颜色

你可以为图表添加颜色。

🎉 Copied! 

@startuml
concise "LR" as LR
concise "ST" as ST

LR is AtPlace #palegreen
ST is AtLoad #gray

@LR
0 is Lowering
100 is Lowered #pink
350 is Releasing
 
@ST
200 is Moving
@enduml

[Ref.QA-5776]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
使用（全局）样式

无样式（默认样式）。

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU

WB is Initializing
WU is Absent

@WB
0 is idle
+200 is Processing
+100 is Waiting
WB@0 <-> @50 : {50 ms lag}

@WU
0 is Waiting
+500 is ok
@200 <-> @+150 : {150 ms}
@enduml

设置样式

你可以使用样式来改变元素的渲染。

🎉 Copied! 

@startuml
<style>
timingDiagram {
  document {
    BackGroundColor SandyBrown
  }
 constraintArrow {
  LineStyle 2-1
  LineThickness 3
  LineColor Blue
 }
}
</style>
robust "Web Browser" as WB
concise "Web User" as WU

WB is Initializing
WU is Absent

@WB
0 is idle
+200 is Processing
+100 is Waiting
WB@0 <-> @50 : {50 ms lag}

@WU
0 is Waiting
+500 is ok
@200 <-> @+150 : {150 ms}
@enduml

[Ref.QA-14340]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
对特定行着色

可以使用 <style> 标记和模板将行属性命名

🎉 Copied! 

@startuml
<style>
timingDiagram {
  .red {
    LineColor red
  }
  .blue {
    LineColor blue
    LineThickness 5
  }
}
</style>

clock clk with period 1
binary "Input Signal 1"  as IS1
binary "Input Signal 2"  as IS2 <<blue>>
binary "Output Signal 1" as OS1 <<red>>

@0
IS1 is low
IS2 is high
OS1 is low
@2
OS1 is high
@4
OS1 is low
@5
IS1 is high
OS1 is high
@6
IS2 is low
@10
IS1 is low
OS1 is low
@enduml

[Ref. QA-15870]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
紧凑模式

可以使用 compact 命令进行紧凑排版

默认模式

🎉 Copied! 

@startuml
robust "Web Browser" as WB
concise "Web User" as WU
robust "Web Browser2" as WB2

@0
WU is Waiting
WB is Idle
WB2 is Idle

@200
WB is Proc.

@300
WB is Waiting
WB2 is Waiting

@500
WU is ok

@700
WB is Idle
@enduml

使用 mode compact 的全局紧凑模式

🎉 Copied! 

@startuml
mode compact
robust "Web Browser" as WB
concise "Web User" as WU
robust "Web Browser2" as WB2

@0
WU is Waiting
WB is Idle
WB2 is Idle

@200
WB is Proc.

@300
WB is Waiting
WB2 is Waiting

@500
WU is ok

@700
WB is Idle
@enduml

使用 compact 实现仅针对元素的局部紧凑模式

🎉 Copied! 

@startuml
compact robust "Web Browser" as WB
compact concise "Web User" as WU
robust "Web Browser2" as WB2

@0
WU is Waiting
WB is Idle
WB2 is Idle

@200
WB is Proc.

@300
WB is Waiting
WB2 is Waiting

@500
WU is ok

@700
WB is Idle
@enduml

[Ref. QA-11130]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Scaling analog signal

You can scale analog signal.

Without scaling: 0-max (by default)

🎉 Copied! 

@startuml
title Between 0-max (by default)
analog "Analog" as A

@0
A is 350

@100
A is 450

@300
A is 350
@enduml

With scaling: min-max

🎉 Copied! 

@startuml
title Between min-max
analog "Analog" between 350 and 450 as A

@0
A is 350

@100
A is 450

@300
A is 350
@enduml

[Ref. QA-17161]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Customise analog signal

Without any customisation (by default)

🎉 Copied! 

@startuml
analog "Vcore" as VDD
analog "VCC" as VCC

@0
VDD is 0
VCC is 3
@2
VDD is 0
@3
VDD is 6
VCC is 6
VDD@1 -> VCC@2 : "test"
@enduml

With customisation (on scale, ticks and height)

🎉 Copied! 

@startuml
analog "Vcore" as VDD
analog "VCC" between -4.5 and 6.5 as VCC
VCC ticks num on multiple 3
VCC is 200 pixels height

@0
VDD is 0
VCC is 3
@2
VDD is 0
@3
VDD is 6
VCC is 6
VDD@1 -> VCC@2 : "test"
@enduml

[Ref. QA-11288]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Order state of robust signal

Without order (by default)

🎉 Copied! 

@startuml
robust "Flow rate" as rate

@0
rate is high

@5
rate is none

@6
rate is low
@enduml

With order

🎉 Copied! 

@startuml
robust "Flow rate" as rate
rate has high,low,none

@0
rate is high

@5
rate is none

@6
rate is low
@enduml

With order and label

🎉 Copied! 

@startuml
robust "Flow rate" as rate
rate has "35 gpm" as high
rate has "15 gpm" as low
rate has "0 gpm" as none

@0
rate is high

@5
rate is none

@6
rate is low
@enduml

[Ref. QA-6651]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Defining a timing diagram

By Clock (@clk)

🎉 Copied! 

@startuml
clock "clk" as clk with period 50
concise "Signal1" as S1
robust "Signal2" as S2
binary "Signal3" as S3
 
@clk*0
S1 is 0
S2 is 0

@clk*1
S1 is 1
S3 is high

@clk*2
S3 is down

@clk*3
S1 is 1
S2 is 1
S3 is 1

@clk*4
S3 is down
@enduml

By Signal (@S)

🎉 Copied! 

@startuml
clock "clk" as clk with period 50
concise "Signal1" as S1
robust "Signal2" as S2
binary "Signal3" as S3

@S1
0 is 0
50 is 1
150 is 1

@S2
0 is 0
150 is 1

@S3
50  is 1
100 is low
150 is high
200 is 0
@enduml

By Time (@time)

🎉 Copied! 

@startuml
clock "clk" as clk with period 50
concise "Signal1" as S1
robust "Signal2" as S2
binary "Signal3" as S3

@0
S1 is 0
S2 is 0

@50
S1 is 1
S3 is 1

@100
S3 is low

@150
S1 is 1
S2 is 1
S3 is high

@200
S3 is 0
@enduml

[Ref. QA-9053]

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Annotate signal with comment

🎉 Copied! 

@startuml
binary "Binary Serial Data" as D
robust "Robust" as R
concise "Concise" as C

@-3
D is low: idle
R is lo: idle
C is 1: idle
@-1
D is high: start
R is hi: start
C is 0: start

@0
D is low: 1 lsb
R is lo: 1 lsb
C is 1: lsb

@1
D is high: 0
R is hi: 0
C is 0

@6
D is low: 1
R is lo: 1
C is 1

@7
D is high: 0 msb
R is hi: 0 msb
C is 0: msb

@8
D is low: stop
R is lo: stop
C is 1: stop

@0 <-> @8 : Serial data bits for ASCII "A" (Little Endian)
@enduml

[Ref. QA-15762, and QH-888]