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

== Links

You can also link::link[use URL and links].

Simple links are define using two square brackets (or three square brackets for field or method on class diagram).

+++<u>Example</u>+++:
* `+[[http://plantuml.com]]+`
* `+[[http://plantuml.com This label is printed]]+`
* `+[[http://plantuml.com{Optional tooltip} This label is printed]]+`

URL can also be link::url-authentication[authenticated].


== Code

You can use `+<code>+` to display some programming code in your diagram
(sorry, syntax highlighting is not yet supported).

[plantuml]

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

This is especially useful to illustrate some PlantUML code and the resulting rendering:

[plantuml]

@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

== Table

=== Create a table
It is possible to build table, with `+|+` separator.

[plantuml]

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

=== Add color on rows or cells
You can specify background link::color[colors] of rows and cells:

[plantuml]

@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
You can also specify link::color[colors] of text and borders.

[plantuml]

@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

__[Ref. https://forum.plantuml.net/7184/set-legendborderthickness-to-0?show=7213#a7213[QA-7184]]__

=== No border or same color as the background
You can also set the border color to the same color as the background.

[plantuml]

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

__[Ref. https://forum.plantuml.net/12448/removing-hiding-borders-on-tables?show=12449#a12449[QA-12448]]__

=== Bold header or not
`+=+` as the first char of a cell indicates whether to make it bold (usually used for headers), or not.
[plantuml]

@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

__[Ref. https://forum.plantuml.net/10923/how-to-create-a-creole-table-without-a-bolded-first-row?show=10943#a10943[QA-10923]]__


== Tree

You can use `+|_+` characters to build a tree.

On common commands, like title:
[plantuml]

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

On Class diagram.

(Please note how we have to use an empty second compartment, else the parentheses in **(Model)** cause that text to be moved to a separate first compartment):
[plantuml]

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

} @enduml

__[Ref. https://forum.plantuml.net/3448[QA-3448]]__

On Component or Deployment diagrams:
[plantuml]

@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. https://forum.plantuml.net/11365/creole-trees-do-not-respect-indent-levels-component-diagram[QA-11365]]__


== Special characters

It's possible to use any http://www.fileformat.info/info/unicode/category/Sm/list.htm[unicode character],
either directly or with syntax `+&#XXXX;+` or `+<U+XXXX>+`:

[plantuml]

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

== Legacy HTML


You can mix Creole with the following HTML tags:
* `+<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:http://plantuml.com/logo3.png>+` : the URL must be available from the Internet

[plantuml]

@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:http://plantuml.com/logo3.png>
;
@enduml

=== Common HTML element

@startuml
hide footbox
note over Source

  This is bold
  This is italics
  This is monospaced
  This is stroked
  This is underlined
  This is waved
  This is stroked
  This is underlined
  This is waved
  This is a bold text containing plain text inside
  -- other examples --
  This is Blue
  This is Orange background
  This is big

end note
/note over Output
  This is bold
  This is italics
  This is monospaced
  This is stroked
  This is underlined
  This is waved
  This is stroked
  This is underlined
  This is waved
  This is a bold text containing plain text inside
  -- other examples --
  This is Blue
  This is Orange background
  This is big
end note
@enduml

[Ref. QA-5254 for plain]

=== Subscript and Superscript element [sub, sup]

@startuml
:
This is the "caffeine" molecule: C8H10N4O2

This is the "caffeine" molecule: C8H10N4O2

<code> This is the Pythagorean theorem: a² + b² = c² </code> This is the Pythagorean theorem: a² + b² = c²; @enduml

== OpenIconic


OpenIconic is a very nice open-source icon set.
Those icons are integrated in the creole parser, so you can use them out-of-the-box.

Use the following syntax: `+<&ICON_NAME>+`.
[plantuml]

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

The complete list is available with the following special command:

[plantuml]

@startuml listopeniconic @enduml

== Appendix: Examples of "Creole List" on all diagrams

=== Activity

[plantuml]

@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

[[#FFD700#FIXME]] 🚩 * Sub item * Sub sub item [[#FFD700#FIXME]]

@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

[plantuml]

@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

[[#98FB98#DONE]]
__[Corrected in https://plantuml.com/changes[V1.2020.18]]__

=== Gantt project planning

N/A


=== Object

[[#FFD700#FIXME]]
🚩
* __Sub item__
* __Sub sub item__
[[#FFD700#FIXME]]

[plantuml]

@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)
[plantuml]

@startuml 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----\ntest list 2\n# Numbered list\n# Second item\n Sub item\n Another sub item\n# Third item"]; } @enduml

=== Note
[plantuml]

@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

N/A (or on note or common commands)

=== State

N/A (or on note or common commands)

=== 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

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

=== Activity

[[#FFD700#FIXME]]
🚩
strong line
`+____+`
[[#FFD700#FIXME]]

[plantuml]

@startuml start :You can have horizontal line

Or double line

Or dotted line ..My title.. ==Title== --Another title-- Enjoy! "

person p [

You can have horizontal line

Or double line