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] WARNING  This translation need to be updated.  WARNING 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 WARNING  This translation need to be updated.  WARNING 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 WARNING  This translation need to be updated.  WARNING Edit in DokuwikiEdit in AsciidocEdit in Markdown 付録: すべての図に対するタイトル、ヘッダ、フッタ、キャプション、凡例、メインフレームの例 アクティビティ図 🎉 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

コメント 拡大 タイトル キャプション フッタとヘッダ 図の凡例 付録：すべての図の例 付録：すべての図でスタイルを指定した例 メインフレーム 付録: すべての図に対するメインフレームの例 付録: すべての図に対するタイトル、ヘッダ、フッタ、キャプション、凡例、メインフレームの例