PlantUML Language specification Creole

       

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Creole

Edit in DokuwikiEdit in AsciidocEdit in Markdown

テキストの強調

🎉 Copied!

@startuml Alice -> Bob : hello --there-- here ... Some ~~long delay~~ ... Bob -> Alice : ok note left This is **bold** This is //italics// This is ""monospaced"" This is --stricken-out-- This is __underlined__ This is ~~wave-underlined~~ end note @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

リスト

🎉 Copied!

@startuml object demo { * 箇条書きリスト * 二つ目の項目 } note left * 箇条書きリスト * 二つ目の項目 ** サブ項目 end note legend # 番号付きリスト # 二つ目の項目 ## サブ項目 ## 別のサブ項目 * 番号付きと箇条書きを * 混ぜることはできません # 三つ目の項目 end legend @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

エスケープ文字

🎉 Copied!

@startuml object demo { This is not ~___underscored__. This is not ~""monospaced"". } @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

見出し

🎉 Copied!

@startuml usecase UC1 as " = 特大見出し 何かのテキスト == 大見出し 別のテキスト === 中見出し 情報 .... ==== 小見出し" @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

絵文字

🎉 Copied!

@startuml Alice -> Bob : Hello <:1f600:> return <:innocent:> Alice -> Bob : Without color: <#0:sunglasses:> Alice -> Bob : Change color: <#green:sunny:> @enduml

• Unicode block 26
• Unicode block 1F3
• Unicode block 1F4
• Unicode block 1F5
• Unicode block 1F6
• Unicode block 1F9

Edit in DokuwikiEdit in AsciidocEdit in Markdown

水平線

🎉 Copied!

@startuml database DB1 as " 水平線を入れることができます ---- 二重線 ==== 太線 ____ 点線 ..タイトル.. Enjoy! " note right 注釈でも同様に利用可能です また、いずれの線にもタイトルを入れることができます ==タイトル== --これもタイトル-- end note @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

リンク

• [[http://plantuml.com]]
• [[http://plantuml.com This label is printed]]
• [[http://plantuml.com{Optional tooltip} This label is printed]]

Edit in DokuwikiEdit in AsciidocEdit in Markdown

コード

🎉 Copied!

@startuml Alice -> Bob : hello note right <code> main() { printf("Hello world"); } </code> end note @enduml

🎉 Copied!

@startuml Alice -> Bob : hello note left <code> This is **bold** This is //italics// This is ""monospaced"" This is --stricken-out-- This is __underlined__ This is ~~wave-underlined~~ --test Unicode and icons-- This is <U+221E> long This is a <&code> icon </code> end note note right This is **bold** This is //italics// This is ""monospaced"" This is --stricken-out-- This is __underlined__ This is ~~wave-underlined~~ --test Unicode and icons-- This is <U+221E> long This is a <&code> icon end note @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

テーブル

テーブルの作成

🎉 Copied!

@startuml skinparam titleFontSize 14 title シンプルなテーブルの例 |= |= table |= header | | a | table | row | | b | table | row | end title [*] --> State1 @enduml

行とセルの色

🎉 Copied!

@startuml start :Here is the result |= |= table |= header | | a | table | row | |<#FF8080> red |<#80FF80> green |<#8080FF> blue | <#yellow>| b | table | row |; @enduml

枠線とテキストの色

🎉 Copied!

@startuml title <#lightblue,#red>|= Step |= Date |= Name |= Status |= Link | <#lightgreen>| 1.1 | TBD | plantuml news |<#Navy><color:OrangeRed><b> Unknown | [[https://plantuml.com/news plantuml news]] | end title @enduml

枠線無し（背景と同色の枠線）

🎉 Copied!

@startuml node n note right of n <#FBFB77,#FBFB77>|= Husky / Yorkie |= Foo | | SourceTree1 | foo1 | | ST2 | foo2 | end note @enduml

[Ref. QA-12448]

ヘッダを太字にするかどうか

🎉 Copied!

@startuml note as deepCSS0 |<#white> Husky / Yorkie | |=<#gainsboro> SourceTree0 | endnote note as deepCSS1 |= <#white> Husky / Yorkie |= Foo | |<#gainsboro><r> SourceTree1 | foo1 | endnote note as deepCSS2 |= Husky / Yorkie | |<#gainsboro> SourceTree2 | endnote note as deepCSS3 <#white>|= Husky / Yorkie |= Foo | |<#gainsboro> SourceTree1 | foo1 | endnote @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

ツリー

🎉 Copied!

@startuml skinparam titleFontSize 14 title ツリーの例 |_ 一行目 |_ **Bom (Model)** |_ prop1 |_ prop2 |_ prop3 |_ 最終行 end title [*] --> State1 @enduml

🎉 Copied!

@startuml class Foo { **Bar (Model)** |_ prop |_ **Bom (Model)** |_ prop2 |_ prop3 |_ prop3.1 |_ prop4 :( -- } @enduml

[Ref. QA-3448]

🎉 Copied!

@startuml [A] as A rectangle "Box B" { component B [ Level 1 |_ Level 2a |_ Level 3a |_ Level 3b |_ Level 3c |_ Level 4a |_ Level 3d |_ Level 2b |_ Level 3e ] } A -> B @enduml

[Ref. QA-11365]

Edit in DokuwikiEdit in AsciidocEdit in Markdown

特殊文字

🎉 Copied!

@startuml usecase direct as "this is ∞ long" usecase ampHash as "this is also ∞ long" usecase angleBrackets as "this is also <U+221E> long" @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

レガシーHTML

• <b>で太字
• <u>または<u:#AAAAAA>または<u:[[color|colorName]]>で下線
• <i>でイタリック
• <s>または<s:#AAAAAA>または<s:[[color|colorName]]>で打消し線
• <w>または<w:#AAAAAA>または<w:[[color|colorName]]>で波下線
• <plain> でプレーンテキスト
• <color:#AAAAAA>または<color:[[color|colorName]]>で文字色
• <back:#AAAAAA>または<back:[[color|colorName]]>で背景色
• <size:nn>でフォントサイズの変更
• <img:file> : ファイルシステム中にアクセス可能なファイルを指定
• <img:http://plantuml.com/logo3.png> : インターネット上で利用可能なURLを指定

🎉 Copied!

@startuml :* <color:red>文字色</color>の変更 * <back:cadetblue>背景色</back>の変更 * <size:18>フォントサイズ</size>の変更 * <u>legacy</u> <b>HTML <i>tag</i></b> * <u:red>HTML</u><s:green>タグ中での</s><w:#0000FF>色の使用</w> ---- * 画像：<img:http://plantuml.com/logo3.png> ; @enduml

一般的なHTML要素

🎉 Copied!

@startuml hide footbox note over Source <code> This is <b>bold</b> This is <i>italics</i> This is <font:monospaced>monospaced</font> This is <s>stroked</s> This is <u>underlined</u> This is <w>waved</w> This is <s:green>stroked</s> This is <u:red>underlined</u> This is <w:#0000FF>waved</w> This is <b>a bold text containing <plain>plain text</plain> inside</b> -- other examples -- This is <color:blue>Blue</color> This is <back:orange>Orange background</back> This is <size:20>big</size> </code> end note /note over Output This is <b>bold</b> This is <i>italics</i> This is <font:monospaced>monospaced</font> This is <s>stroked</s> This is <u>underlined</u> This is <w>waved</w> This is <s:green>stroked</s> This is <u:red>underlined</u> This is <w:#0000FF>waved</w> This is <b>a bold text containing <plain>plain text</plain> inside</b> -- other examples -- This is <color:blue>Blue</color> This is <back:orange>Orange background</back> This is <size:20>big</size> end note @enduml

上付き文字、下付き文字 [sub, sup]

🎉 Copied!

@startuml :<code> これは「カフェイン」の分子式です: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub> </code> これは「カフェイン」の分子式です: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub> ---- <code> これはピタゴラスの定理です: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup> </code> これはピタゴラスの定理です: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>; @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

OpenIconic

🎉 Copied!

@startuml title: <size:20><&heart>OpenIconicを使用<&heart></size> class Wifi note left Click on <&wifi> end note @enduml

🎉 Copied!

@startuml listopeniconic @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Appendix: Examples of "Creole List" on all diagrams

Activity

🎉 Copied!

@startuml start :**test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item; stop @enduml

Class

• Sub item
• Sub sub item

🎉 Copied!

@startuml class a { **test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item } a -- b @enduml

Component, Deployment, Use-Case

🎉 Copied!

@startuml node n [ **test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item ] file f as " **test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item " @enduml

Gantt project planning

Object

• Sub item
• Sub sub item

🎉 Copied!

@startuml object user { **test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item } @enduml

MindMap

🎉 Copied!

@startmindmap * root ** d1 **:**test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item; @endmindmap

Network (nwdiag)

🎉 Copied!

@startnwdiag nwdiag { network Network { Server [description="**test list 1**\n* Bullet list\n* Second item\n** Sub item\n*** Sub sub item\n* Third item\n----\n**test list 2**\n# Numbered list\n# Second item\n## Sub item\n## Another sub item\n# Third item"]; } @endnwdiag

Note

🎉 Copied!

@startuml note as n **test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item end note @enduml

Sequence

🎉 Copied!

@startuml <style> participant {HorizontalAlignment left} </style> participant Participant [ **test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item ] participant B Participant -> B @enduml

[Ref. QA-15232]

State

🎉 Copied!

@startuml <style> stateDiagram { title {HorizontalAlignment left} } </style> state "**test list 1**\n* Bullet list\n* Second item\n** Sub item\n*** Sub sub item\n* Third item\n----\n**test list 2**\n# Numbered list\n# Second item\n## Sub item\n## Another sub item\n# Third item" as a { a: **test list 1**\n* Bullet list\n* Second item\n** Sub item\n*** Sub sub item\n* Third item\n----\n**test list 2**\n# Numbered list\n# Second item\n## Sub item\n## Another sub item\n# Third item state "**test list 1**\n* Bullet list\n* Second item\n** Sub item\n*** Sub sub item\n* Third item\n----\n**test list 2**\n# Numbered list\n# Second item\n## Sub item\n## Another sub item\n# Third item" as b state : **test list 1**\n* Bullet list\n* Second item\n** Sub item\n*** Sub sub item\n* Third item\n----\n**test list 2**\n# Numbered list\n# Second item\n## Sub item\n## Another sub item\n# Third item } @enduml

[Ref. QA-16978]

WBS

🎉 Copied!

@startwbs * root ** d1 **:**test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item ---- **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item; @endwbs

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Appendix: Examples of "Creole horizontal lines" on all diagrams

Activity

🎉 Copied!

@startuml start :You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. Or dotted title //and title... // ==Title== Or double-line title --Another title-- Or single-line title Enjoy!; stop @enduml

Class

🎉 Copied!

@startuml class a { You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. Or dotted title //and title... // ==Title== Or double-line title --Another title-- Or single-line title Enjoy! } a -- b @enduml

Component, Deployment, Use-Case

🎉 Copied!

@startuml node n [ You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy! ] file f as " You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy! " person p [ You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy! ] @enduml

Gantt project planning

Object

🎉 Copied!

@startuml object user { You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy! } @enduml

MindMap

🎉 Copied!

@startmindmap * root ** d1 **:You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy!; @endmindmap

Network (nwdiag)

🎉 Copied!

@startnwdiag nwdiag { network Network { Server [description="You can have horizontal line\n----\nOr double line\n====\nOr strong line\n____\nOr dotted line\n..My title..\n//and title... //\n==Title==\n--Another title--\nEnjoy!"]; } @endnwdiag

Note

🎉 Copied!

@startuml note as n You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy! end note @enduml

Sequence

🎉 Copied!

@startuml <style> participant {HorizontalAlignment left} </style> participant Participant [ You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy! ] participant B Participant -> B @enduml

[Ref. QA-15232]

State

🎉 Copied!

@startuml <style> stateDiagram { title {HorizontalAlignment left} } </style> state "You can have horizontal line\n----\nOr double line\n====\nOr strong line\n____\nOr dotted line\n..My title..\n//and title... //\n==Title==\n--Another title--\nEnjoy!" as a { a: You can have horizontal line\n----\nOr double line\n====\nOr strong line\n____\nOr dotted line\n..My title..\n//and title... //\n==Title==\n--Another title--\nEnjoy! state "You can have horizontal line\n----\nOr double line\n====\nOr strong line\n____\nOr dotted line\n..My title..\n//and title... //\n==Title==\n--Another title--\nEnjoy!" as b state : You can have horizontal line\n----\nOr double line\n====\nOr strong line\n____\nOr dotted line\n..My title..\n//and title... //\n==Title==\n--Another title--\nEnjoy! } @enduml

[Ref. QA-16978, GH-1479]

WBS

🎉 Copied!

@startwbs * root ** d1 **:You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. //and title... // ==Title== --Another title-- Enjoy!; @endwbs

Edit in DokuwikiEdit in AsciidocEdit in Markdown

スタイル対応表（CreoleとHTML）

🎉 Copied!

@startmindmap * CreoleとHTMLで\n同一のスタイルを設定 **:**Creole** ---- <#silver>|= code|= output| | \n This is ""~**bold**""\n | \n This is **bold** | | \n This is ""~//italics//""\n | \n This is //italics// | | \n This is ""~""monospaced~"" ""\n | \n This is ""monospaced"" | | \n This is ""~--stroked--""\n | \n This is --stroked-- | | \n This is ""~__underlined__""\n | \n This is __underlined__ | | \n This is ""<U+007E><U+007E>waved<U+007E><U+007E>""\n | \n This is ~~waved~~ |; **:<b>Legacy HTML like ---- <#silver>|= code|= output| | \n This is ""~<b>bold</b>""\n | \n This is <b>bold</b> | | \n This is ""~<i>italics</i>""\n | \n This is <i>italics</i> | | \n This is ""~<font:monospaced>monospaced</font>""\n | \n This is <font:monospaced>monospaced</font> | | \n This is ""~<s>stroked</s>""\n | \n This is <s>stroked</s> | | \n This is ""~<u>underlined</u>""\n | \n This is <u>underlined</u> | | \n This is ""~<w>waved</w>""\n | \n This is <w>waved</w> | And color as a bonus... <#silver>|= code|= output| | \n This is ""~<s:""<color:green>""green""</color>"">stroked</s>""\n | \n This is <s:green>stroked</s> | | \n This is ""~<u:""<color:red>""red""</color>"">underlined</u>""\n | \n This is <u:red>underlined</u> | | \n This is ""~<w:""<color:#0000FF>""#0000FF""</color>"">waved</w>""\n | \n This is <w:#0000FF>waved</w> |; @endmindmap

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Creole on Creole

🎉 Copied!

@startcreole ==Creole This is **bold** This is //italics// This is ""monospaced"" This is --stricken-out-- This is __underlined__ This is ~~wave-underlined~~ test Unicode and icons This is <U+221E> long This is a <&code> icon Use image : <img:https://plantuml.com/logo3.png> <b>HTML Creole This is <b>bold</b> This is <i>italics</i> This is <font:monospaced>monospaced</font> This is <s>stroked</s> This is <u>underlined</u> This is <w>waved</w> This is <s:green>stroked</s> This is <u:red>underlined</u> This is <w:#0000FF>waved</w> other examples This is <color:blue>Blue</color> This is <back:orange>Orange background</back> This is <size:20>big</size> Creole list item **test list 1** * Bullet list * Second item ** Sub item *** Sub sub item * Third item **test list 2** # Numbered list # Second item ## Sub item ## Another sub item # Third item @endcreole