PlantUML Language specification Creole

       

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Creole

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Emphasized text

@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

Lists

@startuml object demo { * Bullet list * Second item } note left * Bullet list * Second item ** Sub item end note legend # Numbered list # Second item ## Sub item ## Another sub item * Can't quite mix * Numbers and bullets # Third item end legend @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Escape character

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Headings

@startuml usecase UC1 as " = Extra-large heading Some text == Large heading Other text === Medium heading Information .... ==== Small heading" @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Emoji

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

@startuml
emoji <block>
@enduml

• Unicode block 26: 83 emoji
• Unicode block 27: 33 emoji
• Unicode block 1F3: 246 emoji
• Unicode block 1F4: 255 emoji
• Unicode block 1F5: 136 emoji
• Unicode block 1F6: 181 emoji
• Unicode block 1F9: 240 emoji

Unicode block 26

@startuml emoji 26 @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Horizontal lines

@startuml database DB1 as " You can have horizontal line ---- Or double line ==== Or strong line ____ Or dotted line ..My title.. Enjoy! " note right This is working also in notes You can also add title in all these lines ==Title== --Another title-- end note @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Links

• [[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

Code

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

@startuml hide footbox note over Source <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 over Output 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

Table

Create a table

@startuml skinparam titleFontSize 14 title Example of simple table |= |= table |= header | | a | table | row | | b | table | row | end title [*] --> State1 @enduml

Align fields using Table

@startuml hide empty members hide circle class "<:wrench:> Property" as Property { <#transparent,#transparent>|<:link:>| id| iri| 1..1| |<:spiral_notepad:>| name (bsdd:name)| string| 1..1| |<:calendar:>| activationDateUtc| dateTime| 1..1| |<:spiral_notepad:>| code| string| 1..1| |<:spiral_notepad:>| connectedPropertyCode| string| 0..*| |<:spiral_notepad:>| countryOfOrigin| string| 0..1| |<:spiral_notepad:>| countryOfUse| string| 0..*| |<:spiral_notepad:>| creatorLanguageCode| string| 0..1| |<:spiral_notepad:>| dataType| string| 0..1| |<:calendar:>| deActivationDateUtc| dateTime| 0..1| |<:spiral_notepad:>| definition| string| 0..1| |<:spiral_notepad:>| deprecationExplanation| string| 0..1| |<:spiral_notepad:>| description| string| 0..1| |<:spiral_notepad:>| dimension| string| 0..1| |<:1234:>| dimensionAmountOfSubstance| int| 0..1| |<:1234:>| dimensionElectricCurrent| int| 0..1| |<:1234:>| dimensionLength| int| 0..1| |<:1234:>| dimensionLuminousIntensity| int| 0..1| |<:1234:>| dimensionMass| int| 0..1| |<:1234:>| dimensionThermodynamicTemperature| int| 0..1| |<:1234:>| dimensionTime| int| 0..1| |<:spiral_notepad:>| documentReference| string| 0..1| |<:spiral_notepad:>| dynamicParameterPropertyCodes| string| 0..*| |<:spiral_notepad:>| example| string| 0..1| |<:ballot_box_with_check:>| isDynamic| boolean| 1..1| |<:eight_spoked_asterisk:>| maxExclusive| decimal| 0..1| |<:eight_spoked_asterisk:>| maxInclusive| decimal| 0..1| |<:spiral_notepad:>| methodOfMeasurement| string| 0..1| |<:eight_spoked_asterisk:>| minExclusive| decimal| 0..1| |<:eight_spoked_asterisk:>| minInclusive| decimal| 0..1| |<:spiral_notepad:>| name| string| 1..1| |<:spiral_notepad:>| pattern| string| 0..1| |<:spiral_notepad:>| physicalQuantity| string| 0..1| |<:book:>| propertyValueKind| PropertyValueKind| 0..1| |<:spiral_notepad:>| replacedObjectCodes| string| 0..*| |<:spiral_notepad:>| replacingObjectCodes| string| 0..*| |<:calendar:>| revisionDateUtc| dateTime| 0..1| |<:1234:>| revisionNumber| int| 0..1| |<:spiral_notepad:>| status| string| 1..1| |<:spiral_notepad:>| subdivisionsOfUse| string| 0..*| |<:spiral_notepad:>| textFormat| string| 0..1| |<:spiral_notepad:>| uid| string| 0..1| |<:spiral_notepad:>| unit| string| 0..*| |<:calendar:>| versionDateUtc| dateTime| 0..1| |<:1234:>| versionNumber| int| 0..1| |<:link:>| visualRepresentationUri| iri| 0..1| } @enduml

Add color on rows or cells

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

Add color on border and text

@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

No border or same color as the background

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

Bold header or not

@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

Tree

@startuml skinparam titleFontSize 14 title Example of Tree |_ First line |_ **Bom (Model)** |_ prop1 |_ prop2 |_ prop3 |_ Last line end title [*] --> State1 @enduml

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

@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

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Special characters

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

• You can use the listfonts command with a test string of your desired characters, to see which fonts may include them.
• For characters that are emoji, it's better to use the Emoji notation that doesn't depend on installed fonts, and the emoji are colored.
• The PlantUML server has the "Noto Emoji" font that has most emoji. If you want to render diagrams on your local system, you should check which fonts you have.
• Unfortunately "Noto Emoji" lacks normal chars, so you need to switch fonts, eg

@startuml rectangle "<font:Noto Emoji><U+1F3F7></font> label" rectangle "<font:Noto Emoji><U+1F527></font> wrench" rectangle "<font:Noto Emoji><U+1F6E0></font> hammer_and_wrench" @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Legacy HTML

• <b> for bold text
• <u> or <u:#AAAAAA> or <u:[[color|colorName]]> for underline
• <i> for italic
• <s> or <s:#AAAAAA> or <s:[[color|colorName]]> for strike text
• <w> or <w:#AAAAAA> or <w:[[color|colorName]]> for wave underline text
• <plain> for plain text
• <color:#AAAAAA> or <color:[[color|colorName]]>
• <back:#AAAAAA> or <back:[[color|colorName]]> for background color
• <size:nn> to change font size
• <img:file> : the file must be accessible by the filesystem
• <img:https://plantuml.com/logo3.png> : the URL must be available from the Internet
• {scale:nn} to change image size, eg <img:file.png{scale=0.3}>

@startuml :* You can change <color:red>text color</color> * You can change <back:cadetblue>background color</back> * You can change <size:18>size</size> * You use <u>legacy</u> <b>HTML <i>tag</i></b> * You use <u:red>color</u> <s:green>in HTML</s> <w:#0000FF>tag</w> ---- * Use image : <img:https://plantuml.com/logo3.png> ; @enduml

Common HTML element

@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

Subscript and Superscript element [sub, sup]

@startuml :<code> This is the "caffeine" molecule: C₈H₁₀N₄O₂ </code> This is the "caffeine" molecule: C₈H₁₀N₄O₂ ---- <code> This is the Pythagorean theorem: a² + b² = c² </code> This is the Pythagorean theorem: a² + b² = c²; @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

OpenIconic

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

@startuml listopeniconic @enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Appendix: Examples of "Creole List" on all diagrams

Activity

@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

@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

@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

@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

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

@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

@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

@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

State

@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

WBS

@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

@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

@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

@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

@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

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

@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

@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

@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

State

@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

WBS

@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

Style equivalent (between Creole and HTML)

@startmindmap * Style equivalent\n(between Creole and HTML) **:**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

@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