Multilingual Wiki Documentation

You are currently using syntax.
In an attempt to improve PlantUML documentation...
Please do not use this website for your own diagrams.
You can click here and use the online server here for your own documentation.

Wiki Toc    Recent changes    View page history    Add new chapter    Reorder page    Raw


Creole

Creoleは、さまざまなwikiで使われる、軽量の共通マークアップ言語です。 PlantUMLには、軽量のCreoleエンジンが内蔵されており、テキストのスタイルを統一的な方法で定義することができます。

この構文はすべてのダイアグラムでサポートされています。

後方互換性のため、HTML構文も残されていることにご注意ください。

Creole

Creole is a lightweight common markup language for various wikis. A light-weight Creole engine is integrated in PlantUML to have a standardized way to emit styled text.

All diagrams support this syntax.

Note that compatibility with HTML syntax is preserved.

テキストの強調

@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

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

リスト

ノードのテキストや注釈の中で、番号付きリストと箇条書きリストを使用できます。

FIXME
🚩 リストとそのサブリストの中で番号付きリストと箇条書きリストを混ぜて使うとうまくいきません。

@startuml
object demo {
  * 箇条書きリスト
  * 二つ目の項目
}
note left
  * 箇条書きリスト
  * 二つ目の項目
  ** サブ項目
end note

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

Lists

You can use numbered and bulleted lists in node text, notes, etc.

FIXME
🚩 You cannot quite mix numbers and bullets in a list and its sublist.

@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

エスケープ文字

チルダ~を使用して、creoleの特殊文字をエスケープすることができます。

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

Escape character

You can use the tilde ~ to escape special creole characters.

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

水平線

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

@enduml

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

見出し

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

Headings

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

レガシーHTML

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

@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

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

@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

コード

<code>を使用して、ダイアグラム中にプログラミングのコードを記述できます(シンタックスハイライトは未対応です)。

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

これは、PlantUMLのコードとその出力結果を表示する場合に、特に便利です:

@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

Code

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

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

@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

テーブル

テーブルの作成

|で区切ることで、テーブルを作成できます。

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

行とセルの色

行とセルに背景を設定できます。

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

枠線とテキストの色

枠線とテキストのを設定することもできます。

@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. QA-7184]

枠線無し(背景と同色の枠線)

枠線の色を背景色と同じ色に設定することができます。

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

[Ref. QA-12448]

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

セルの最初の文字を=にすると、太字にすることができます(通常はヘッダを表すために使用します)。

@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. QA-10923]

Table

Create a table

It is possible to build table, with | separator.

@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 colors of rows and 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

You can also specify colors of text and borders.

@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. QA-7184]

No border or same color as the background

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

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

[Ref. 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.

@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. QA-10923]

ツリー

|_の文字列を使ってツリーを作ることができます。

titleのような共通のコマンドに対して:

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

クラス図に対して。

(セパレータを使って、空の2つ目の区画を作る必要があることに注意してください。そうしないと、(Model)に含まれる括弧によって、テキストが別の区画に移動されてしまいます):

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

[Ref. QA-3448]

コンポーネント図、配置図に対して:

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

Tree

You can use |_ characters to build a tree.

On common commands, like title:

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

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

[Ref. QA-3448]

On Component or Deployement diagrams:

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

特殊文字

&#XXXXまたは、<U+XXXX>の構文、または直接記述することで、任意のUnicode文字を使うことができます。

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

Special characters

It's possible to use any unicode character, either directly or with syntax &#XXX or <U+XXXX>:

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

OpenIconic

OpenIconicはオープンソースの素晴らしいアイコンセットです。 これらのアイコンはcreoleパーサーに組み込まれているので、簡単に使用することができます。

次の構文を使用します: <&ICON_NAME>.

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

利用可能なアイコンの一覧は、OpenIconic Websiteにあります。もしくは、次の特別なダイアグラムを使用します:

@startuml
listopeniconic
@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>.

@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 at the OpenIconic Website, or you can use the following special command to list them:

@startuml
listopeniconic
@enduml

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

FIXME
🚩
  • Sub item
  • Sub sub item
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

@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

DONE
[Corrected in V1.2020.18]

Gantt project planning

N/A

Object

FIXME
🚩
  • Sub item
  • Sub sub item
FIXME

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

N/A

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

N/A (or on note or common commands)

State

N/A (or on note or common commands)

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

Activity

FIXME
🚩 strong line ____
FIXME

@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!
"
@enduml

Gantt project planning

N/A

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

DONE
[Corrected on V1.2020.18]

MindMap

FIXME
🚩 strong line ____
FIXME

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

N/A

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

N/A (or on note or common commands)

State

N/A (or on note or common commands)

スタイル対応表(CreoleとHTML)

スタイル Creole Legacy HTML like
bold This is **bold** This is <b>bold</b>
italics This is //italics// This is <i>italics</i>
monospaced This is ""monospaced"" This is <font:monospaced>monospaced</font>
stroked This is --stroked-- This is <s>stroked</s>
underlined This is __underlined__ This is <u>underlined</u>
waved This is ~~waved~~ This is <w>waved</w>

@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

Style equivalent (between Creole and HTML)

Style Creole Legacy HTML like
bold This is **bold** This is <b>bold</b>
italics This is //italics// This is <i>italics</i>
monospaced This is ""monospaced"" This is <font:monospaced>monospaced</font>
stroked This is --stroked-- This is <s>stroked</s>
underlined This is __underlined__ This is <u>underlined</u>
waved This is ~~waved~~ This is <w>waved</w>

@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


Please report any bugs to plantuml@gmail.com or here.
This website is still in beta testing.