简单的注释
所有以simple quote ' 开始的都是一个
的注释。
@startuml
'Line comments use a single apostrophe
@enduml
</zh3> * 块状注释<zh3>
块状注释使用C风格的注释,除了用一撇一捺代替' ,
然后你也可以把注释放在几行上,用/' 开始,'/ 结束。
@startuml
/'
many lines comments
here
'/
@enduml
[Ref.QA-1353]
然后你也可以在同一行中放置块状注释,如。
🎉 Copied!
|
@startuml
/' case 1 '/ A -> B : AB-First step
B -> C : BC-Second step
/' case 2 '/ D -> E : DE-Third step
@enduml
|
[参考资料:QA-3906和QA-3910] 。
You can use the scale command to zoom the generated image.
You can use either a number or a fraction to define the scale factor.
You can also specify either width or height (in pixel).
And you can also give both width and height : the image is scaled to fit inside the specified dimension.
scale 1.5
scale 2/3
scale 200 width
scale 200 height
scale 200*100
scale max 300*200
scale max 1024 width
scale max 800 height
🎉 Copied!
|
@startuml
scale 180*90
Bob->Alice : hello
@enduml
|
WARNING This translation need to be updated. WARNING
使用 title 关键字添加标题。
你可以在标题描述中使用 \n 添加新行。
Some skinparam settings are available to put borders on the title.
🎉 Copied!
|
@startuml
skinparam titleBorderRoundCorner 15
skinparam titleBorderThickness 2
skinparam titleBorderColor red
skinparam titleBackgroundColor Aqua-CadetBlue
title Simple communication\nexample
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml
|
You can use creole formatting in the title.
You can also define title on several lines using title
and end title keywords.
🎉 Copied!
|
@startuml
title
<u>Simple</u> communication example
on <i>several</i> lines and using <back:cadetblue>creole tags</back>
end title
Alice -> Bob: Authentication Request
Bob -> Alice: Authentication Response
@enduml
|
使用 caption 关键字在图像下放置一个标题.
🎉 Copied!
|
@startuml
caption figure 1
Alice -> Bob: Hello
@enduml
|
你可以使用 header 和 footer 命令在生成的图中增加页眉和页脚。
你可以选择指定center , left 或 right 关键字使页眉或页脚实现居中、左对齐和右对齐。
和标题一样,页眉或页脚内容可以在多行中定义,而且同样可以在页眉或页脚中输入一些HTML代码。
🎉 Copied!
|
@startuml
Alice -> Bob: Authentication Request
header
<font color=red>Warning:</font>
Do not use in production.
endheader
center footer Generated for demonstration
@enduml
|
legend 和 end legend 作为关键词,用于配置一个图例(legend).
支持可选地使用left ,right ,center 为这个图例指定对齐方式.
🎉 Copied!
|
@startuml
Alice -> Bob : Hello
legend right
Short
legend
endlegend
@enduml
|
🎉 Copied!
|
@startuml
Alice -> Bob : Hello
legend left
Short
legend
endlegend
@enduml
|
Activity
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml
|
Archimate
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
archimate #Technology "VPN Server" as vpnServerA <<technology-device>>
rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange
@enduml
|
Class
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a -- b
@enduml
|
Component, Deployment, Use-Case
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
node n
(u) -> [c]
@enduml
|
Gantt project planning
🎉 Copied!
|
@startgantt
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[t] lasts 5 days
@endgantt
|
DONE
[(Header, footer) corrected on V1.2020.18]
Object
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
object user {
name = "Dummy"
id = 123
}
@enduml
|
MindMap
🎉 Copied!
|
@startmindmap
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
* r
** d1
** d2
@endmindmap
|
Network (nwdiag)
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
nwdiag {
network inet {
web01 [shape = cloud]
}
}
@enduml
|
Sequence
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a->b
@enduml
|
State
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[*] --> State1
State1 -> State2
@enduml
|
Timing
🎉 Copied!
|
@startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
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
|
Work Breakdown Structure (WBS)
🎉 Copied!
|
@startwbs
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
* r
** d1
** d2
@endwbs
|
DONE
[Corrected on V1.2020.17]
Wireframe (SALT)
🎉 Copied!
|
@startsalt
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
DONE
[Corrected on V1.2020.18]
DONE
FYI:
- all is only good for
Sequence diagram
title , caption and legend are good for all diagrams except for salt diagram
FIXME 🚩
- Now (test on 1.2020.18-19)
header , footer are not good for all other diagrams except only for Sequence diagram .
To be fix; Thanks
FIXME
Here are tests of title , header , footer , caption or legend on all the diagram with the debug style:
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
Activity
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml
|
Archimate
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
archimate #Technology "VPN Server" as vpnServerA <<technology-device>>
rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange
@enduml
|
Class
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a -- b
@enduml
|
Component, Deployment, Use-Case
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
node n
(u) -> [c]
@enduml
|
Gantt project planning
🎉 Copied!
|
@startgantt
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[t] lasts 5 days
@endgantt
|
Object
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
object user {
name = "Dummy"
id = 123
}
@enduml
|
MindMap
🎉 Copied!
|
@startmindmap
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
* r
** d1
** d2
@endmindmap
|
Network (nwdiag)
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
nwdiag {
network inet {
web01 [shape = cloud]
}
}
@enduml
|
Sequence
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a->b
@enduml
|
State
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[*] --> State1
State1 -> State2
@enduml
|
Timing
🎉 Copied!
|
@startuml
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
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
|
Work Breakdown Structure (WBS)
🎉 Copied!
|
@startwbs
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
* r
** d1
** d2
@endwbs
|
Wireframe (SALT)
FIXME
Fix all (title , caption , legend , header , footer ) for salt.
FIXME
🎉 Copied!
|
@startsalt
<style>
title {
HorizontalAlignment right
FontSize 24
FontColor blue
}
header {
HorizontalAlignment center
FontSize 26
FontColor purple
}
footer {
HorizontalAlignment left
FontSize 28
FontColor red
}
legend {
FontSize 30
BackGroundColor yellow
Margin 30
Padding 50
}
caption {
FontSize 32
}
</style>
@startsalt
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
Alice->Bob : Hello
@enduml
|
[Ref. QA-4019 and Issue#148]
活动
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml
|
架构
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
archimate #Technology "VPN Server" as vpnServerA <<technology-device>>
rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange
@enduml
|
FIXME 栏目
在顶部和左侧进行了裁剪
FIXME
类别
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
a -- b
@enduml
|
FIXME 纪事
在顶部和左侧进行了裁剪
FIXME
组件、部署、用例
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
node n
(u) -> [c]
@enduml
|
FIXME 丨
顶部和左侧的裁剪
FIXME### 丨
甘特项目计划
🎉 Copied!
|
@startgantt
mainframe This is a **mainframe**
[t] lasts 5 days
@endgantt
|
FIXME Ì
在顶部和左侧进行了裁剪
FIXME
对象
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
object user {
name = "Dummy"
id = 123
}
@enduml
|
FIXME 丨
顶部被裁剪!
FIXME
心智图谱
🎉 Copied!
|
@startmindmap
mainframe This is a **mainframe**
* r
** d1
** d2
@endmindmap
|
网络 (nwdiag)
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
nwdiag {
network inet {
web01 [shape = cloud]
}
}
@enduml
|
FIXME 锦标赛
顶部被裁剪!
FIXME
序列
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
a->b
@enduml
|
状况
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
[*] --> State1
State1 -> State2
@enduml
|
FIXME 锦标赛
顶部和左侧被裁剪
FIXME
时间安排
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
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
|
工作分解结构(WBS)
🎉 Copied!
|
@startwbs
mainframe This is a **mainframe**
* r
** d1
** d2
@endwbs
|
线框 (SALT)
🎉 Copied!
|
@startsalt
mainframe This is a **mainframe**
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
Activity
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
start
:Hello world;
:This is defined on
several **lines**;
stop
@enduml
|
Archimate
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
archimate #Technology "VPN Server" as vpnServerA <<technology-device>>
rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange
@enduml
|
Class
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a -- b
@enduml
|
Component, Deployment, Use-Case
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
node n
(u) -> [c]
@enduml
|
Gantt project planning
🎉 Copied!
|
@startgantt
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[t] lasts 5 days
@endgantt
|
Object
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
object user {
name = "Dummy"
id = 123
}
@enduml
|
MindMap
🎉 Copied!
|
@startmindmap
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
* r
** d1
** d2
@endmindmap
|
Network (nwdiag)
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
nwdiag {
network inet {
web01 [shape = cloud]
}
}
@enduml
|
Sequence
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a->b
@enduml
|
State
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[*] --> State1
State1 -> State2
@enduml
|
Timing
🎉 Copied!
|
@startuml
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
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
|
Work Breakdown Structure (WBS)
🎉 Copied!
|
@startwbs
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
* r
** d1
** d2
@endwbs
|
Wireframe (SALT)
🎉 Copied!
|
@startsalt
mainframe This is a **mainframe**
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
{+
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
|
|
|