Explore these commands to create diagrams that are both functional and aesthetically pleasing, tailoring each element to your exact specifications. WARNING This translation need to be updated. WARNING 単一行コメント シングルクォート' で始まる行はコメントです。
@startuml
'Line comments use a single apostrophe
@enduml
ブロックコメント ブロックコメントは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
| [Ref. QA-3906 and QA-3910][Ref. GH-214]WARNING This translation need to be updated. WARNING scale コマンドを使って、生成する画像を拡大できます。 小数または分数で拡大率を指定できます。 ピクセル単位でwidth (幅)またはheight (高さ)を指定することもできます。 幅と高さの両方を指定することもできます。この場合は、指定したサイズの内側に収まるように調整されます。 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
|
title キーワードを使用してタイトルを入れることができます。 タイトルでは\n を使用して改行することができます。 skinparam設定を使用してタイトルに枠線を付けることができます。 🎉 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
| タイトル中でcreole書式を使用することもできます。 また、title とend title キーワードを使用することで、複数行にわたってタイトルを記述することもできます。 🎉 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
|
footer 、header のコマンドを使って、生成された図にフッタとヘッダを追加することができます。 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 を使って凡例を追加できます。 left 、right 、top 、bottom 、center を使って、凡例の位置を指定することもできます。 🎉 Copied! 
 | @startuml
Alice -> Bob : Hello
legend right
Short
legend
endlegend
@enduml
|
🎉 Copied! 
 | @startuml
Alice -> Bob : Hello
legend top left
Short
legend
endlegend
@enduml
|
アクティビティ図 🎉 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
|
アーキテクチャ図 🎉 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
|
クラス図 🎉 Copied! 
 | @startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a -- b
@enduml
|
コンポーネント図、配置図、ユースケース図 🎉 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
|
ガントチャート 🎉 Copied! 
 | @startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[t] lasts 5 days
@enduml
|
DONE [(Header, footer) corrected on V1.2020.18]オブジェクト図 🎉 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
|
マインドマップ 🎉 Copied! 
 | @startmindmap
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
* r
** d1
** d2
@endmindmap
|
ネットワーク図(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
|
シーケンス図 🎉 Copied! 
 | @startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
a->b
@enduml
|
ステート図 🎉 Copied! 
 | @startuml
header some header
footer some footer
title My title
caption This is caption
legend
The legend
end legend
[*] --> State1
State1 -> State2
@enduml
|
タイミング図 🎉 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]WARNING This translation need to be updated. WARNING DONE FYI: - すべてが正常に使えるのはシーケンス図のみです。
title 、caption 、legend は、salt diagram以外のすべての図で正常に使えます。
FIXME 🚩 - 現状(test on 1.2020.18-19)、
header 、footer はシーケンス図を除くすべての図で正常に動作しません。 To be fix; Thanks FIXME ここでは、すべての図を使ってtitle 、header 、footer 、caption 、legend を、デバッグ形式でテストしています:
<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>
アクティビティ図 🎉 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
|
アーキテクチャ図 🎉 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
|
クラス図 🎉 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
|
コンポーネント図、配置図、ユースケース図 🎉 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
|
ガントチャート 🎉 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
[t] lasts 5 days
@enduml
|
オブジェクト図 🎉 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
|
マインドマップ 🎉 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
|
ネットワーク図(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
|
シーケンス図 🎉 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
|
ステート図 🎉 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
|
タイミング図 🎉 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
|
WARNING This translation need to be updated. WARNING 🎉 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 🚩 Cropped on the top and on the left FIXME クラス図 🎉 Copied! 
 | @startuml
mainframe This is a **mainframe**
a -- b
@enduml
|
FIXME 🚩 Cropped on the top and on the left FIXME コンポーネント図、配置図、ユースケース図 🎉 Copied! 
 | @startuml
mainframe This is a **mainframe**
node n
(u) -> [c]
@enduml
|
FIXME 🚩 Cropped on the top and on the left FIXME ガントチャート 🎉 Copied! 
 | @startuml
mainframe This is a **mainframe**
[t] lasts 5 days
@enduml
|
FIXME 🚩 Cropped on the top and on the left FIXME オブジェクト図 🎉 Copied! 
 | @startuml
mainframe This is a **mainframe**
object user {
name = "Dummy"
id = 123
}
@enduml
|
FIXME 🚩 Cropped on the top! 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 🚩 Cropped on the top! FIXME シーケンス図 🎉 Copied! 
 | @startuml
mainframe This is a **mainframe**
a->b
@enduml
|
ステート図 🎉 Copied! 
 | @startuml
mainframe This is a **mainframe**
[*] --> State1
State1 -> State2
@enduml
|
FIXME 🚩 Cropped on the top and on the left 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
|
Work Breakdown Structure (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
|
WARNING This translation need to be updated. WARNING アクティビティ図 🎉 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
|
アーキテクチャ図 🎉 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
|
クラス図 🎉 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
|
コンポーネント図、配置図、ユースケース図 🎉 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
|
ガントチャート 🎉 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
[t] lasts 5 days
@enduml
|
オブジェクト図 🎉 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
|
マインドマップ 🎉 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
|
ネットワーク図(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
|
シーケンス図 🎉 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
|
ステート図 🎉 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
|
タイミング図 🎉 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
|
ワイヤフレーム (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
|
WARNING This translation need to be updated. WARNING | |