Edit in DokuwikiEdit in AsciidocEdit in Markdown

Creole

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

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

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

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

エスケープ文字

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

🎉 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

絵文字

以下の構文で、Twemojiの絵文字を利用できます:

🎉 Copied!

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

次のUnicodeブロックが利用できます:

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

WARNING

 This translation need to be updated. 

WARNING

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

リンク

URLとリンクを使用することもできます。

単純なリンクは二重の角括弧を使用します（クラス図のフィールドとメソッドでは三重の角括弧を使用します）

例:

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

認証が必要なURLも利用できます。

Edit in DokuwikiEdit in AsciidocEdit in Markdown

コード

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

🎉 Copied!

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

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

🎉 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

WARNING

 This translation need to be updated. 

WARNING

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

[Ref. QA-7184]

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

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

🎉 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

[Ref. QA-10923]

Edit in DokuwikiEdit in AsciidocEdit in Markdown

ツリー

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

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

🎉 Copied!

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

クラス図に対して。

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

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

WARNING

 This translation need to be updated. 

WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown

特殊文字

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

🎉 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

Please note that not all Unicode chars appear correctly, depending on what fonts are installed (on your local system or the PlantUML server, depending on which one you use). For characters that are emoji, it's better to use the Emoji notation. See Issue 72 for more details.

WARNING

 This translation need to be updated. 

WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown

レガシーHTML

Creoleと同時に、次の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

[Ref. QA-5254 for plain]

上付き文字、下付き文字 [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

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

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

🎉 Copied!

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

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

🎉 Copied!

@startuml listopeniconic @enduml

WARNING

 This translation need to be updated. 

WARNING

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

[Corrected in V1.2020.18]

Gantt project planning

N/A

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!

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

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

🚩 strong line ____

🎉 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

N/A

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

[Corrected on V1.2020.18]

MindMap

🚩 strong line ____

🎉 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!

@startuml 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!"]; } @enduml

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

WBS

🚩 strong line ____

🎉 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）

スタイル	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>

🎉 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