通用命令

注释

简单的注释

所有以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-3906QA-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

页眉和页脚

你可以使用 headerfooter命令在生成的图中增加页眉和页脚。

你可以选择指定center, leftright关键字使页眉或页脚实现居中、左对齐和右对齐。

和标题一样,页眉或页脚内容可以在多行中定义,而且同样可以在页眉或页脚中输入一些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

图例说明

legendend 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

Appendix: Examples on all diagram

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]

Appendix: Examples on all diagram with style

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

Mainframe

🎉 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

Appendix: Examples of title, header, footer, caption, legend and mainframe on all diagram

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


Privacy Policy      Advertise