PlantUMLLanguage specificationCommon commands

共通コマンド
Edit in DokuwikiEdit in AsciidocEdit in Markdown

コメント
Edit in DokuwikiEdit in AsciidocEdit in Markdown

単一行コメント

シングルクォート'で始まる行はコメントです。 

@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]

拡大
Edit in DokuwikiEdit in AsciidocEdit in Markdown

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

タイトル
Edit in DokuwikiEdit in AsciidocEdit in Markdown

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

キャプション
Edit in DokuwikiEdit in AsciidocEdit in Markdown

captionキーワードを使用して図の下部にキャプションを入れることができます。

🎉 Copied! 
@startuml

caption figure 1
Alice -> Bob: Hello

@enduml

フッタとヘッダ
Edit in DokuwikiEdit in AsciidocEdit in Markdown

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

図の凡例
Edit in DokuwikiEdit in AsciidocEdit in Markdown

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

付録：すべての図の例
Edit in DokuwikiEdit in AsciidocEdit in Markdown

アクティビティ図

🎉 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]

付録：すべての図でスタイルを指定した例
Edit in DokuwikiEdit in AsciidocEdit in Markdown

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

メインフレーム
Edit in DokuwikiEdit in AsciidocEdit in Markdown

🎉 Copied! 
@startuml
mainframe This is a **mainframe**
Alice->Bob : Hello
@enduml

[Ref. QA-4019 and Issue#148]

付録: すべての図に対するメインフレームの例
Edit in DokuwikiEdit in AsciidocEdit in Markdown

アクティビティ図

🎉 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