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    View page history    Add new chapter    Reorder page    Raw

デプロイメント図

Deployment Diagram

デプロイメント図とは、システムのアーキテクチャを視覚化する図の一種であり、ソフトウェ ア・コンポーネントがハードウェア上にどのようにデプロイされるかを示すものです。これは、サーバ、ワークステーショ ン、およびデバイスなどのさまざまなノードにわたるコンポーネントの分布の明 確な図を提供します。

PlantUML を使用すると、展開図の作成が簡単になります。このプラットフォームは、プレーンテキストを使用してこれらのダイアグラム を設計するシンプルで直感的な方法を提供し、迅速な反復と簡単なバージョン管理を保証 します。さらに、PlantUML フォーラムは、ユーザがヘルプを求めたり、アイデアを共有し たり、ダイアグラム作成の課題に関して協力したりすることができる、活気あるコ ミュニティを提供します。PlantUML の主な利点のひとつは、様々なツールやプラットフォームとシームレスに統合できることであり、専門家や愛好家にとって好ましい選択肢となっています。

A Deployment Diagram is a type of diagram that visualizes the architecture of systems, showcasing how software components are deployed onto hardware. It provides a clear picture of the distribution of components across various nodes, such as servers, workstations, and devices.

With PlantUML, creating deployment diagrams becomes a breeze. The platform offers a simple and intuitive way to design these diagrams using plain text, ensuring rapid iterations and easy version control. Moreover, the PlantUML forum provides a vibrant community where users can seek help, share ideas, and collaborate on diagramming challenges. One of the key advantages of PlantUML is its ability to integrate seamlessly with various tools and platforms, making it a preferred choice for professionals and enthusiasts alike.

要素の宣言

Declaring element

 

@startuml
actor アクター
actor/ "アクター/"
agent エージェント
artifact アーティファクト
boundary 境界
card カード
circle 円
cloud クラウド
collections コレクション
component コンポーネント
control コントロール
database データベース
entity エンティティ
file ファイル
folder フォルダ
frame フレーム
hexagon 六角形
interface インターフェイス
label ラベル
node ノード
package パッケージ
person 人型
queue キュー
rectangle 四角形
stack スタック
storage ストレージ
usecase ユースケース
usecase/ "ユースケース/"
@enduml

説明文が長くなる場合は、オプションでテキストを [] の中に書くこともできます。 

@startuml
folder フォルダ [
これは<b>フォルダ</b>です
----
境界線として
====
いろいろな種類の
....
スタイルが使えます
]

node ノード [
これは<b>ノード</b>です
----
境界線として
====
いろいろな種類の
....
スタイルが使えます
]

database データベース [
これは<b>データベース</b>です
----
境界線として
====
いろいろな種類の
....
スタイルが使えます
]

usecase ユースケース [
これは<b>ユースケース</b>です
----
境界線として
====
いろいろな種類の
....
スタイルが使えます
]

card カード [
これは<b>カード</b>です
----
境界線として
====
いろいろな種類の
....
スタイルが使えます
<i><color:blue>(add from V1.2020.7)</color></i>
]
@enduml

WARNING
 This translation need to be updated. 
WARNING
 

@startuml
action action
actor actor
actor/ "actor/"
agent agent
artifact artifact
boundary boundary
card card
circle circle
cloud cloud
collections collections
component component
control control
database database
entity entity
file file
folder folder
frame frame
hexagon hexagon
interface interface
label label
node node
package package
person person
process process
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
@enduml

You can optionaly put text using bracket [] for a long description. 

@startuml
folder folder [
This is a <b>folder
----
You can use separator
====
of different kind
....
and style
]

node node [
This is a <b>node
----
You can use separator
====
of different kind
....
and style
]

database database [
This is a <b>database
----
You can use separator
====
of different kind
....
and style
]

usecase usecase [
This is a <b>usecase
----
You can use separator
====
of different kind
....
and style
]

card card [
This is a <b>card
----
You can use separator
====
of different kind
....
and style
<i><color:blue>(add from V1.2020.7)</color></i>
]
@enduml

要素の宣言 (省略記法)

Declaring element (using short form)

いくつかの省略記法を使って要素を宣言することができます。
通常記法のキーワード 省略記法のキーワード 通常記法の例 省略記法の例 参照
actor : a : actor actor1 :actor2: Actors
component [ c ] component component1 [component2] Components
interface () i interface interface1 () "interface2" Interfaces
usecase ( u ) usecase usecase1 (usecase2) Usecases

アクター

@startuml

actor アクター1
:アクター2:

@enduml

注意: 二重山括弧(guillemet)を使用したアクターの古い記法がありますが、現在は非推奨であり、削除される予定です。今後は使用しないでください。

コンポーネント 

@startuml

component コンポーネント1
[コンポーネント2]

@enduml

インターフェース

@startuml

interface インターフェース1
() "インターフェース2"

label "//interface example//"
@enduml

ユースケース

@startuml

usecase ユースケース1
(ユースケース2)

@enduml

We can declare element using some short forms.

Long form Keyword Short form Keyword Long form example Short form example Ref.
actor : a : actor actor1 :actor2: Actors
component [ c ] component component1 [component2] Components
interface () i interface interface1 () "interface2" Interfaces
usecase ( u ) usecase usecase1 (usecase2) Usecases

Actor

@startuml

actor actor1
:actor2:

@enduml

NB: There is an old syntax for actor with guillemet which is now deprecated and will be removed some days. Please do not use in your diagram.

Component 

@startuml

component component1
[component2]

@enduml

Interface 

@startuml

interface interface1
() "interface2"

label "//interface example//"
@enduml

Usecase 

@startuml

usecase usecase1
(usecase2)

@enduml

リンク、矢印

Linking or arrow

要素の間をシンプルなリンクで結ぶことができます。リンクにラベルを付けることもできます。 

@startuml

node ノード1
node ノード2
node ノード3
node ノード4
node ノード5
ノード1 -- ノード2 : ラベル1
ノード1 .. ノード3 : ラベル2
ノード1 ~~ ノード4 : ラベル3
ノード1 == ノード5

@enduml

複数の種類のリンクを使うこともできます。 

@startuml

artifact アーティファクト1
artifact アーティファクト2
artifact アーティファクト3
artifact アーティファクト4
artifact アーティファクト5
artifact アーティファクト6
artifact アーティファクト7
artifact アーティファクト8
artifact アーティファクト9
artifact アーティファクト10
アーティファクト1 --> アーティファクト2
アーティファクト1 --* アーティファクト3
アーティファクト1 --o アーティファクト4
アーティファクト1 --+ アーティファクト5
アーティファクト1 --# アーティファクト6
アーティファクト1 -->> アーティファクト7
アーティファクト1 --0 アーティファクト8
アーティファクト1 --^ アーティファクト9
アーティファクト1 --(0 アーティファクト10

@enduml

次のような種類のリンクも使用できます。 

@startuml

cloud クラウド1
cloud クラウド2
cloud クラウド3
cloud クラウド4
cloud クラウド5
クラウド1 -0- クラウド2
クラウド1 -0)- クラウド3
クラウド1 -(0- クラウド4
クラウド1 -(0)- クラウド5

@enduml

別の例: 

@startuml
actor foo1
actor foo2
foo1 <-0-> foo2
foo1 <-(0)-> foo2
 
(ac1) -le(0)-> left1
ac1 -ri(0)-> right1
ac1 .up(0).> up1
ac1 ~up(0)~> up2
ac1 -do(0)-> down1
ac1 -do(0)-> down2
 
actor1 -0)- actor2
 
component comp1
component comp2
comp1 *-0)-+ comp2
[comp3] <-->> [comp4]

boundary b1
control c1
b1 -(0)- c1

component comp1
interface interf1
comp1 #~~( interf1

:mode1actor: -0)- fooa1
:mode1actorl: -ri0)- foo1l

[component1] 0)-(0-(0 [componentC]
() component3 )-0-(0 "foo" [componentC]

[aze1] #-->> [aze2]
@enduml

[Ref. QA-547 and QA-1736]

⎘ すべての種類は付録を参照。

You can create simple links between elements with or without labels: 

@startuml

node node1
node node2
node node3
node node4
node node5
node1 -- node2 : label1
node1 .. node3 : label2
node1 ~~ node4 : label3
node1 == node5

@enduml

It is possible to use several types of links: 

@startuml

artifact artifact1
artifact artifact2
artifact artifact3
artifact artifact4
artifact artifact5
artifact artifact6
artifact artifact7
artifact artifact8
artifact artifact9
artifact artifact10
artifact1 --> artifact2
artifact1 --* artifact3
artifact1 --o artifact4
artifact1 --+ artifact5
artifact1 --# artifact6
artifact1 -->> artifact7
artifact1 --0 artifact8
artifact1 --^ artifact9
artifact1 --(0 artifact10

@enduml

You can also have the following types: 

@startuml

cloud cloud1
cloud cloud2
cloud cloud3
cloud cloud4
cloud cloud5
cloud1 -0- cloud2
cloud1 -0)- cloud3
cloud1 -(0- cloud4
cloud1 -(0)- cloud5

@enduml

or another example: 

@startuml
actor foo1
actor foo2
foo1 <-0-> foo2
foo1 <-(0)-> foo2
 
(ac1) -le(0)-> left1
ac1 -ri(0)-> right1
ac1 .up(0).> up1
ac1 ~up(0)~> up2
ac1 -do(0)-> down1
ac1 -do(0)-> down2
 
actor1 -0)- actor2
 
component comp1
component comp2
comp1 *-0)-+ comp2
[comp3] <-->> [comp4]

boundary b1
control c1
b1 -(0)- c1

component comp1
interface interf1
comp1 #~~( interf1

:mode1actor: -0)- fooa1
:mode1actorl: -ri0)- foo1l

[component1] 0)-(0-(0 [componentC]
() component3 )-0-(0 "foo" [componentC]

[aze1] #-->> [aze2]
@enduml

[Ref. QA-547 and QA-1736]

⎘ See all type on Appendix.

各括弧を使用した矢印のスタイル

Bracketed arrow style

（角括弧を使用したクラスの関係（リンク、矢印）のスタイルと同様）

線のスタイル

矢印にbold、dashed、dotted、hidden、plainのスタイルを指定することができます：

  • ラベル無し

@startuml
node foo
title Bracketed line style without label
foo --> bar
foo -[bold]-> bar1
foo -[dashed]-> bar2
foo -[dotted]-> bar3
foo -[hidden]-> bar4
foo -[plain]-> bar5
@enduml

  • ラベル有り

@startuml
title Bracketed line style with label
node foo
foo --> bar          : ∅
foo -[bold]-> bar1   : [bold]
foo -[dashed]-> bar2 : [dashed]
foo -[dotted]-> bar3 : [dotted]
foo -[hidden]-> bar4 : [hidden]
foo -[plain]-> bar5  : [plain]
@enduml

[Adapted from QA-4181]

線の色

@startuml
title Bracketed line color
node  foo
foo --> bar
foo -[#red]-> bar1     : [#red]
foo -[#green]-> bar2   : [#green]
foo -[#blue]-> bar3    : [#blue]
foo -[#blue;#yellow;#green]-> bar4
@enduml

線の太さ

@startuml
title Bracketed line thickness
node foo
foo --> bar                 : ∅
foo -[thickness=1]-> bar1   : [1]
foo -[thickness=2]-> bar2   : [2]
foo -[thickness=4]-> bar3   : [4]
foo -[thickness=8]-> bar4   : [8]
foo -[thickness=16]-> bar5  : [16]
@enduml

[Adapted from QA-4949]

混合

@startuml
title Bracketed line style mix
node foo
foo --> bar                             : ∅
foo -[#red,thickness=1]-> bar1          : [#red,1]
foo -[#red,dashed,thickness=2]-> bar2   : [#red,dashed,2]
foo -[#green,dashed,thickness=4]-> bar3 : [#green,dashed,4]
foo -[#blue,dotted,thickness=8]-> bar4  : [blue,dotted,8]
foo -[#blue,plain,thickness=16]-> bar5  : [blue,plain,16]
foo -[#blue;#green,dashed,thickness=4]-> bar6  : [blue;green,dashed,4]
@enduml

Similar as Bracketed class relations (linking or arrow) style

Line style

It's also possible to have explicitly bold, dashed, dotted, hidden or plain arrows:

  • without label

@startuml
node foo
title Bracketed line style without label
foo --> bar
foo -[bold]-> bar1
foo -[dashed]-> bar2
foo -[dotted]-> bar3
foo -[hidden]-> bar4
foo -[plain]-> bar5
@enduml

  • with label

@startuml
title Bracketed line style with label
node foo
foo --> bar          : ∅
foo -[bold]-> bar1   : [bold]
foo -[dashed]-> bar2 : [dashed]
foo -[dotted]-> bar3 : [dotted]
foo -[hidden]-> bar4 : [hidden]
foo -[plain]-> bar5  : [plain]
@enduml

[Adapted from QA-4181]

Line color

@startuml
title Bracketed line color
node  foo
foo --> bar
foo -[#red]-> bar1     : [#red]
foo -[#green]-> bar2   : [#green]
foo -[#blue]-> bar3    : [#blue]
foo -[#blue;#yellow;#green]-> bar4
@enduml

Line thickness

@startuml
title Bracketed line thickness
node foo
foo --> bar                 : ∅
foo -[thickness=1]-> bar1   : [1]
foo -[thickness=2]-> bar2   : [2]
foo -[thickness=4]-> bar3   : [4]
foo -[thickness=8]-> bar4   : [8]
foo -[thickness=16]-> bar5  : [16]
@enduml

[Adapted from QA-4949]

Mix

@startuml
title Bracketed line style mix
node foo
foo --> bar                             : ∅
foo -[#red,thickness=1]-> bar1          : [#red,1]
foo -[#red,dashed,thickness=2]-> bar2   : [#red,dashed,2]
foo -[#green,dashed,thickness=4]-> bar3 : [#green,dashed,4]
foo -[#blue,dotted,thickness=8]-> bar4  : [blue,dotted,8]
foo -[#blue,plain,thickness=16]-> bar5  : [blue,plain,16]
foo -[#blue;#green,dashed,thickness=4]-> bar6  : [blue;green,dashed,4]
@enduml

矢印の色とスタイルを変更する（インラインスタイル）

Change arrow color and style (inline style)

個別の矢印ごとに色とスタイルを変更するには、次の記法を使用します：

  • #color;line.[bold|dashed|dotted];text:color

@startuml
node foo
foo --> bar : normal
foo --> bar1 #line:red;line.bold;text:red  : red bold
foo --> bar2 #green;line.dashed;text:green : green dashed 
foo --> bar3 #blue;line.dotted;text:blue   : blue dotted
@enduml

[Ref. QA-3770 and QA-3816] [See similar feature on class diagram]

You can change the color or style of individual arrows using the inline following notation:

  • #color;line.[bold|dashed|dotted];text:color

@startuml
node foo
foo --> bar : normal
foo --> bar1 #line:red;line.bold;text:red  : red bold
foo --> bar2 #green;line.dashed;text:green : green dashed 
foo --> bar3 #blue;line.dotted;text:blue   : blue dotted
@enduml

[Ref. QA-3770 and QA-3816] [See similar feature on class diagram]

要素の色とスタイルを変更する（インラインスタイル）

Change element color and style (inline style)

それぞれ個別の要素について、色とスタイルを変更するには、次の記法を使用します： #color;line:color;line.[bold|dashed|dotted];text:color 

@startuml
agent a
cloud c #pink;line:red;line.bold;text:red
file  f #palegreen;line:green;line.dashed;text:green
node  n #aliceblue;line:blue;line.dotted;text:blue
@enduml


@startuml
agent a
cloud c #pink;line:red;line.bold;text:red [
c
cloud description
]
file  f #palegreen;line:green;line.dashed;text:green {
[c1]
[c2]
}
frame frame {
node  n #aliceblue;line:blue;line.dotted;text:blue
}
@enduml

[Ref. QA-6852]

You can change the color or style of individual element using the following notation:
  • #[color|back:color];line:color;line.[bold|dashed|dotted];text:color

@startuml
agent a
cloud c #pink;line:red;line.bold;text:red
file  f #palegreen;line:green;line.dashed;text:green
node  n #aliceblue;line:blue;line.dotted;text:blue
@enduml


@startuml
agent a
cloud c #pink;line:red;line.bold;text:red [
c
cloud description
]
file  f #palegreen;line:green;line.dashed;text:green {
[c1]
[c2]
}
frame frame {
node  n #aliceblue;line:blue;line.dotted;text:blue
}
@enduml

[Ref. QA-6852]

入れ子にできる要素

Nestable elements

次の要素は入れ子にできます： 

@startuml
artifact アーティファクト {
}
card カード {
}
cloud クラウド {
}
component コンポーネント {
}
database データベース {
}
file ファイル {
}
folder フォルダ {
}
frame フレーム {
}
hexagon 六角形 {
}
node ノード {
}
package パッケージ {
}
queue キュー {
}
rectangle 四角形 {
}
stack スタック {
}
storage ストレージ {
}
@enduml

WARNING
 This translation need to be updated. 
WARNING

Here are the nestable elements: 

@startuml
action action {
}
artifact artifact {
}
card card {
}
cloud cloud {
}
component component {
}
database database {
}
file file {
}
folder folder {
}
frame frame {
}
hexagon hexagon {
}
node node {
}
package package {
}
process process {
}
queue queue {
}
rectangle rectangle {
}
stack stack {
}
storage storage {
}
@enduml

パッケージと入れ子要素

Packages and nested elements

一階層の例

@startuml
artifact    artifactVeryLOOOOOOOOOOOOOOOOOOOg    as "アーティファクト" {
file f1
}
card        cardVeryLOOOOOOOOOOOOOOOOOOOg        as "カード" {
file f2
}
cloud       cloudVeryLOOOOOOOOOOOOOOOOOOOg       as "クラウド" {
file f3
}
component   componentVeryLOOOOOOOOOOOOOOOOOOOg   as "コンポーネント" {
file f4
}
database    databaseVeryLOOOOOOOOOOOOOOOOOOOg    as "データベース" {
file f5
}
file        fileVeryLOOOOOOOOOOOOOOOOOOOg        as "ファイル" {
file f6
}
folder      folderVeryLOOOOOOOOOOOOOOOOOOOg      as "フォルダ" {
file f7
}
frame       frameVeryLOOOOOOOOOOOOOOOOOOOg       as "フレーム" {
file f8
}
hexagon     hexagonVeryLOOOOOOOOOOOOOOOOOOOg     as "六角形" {
file f9
}
node        nodeVeryLOOOOOOOOOOOOOOOOOOOg        as "ノード" {
file f10
}
package     packageVeryLOOOOOOOOOOOOOOOOOOOg     as "パッケージ" {
file f11
}
queue       queueVeryLOOOOOOOOOOOOOOOOOOOg       as "キュー" {
file f12
}
rectangle   rectangleVeryLOOOOOOOOOOOOOOOOOOOg   as "四角形" {
file f13
}
stack       stackVeryLOOOOOOOOOOOOOOOOOOOg       as "スタック" {
file f14
}
storage     storageVeryLOOOOOOOOOOOOOOOOOOOg     as "ストレージ" {
file f15
}
@enduml

他の例

@startuml
artifact Foo1 {
  folder Foo2
}

folder Foo3 {
  artifact Foo4
}

frame Foo5 {
  database Foo6
}

cloud vpc {
  node ec2 {
    stack stack
  }
}

@enduml


@startuml
node Foo1 {
 cloud Foo2
}

cloud Foo3 {
  frame Foo4
}

database Foo5  {
  storage Foo6
}

storage Foo7 {
  storage Foo8
}
@enduml

すべて入れ子にした例

すべての入れ子要素の例です:
  • アルファベット順:

@startuml
artifact アーティファクト {
card カード {
cloud クラウド {
component コンポーネント {
database データベース {
file ファイル {
folder フォルダ {
frame フレーム {
hexagon 六角形 {
node ノード {
package パッケージ {
queue キュー {
rectangle 四角形 {
stack スタック {
storage ストレージ {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
@enduml

  • アルファベットの逆順

@startuml
storage ストレージ {
stack スタック {
rectangle 四角形 {
queue キュー {
package パッケージ {
node ノード {
hexagon 六角形 {
frame フレーム {
folder フォルダ {
file ファイル {
database データベース {
component コンポーネント {
cloud クラウド {
card カード {
artifact アーティファクト {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
@enduml

WARNING
 This translation need to be updated. 
WARNING

Example with one level

@startuml
artifact    artifactVeryLOOOOOOOOOOOOOOOOOOOg    as "artifact" {
file f1
}
card        cardVeryLOOOOOOOOOOOOOOOOOOOg        as "card" {
file f2
}
cloud       cloudVeryLOOOOOOOOOOOOOOOOOOOg       as "cloud" {
file f3
}
component   componentVeryLOOOOOOOOOOOOOOOOOOOg   as "component" {
file f4
}
database    databaseVeryLOOOOOOOOOOOOOOOOOOOg    as "database" {
file f5
}
file        fileVeryLOOOOOOOOOOOOOOOOOOOg        as "file" {
file f6
}
folder      folderVeryLOOOOOOOOOOOOOOOOOOOg      as "folder" {
file f7
}
frame       frameVeryLOOOOOOOOOOOOOOOOOOOg       as "frame" {
file f8
}
hexagon     hexagonVeryLOOOOOOOOOOOOOOOOOOOg     as "hexagon" {
file f9
}
node        nodeVeryLOOOOOOOOOOOOOOOOOOOg        as "node" {
file f10
}
package     packageVeryLOOOOOOOOOOOOOOOOOOOg     as "package" {
file f11
}
queue       queueVeryLOOOOOOOOOOOOOOOOOOOg       as "queue" {
file f12
}
rectangle   rectangleVeryLOOOOOOOOOOOOOOOOOOOg   as "rectangle" {
file f13
}
stack       stackVeryLOOOOOOOOOOOOOOOOOOOg       as "stack" {
file f14
}
storage     storageVeryLOOOOOOOOOOOOOOOOOOOg     as "storage" {
file f15
}
@enduml

Other example

@startuml
artifact Foo1 {
  folder Foo2
}

folder Foo3 {
  artifact Foo4
}

frame Foo5 {
  database Foo6
}

cloud vpc {
  node ec2 {
    stack stack
  }
}

@enduml


@startuml
node Foo1 {
 cloud Foo2
}

cloud Foo3 {
  frame Foo4
}

database Foo5  {
  storage Foo6
}

storage Foo7 {
  storage Foo8
}
@enduml

Full nesting

Here is all the nested elements:
  • by alphabetical order:

@startuml
action action {
artifact artifact {
card card {
cloud cloud {
component component {
database database {
file file {
folder folder {
frame frame {
hexagon hexagon {
node node {
package package {
process process {
queue queue {
rectangle rectangle {
stack stack {
storage storage {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
@enduml

  • or reverse alphabetical order

@startuml
storage storage {
stack stack {
rectangle rectangle {
queue queue {
process process {
package package {
node node {
hexagon hexagon {
frame frame {
folder folder {
file file {
database database {
component component {
cloud cloud {
card card {
artifact artifact {
action action {
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
@enduml

別名

Alias

asによる単純な別名

@startuml
node ノード1 as n1
node "ノード 2" as n2
file f1 as "ファイル 1"
cloud c1 as "これ
は
クラウド
です"
cloud c2 [これ
も
クラウド
です]

n1 -> n2
n1 --> f1
f1 -> c1
c1 -> c2
@enduml

長い別名の例

@startuml
actor        "アクター"         as actorVeryLOOOOOOOOOOOOOOOOOOOg
agent        "エージェント"     as agentVeryLOOOOOOOOOOOOOOOOOOOg
artifact     "アーティファクト" as artifactVeryLOOOOOOOOOOOOOOOOOOOg
boundary     "境界"             as boundaryVeryLOOOOOOOOOOOOOOOOOOOg
card         "カード"           as cardVeryLOOOOOOOOOOOOOOOOOOOg
cloud        "クラウド"         as cloudVeryLOOOOOOOOOOOOOOOOOOOg
collections  "コレクション"     as collectionsVeryLOOOOOOOOOOOOOOOOOOOg
component    "コンポーネント"   as componentVeryLOOOOOOOOOOOOOOOOOOOg
control      "コントロール"     as controlVeryLOOOOOOOOOOOOOOOOOOOg
database     "データベース"     as databaseVeryLOOOOOOOOOOOOOOOOOOOg
entity       "エンティティ"     as entityVeryLOOOOOOOOOOOOOOOOOOOg
file         "ファイル"         as fileVeryLOOOOOOOOOOOOOOOOOOOg
folder       "フォルダ"         as folderVeryLOOOOOOOOOOOOOOOOOOOg
frame        "フレーム"         as frameVeryLOOOOOOOOOOOOOOOOOOOg
hexagon      "六角形"           as hexagonVeryLOOOOOOOOOOOOOOOOOOOg
interface    "インターフェース" as interfaceVeryLOOOOOOOOOOOOOOOOOOOg
label        "ラベル"           as labelVeryLOOOOOOOOOOOOOOOOOOOg
node         "ノード"           as nodeVeryLOOOOOOOOOOOOOOOOOOOg
package      "パッケージ"       as packageVeryLOOOOOOOOOOOOOOOOOOOg
person       "人型"             as personVeryLOOOOOOOOOOOOOOOOOOOg
queue        "キュー"           as queueVeryLOOOOOOOOOOOOOOOOOOOg
stack        "スタック"         as stackVeryLOOOOOOOOOOOOOOOOOOOg
rectangle    "四角形"           as rectangleVeryLOOOOOOOOOOOOOOOOOOOg
storage      "ストレージ"       as storageVeryLOOOOOOOOOOOOOOOOOOOg
usecase      "ユースケース"     as usecaseVeryLOOOOOOOOOOOOOOOOOOOg
@enduml


@startuml
actor       actorVeryLOOOOOOOOOOOOOOOOOOOg       as "アクター"
agent       agentVeryLOOOOOOOOOOOOOOOOOOOg       as "エージェント"
artifact    artifactVeryLOOOOOOOOOOOOOOOOOOOg    as "アーティファクト"
boundary    boundaryVeryLOOOOOOOOOOOOOOOOOOOg    as "境界"
card        cardVeryLOOOOOOOOOOOOOOOOOOOg        as "カード"
cloud       cloudVeryLOOOOOOOOOOOOOOOOOOOg       as "クラウド"
collections collectionsVeryLOOOOOOOOOOOOOOOOOOOg as "コレクション"
component   componentVeryLOOOOOOOOOOOOOOOOOOOg   as "コンポーネント"
control     controlVeryLOOOOOOOOOOOOOOOOOOOg     as "コントロール"
database    databaseVeryLOOOOOOOOOOOOOOOOOOOg    as "データベース"
entity      entityVeryLOOOOOOOOOOOOOOOOOOOg      as "エンティティ"
file        fileVeryLOOOOOOOOOOOOOOOOOOOg        as "ファイル"
folder      folderVeryLOOOOOOOOOOOOOOOOOOOg      as "フォルダ"
frame       frameVeryLOOOOOOOOOOOOOOOOOOOg       as "フレーム"
hexagon     hexagonVeryLOOOOOOOOOOOOOOOOOOOg     as "六角形"
interface   interfaceVeryLOOOOOOOOOOOOOOOOOOOg   as "インターフェース"
label       labelVeryLOOOOOOOOOOOOOOOOOOOg       as "ラベル"
node        nodeVeryLOOOOOOOOOOOOOOOOOOOg        as "ノード"
package     packageVeryLOOOOOOOOOOOOOOOOOOOg     as "パッケージ"
person      personVeryLOOOOOOOOOOOOOOOOOOOg      as "人型"
queue       queueVeryLOOOOOOOOOOOOOOOOOOOg       as "キュー"
stack       stackVeryLOOOOOOOOOOOOOOOOOOOg       as "スタック"
rectangle   rectangleVeryLOOOOOOOOOOOOOOOOOOOg   as "四角形"
storage     storageVeryLOOOOOOOOOOOOOOOOOOOg     as "ストレージ"
usecase     usecaseVeryLOOOOOOOOOOOOOOOOOOOg     as "ユースケース"
@enduml

[Ref. QA-12082]

Simple alias with as

@startuml
node Node1 as n1
node "Node 2" as n2
file f1 as "File 1"
cloud c1 as "this
is
a
cloud"
cloud c2 [this
is
another
cloud]

n1 -> n2
n1 --> f1
f1 -> c1
c1 -> c2
@enduml

Examples of long alias

@startuml
actor        "actor"       as actorVeryLOOOOOOOOOOOOOOOOOOOg
agent        "agent"       as agentVeryLOOOOOOOOOOOOOOOOOOOg
artifact     "artifact"    as artifactVeryLOOOOOOOOOOOOOOOOOOOg
boundary     "boundary"    as boundaryVeryLOOOOOOOOOOOOOOOOOOOg
card         "card"        as cardVeryLOOOOOOOOOOOOOOOOOOOg
cloud        "cloud"       as cloudVeryLOOOOOOOOOOOOOOOOOOOg
collections  "collections" as collectionsVeryLOOOOOOOOOOOOOOOOOOOg
component    "component"   as componentVeryLOOOOOOOOOOOOOOOOOOOg
control      "control"     as controlVeryLOOOOOOOOOOOOOOOOOOOg
database     "database"    as databaseVeryLOOOOOOOOOOOOOOOOOOOg
entity       "entity"      as entityVeryLOOOOOOOOOOOOOOOOOOOg
file         "file"        as fileVeryLOOOOOOOOOOOOOOOOOOOg
folder       "folder"      as folderVeryLOOOOOOOOOOOOOOOOOOOg
frame        "frame"       as frameVeryLOOOOOOOOOOOOOOOOOOOg
hexagon      "hexagon"     as hexagonVeryLOOOOOOOOOOOOOOOOOOOg
interface    "interface"   as interfaceVeryLOOOOOOOOOOOOOOOOOOOg
label        "label"       as labelVeryLOOOOOOOOOOOOOOOOOOOg
node         "node"        as nodeVeryLOOOOOOOOOOOOOOOOOOOg
package      "package"     as packageVeryLOOOOOOOOOOOOOOOOOOOg
person       "person"      as personVeryLOOOOOOOOOOOOOOOOOOOg
queue        "queue"       as queueVeryLOOOOOOOOOOOOOOOOOOOg
stack        "stack"       as stackVeryLOOOOOOOOOOOOOOOOOOOg
rectangle    "rectangle"   as rectangleVeryLOOOOOOOOOOOOOOOOOOOg
storage      "storage"     as storageVeryLOOOOOOOOOOOOOOOOOOOg
usecase      "usecase"     as usecaseVeryLOOOOOOOOOOOOOOOOOOOg
@enduml


@startuml
actor       actorVeryLOOOOOOOOOOOOOOOOOOOg       as "actor"
agent       agentVeryLOOOOOOOOOOOOOOOOOOOg       as "agent"
artifact    artifactVeryLOOOOOOOOOOOOOOOOOOOg    as "artifact"
boundary    boundaryVeryLOOOOOOOOOOOOOOOOOOOg    as "boundary"
card        cardVeryLOOOOOOOOOOOOOOOOOOOg        as "card"
cloud       cloudVeryLOOOOOOOOOOOOOOOOOOOg       as "cloud"
collections collectionsVeryLOOOOOOOOOOOOOOOOOOOg as "collections"
component   componentVeryLOOOOOOOOOOOOOOOOOOOg   as "component"
control     controlVeryLOOOOOOOOOOOOOOOOOOOg     as "control"
database    databaseVeryLOOOOOOOOOOOOOOOOOOOg    as "database"
entity      entityVeryLOOOOOOOOOOOOOOOOOOOg      as "entity"
file        fileVeryLOOOOOOOOOOOOOOOOOOOg        as "file"
folder      folderVeryLOOOOOOOOOOOOOOOOOOOg      as "folder"
frame       frameVeryLOOOOOOOOOOOOOOOOOOOg       as "frame"
hexagon     hexagonVeryLOOOOOOOOOOOOOOOOOOOg     as "hexagon"
interface   interfaceVeryLOOOOOOOOOOOOOOOOOOOg   as "interface"
label       labelVeryLOOOOOOOOOOOOOOOOOOOg       as "label"
node        nodeVeryLOOOOOOOOOOOOOOOOOOOg        as "node"
package     packageVeryLOOOOOOOOOOOOOOOOOOOg     as "package"
person      personVeryLOOOOOOOOOOOOOOOOOOOg      as "person"
queue       queueVeryLOOOOOOOOOOOOOOOOOOOg       as "queue"
stack       stackVeryLOOOOOOOOOOOOOOOOOOOg       as "stack"
rectangle   rectangleVeryLOOOOOOOOOOOOOOOOOOOg   as "rectangle"
storage     storageVeryLOOOOOOOOOOOOOOOOOOOg     as "storage"
usecase     usecaseVeryLOOOOOOOOOOOOOOOOOOOg     as "usecase"
@enduml

[Ref. QA-12082]

角に丸みをつける

Round corner

 

@startuml
skinparam rectangle {
    roundCorner<<コンセプト>> 25
}


rectangle "コンセプト・モデル" <<コンセプト>> {
rectangle "例 1" <<コンセプト>> as ex1
rectangle "別の四角形"
}
@enduml


@startuml
skinparam rectangle {
    roundCorner<<Concept>> 25
}

rectangle "Concept Model" <<Concept>> {
rectangle "Example 1" <<Concept>> as ex1
rectangle "Another rectangle"
}
@enduml

特有のskinparam

Specific SkinParameter

roundCorner 

@startuml
skinparam roundCorner 15
actor アクター
agent エージェント
artifact アーティファクト
boundary 境界
card カード
circle 円
cloud クラウド
collections コレクション
component コンポーネント
control コントロール
database データベース
entity エンティティ
file ファイル
folder フォルダ
frame フレーム
hexagon 六角形
interface インターフェース
label ラベル
node ノード
package パッケージ
person 人型
queue キュー
rectangle 四角形
stack スタック
storage ストレージ
usecase ユースケース
@enduml

[Ref. QA-5299, QA-6915, QA-11943]

roundCorner 

@startuml
skinparam roundCorner 15
actor actor
agent agent
artifact artifact
boundary boundary
card card
circle circle
cloud cloud
collections collections
component component
control control
database database
entity entity
file file
folder folder
frame frame
hexagon hexagon
interface interface
label label
node node
package package
person person
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
@enduml

[Ref. QA-5299, QA-6915, QA-11943]

付録：線の種類の一覧

Appendix: All type of arrow line

 

@startuml
left to right direction
skinparam nodesep 5

f3  ~~  b3  : ""~~""\n//dotted//
f2  ..  b2  : ""..""\n//dashed//
f1  ==  b1  : ""==""\n//bold//
f0  --  b0  : ""--""\n//plain//
@enduml


@startuml
left to right direction
skinparam nodesep 5

f3  ~~  b3  : ""~~""\n//dotted//
f2  ..  b2  : ""..""\n//dashed//
f1  ==  b1  : ""==""\n//bold//
f0  --  b0  : ""--""\n//plain//
@enduml

付録：矢印の先端と'0'矢印の一覧

Appendix: All type of arrow head or '0' arrow

矢印の先端

@startuml
left to right direction
skinparam nodesep 5

f13 --0   b13 : ""--0""
f12 --@   b12 : ""--@""
f11 --:|> b11 : ""--:|>""
f10 --||> b10 : ""--||>""
f9  --|>  b9  : ""--|>""
f8  --^   b8  : ""--^ ""
f7  --\\  b7  : ""--\\\\""
f6  --#   b6  : ""--# ""
f5  --+   b5  : ""--+ ""
f4  --o   b4  : ""--o ""
f3  --*   b3  : ""--* ""
f2  -->>  b2  : ""-->>""
f1  -->   b1  : ""--> ""
f0  --    b0  : ""--  ""
@enduml

丸形の矢印（'0'矢印）

@startuml
left to right direction
skinparam nodesep 5

f10 0--0 b10 : "" 0--0 ""
f9 )--(  b9  : "" )--( ""
f8 0)--(0 b8 : "" 0)--(0""
f7 0)--  b7  : "" 0)-- ""
f6 -0)-  b6  : "" -0)- ""
f5 -(0)- b5  : "" -(0)-""
f4 -(0-  b4  : "" -(0- ""
f3 --(0  b3  : "" --(0 ""
f2 --(   b2  : "" --(  ""
f1 --0   b1  : "" --0  ""
@enduml

Type of arrow head

@startuml
left to right direction
skinparam nodesep 5

f13 --0   b13 : ""--0""
f12 --@   b12 : ""--@""
f11 --:|> b11 : ""--:|>""
f10 --||> b10 : ""--||>""
f9  --|>  b9  : ""--|>""
f8  --^   b8  : ""--^ ""
f7  --\\  b7  : ""--\\\\""
f6  --#   b6  : ""--# ""
f5  --+   b5  : ""--+ ""
f4  --o   b4  : ""--o ""
f3  --*   b3  : ""--* ""
f2  -->>  b2  : ""-->>""
f1  -->   b1  : ""--> ""
f0  --    b0  : ""--  ""
@enduml

Type of '0' arrow or circle arrow

@startuml
left to right direction
skinparam nodesep 5

f10 0--0 b10 : "" 0--0 ""
f9 )--(  b9  : "" )--( ""
f8 0)--(0 b8 : "" 0)--(0""
f7 0)--  b7  : "" 0)-- ""
f6 -0)-  b6  : "" -0)- ""
f5 -(0)- b5  : "" -(0)-""
f4 -(0-  b4  : "" -(0- ""
f3 --(0  b3  : "" --(0 ""
f2 --(   b2  : "" --(  ""
f1 --0   b1  : "" --0  ""
@enduml

付録：すべての要素に対するインラインスタイルのテスト

Appendix: Test of inline style on all element

シンプルな要素

@startuml
actor アクター             #aliceblue;line:blue;line.dotted;text:blue
actor/ "アクター/"         #aliceblue;line:blue;line.dotted;text:blue
agent エージェント         #aliceblue;line:blue;line.dotted;text:blue
artifact アーティファクト  #aliceblue;line:blue;line.dotted;text:blue
boundary 境界              #aliceblue;line:blue;line.dotted;text:blue
card カード                #aliceblue;line:blue;line.dotted;text:blue
circle 円                  #aliceblue;line:blue;line.dotted;text:blue
cloud クラウド             #aliceblue;line:blue;line.dotted;text:blue
collections コレクション   #aliceblue;line:blue;line.dotted;text:blue
component コンポーネント   #aliceblue;line:blue;line.dotted;text:blue
control コントロール       #aliceblue;line:blue;line.dotted;text:blue
database データベース      #aliceblue;line:blue;line.dotted;text:blue
entity エンティティ        #aliceblue;line:blue;line.dotted;text:blue
file ファイル              #aliceblue;line:blue;line.dotted;text:blue
folder フォルダ            #aliceblue;line:blue;line.dotted;text:blue
frame フレーム             #aliceblue;line:blue;line.dotted;text:blue
hexagon 六角形             #aliceblue;line:blue;line.dotted;text:blue
interface インターフェース #aliceblue;line:blue;line.dotted;text:blue
label ラベル               #aliceblue;line:blue;line.dotted;text:blue
node ノード                #aliceblue;line:blue;line.dotted;text:blue
package パッケージ         #aliceblue;line:blue;line.dotted;text:blue
person 人型                #aliceblue;line:blue;line.dotted;text:blue
queue キュー               #aliceblue;line:blue;line.dotted;text:blue
rectangle 四角形           #aliceblue;line:blue;line.dotted;text:blue
stack スタック             #aliceblue;line:blue;line.dotted;text:blue
storage ストレージ         #aliceblue;line:blue;line.dotted;text:blue
usecase ユースケース       #aliceblue;line:blue;line.dotted;text:blue
usecase/ "ユースケース/"   #aliceblue;line:blue;line.dotted;text:blue
@enduml

入れ子の要素

サブ要素無し

@startuml
artifact アーティファクト #aliceblue;line:blue;line.dotted;text:blue {
}
card カード #aliceblue;line:blue;line.dotted;text:blue {
}
cloud クラウド #aliceblue;line:blue;line.dotted;text:blue {
}
component コンポーネント #aliceblue;line:blue;line.dotted;text:blue {
}
database データベース #aliceblue;line:blue;line.dotted;text:blue {
}
file ファイル #aliceblue;line:blue;line.dotted;text:blue {
}
folder フォルダ #aliceblue;line:blue;line.dotted;text:blue {
}
frame フレーム #aliceblue;line:blue;line.dotted;text:blue {
}
hexagon 六角形 #aliceblue;line:blue;line.dotted;text:blue {
}
node ノード #aliceblue;line:blue;line.dotted;text:blue {
}
package パッケージ #aliceblue;line:blue;line.dotted;text:blue {
}
queue キュー #aliceblue;line:blue;line.dotted;text:blue {
}
rectangle 四角形 #aliceblue;line:blue;line.dotted;text:blue {
}
stack スタック #aliceblue;line:blue;line.dotted;text:blue {
}
storage ストレージ #aliceblue;line:blue;line.dotted;text:blue {
}
@enduml

サブ要素有り

@startuml
artifact    artifactVeryLOOOOOOOOOOOOOOOOOOOg    as "アーティファクト" #aliceblue;line:blue;line.dotted;text:blue {
file f1
}
card        cardVeryLOOOOOOOOOOOOOOOOOOOg        as "カード" #aliceblue;line:blue;line.dotted;text:blue {
file f2
}
cloud       cloudVeryLOOOOOOOOOOOOOOOOOOOg       as "クラウド" #aliceblue;line:blue;line.dotted;text:blue {
file f3
}
component   componentVeryLOOOOOOOOOOOOOOOOOOOg   as "コンポーネント" #aliceblue;line:blue;line.dotted;text:blue {
file f4
}
database    databaseVeryLOOOOOOOOOOOOOOOOOOOg    as "データベース" #aliceblue;line:blue;line.dotted;text:blue {
file f5
}
file        fileVeryLOOOOOOOOOOOOOOOOOOOg        as "ファイル" #aliceblue;line:blue;line.dotted;text:blue {
file f6
}
folder      folderVeryLOOOOOOOOOOOOOOOOOOOg      as "フォルダ" #aliceblue;line:blue;line.dotted;text:blue {
file f7
}
frame       frameVeryLOOOOOOOOOOOOOOOOOOOg       as "フレーム" #aliceblue;line:blue;line.dotted;text:blue {
file f8
}
hexagon     hexagonVeryLOOOOOOOOOOOOOOOOOOOg     as "六角形" #aliceblue;line:blue;line.dotted;text:blue {
file f9
}
node        nodeVeryLOOOOOOOOOOOOOOOOOOOg        as "ノード" #aliceblue;line:blue;line.dotted;text:blue {
file f10
}
package     packageVeryLOOOOOOOOOOOOOOOOOOOg     as "パッケージ" #aliceblue;line:blue;line.dotted;text:blue {
file f11
}
queue       queueVeryLOOOOOOOOOOOOOOOOOOOg       as "キュー" #aliceblue;line:blue;line.dotted;text:blue {
file f12
}
rectangle   rectangleVeryLOOOOOOOOOOOOOOOOOOOg   as "四角形" #aliceblue;line:blue;line.dotted;text:blue {
file f13
}
stack       stackVeryLOOOOOOOOOOOOOOOOOOOg       as "スタック" #aliceblue;line:blue;line.dotted;text:blue {
file f14
}
storage     storageVeryLOOOOOOOOOOOOOOOOOOOg     as "ストレージ" #aliceblue;line:blue;line.dotted;text:blue {
file f15
}
@enduml

WARNING
 This translation need to be updated. 
WARNING

Simple element

@startuml
action action           #aliceblue;line:blue;line.dotted;text:blue
actor actor             #aliceblue;line:blue;line.dotted;text:blue
actor/ "actor/"         #aliceblue;line:blue;line.dotted;text:blue
agent agent             #aliceblue;line:blue;line.dotted;text:blue
artifact artifact       #aliceblue;line:blue;line.dotted;text:blue
boundary boundary       #aliceblue;line:blue;line.dotted;text:blue
card card               #aliceblue;line:blue;line.dotted;text:blue
circle circle           #aliceblue;line:blue;line.dotted;text:blue
cloud cloud             #aliceblue;line:blue;line.dotted;text:blue
collections collections #aliceblue;line:blue;line.dotted;text:blue
component component     #aliceblue;line:blue;line.dotted;text:blue
control control         #aliceblue;line:blue;line.dotted;text:blue
database database       #aliceblue;line:blue;line.dotted;text:blue
entity entity           #aliceblue;line:blue;line.dotted;text:blue
file file               #aliceblue;line:blue;line.dotted;text:blue
folder folder           #aliceblue;line:blue;line.dotted;text:blue
frame frame             #aliceblue;line:blue;line.dotted;text:blue
hexagon hexagon         #aliceblue;line:blue;line.dotted;text:blue
interface interface     #aliceblue;line:blue;line.dotted;text:blue
label label             #aliceblue;line:blue;line.dotted;text:blue
node node               #aliceblue;line:blue;line.dotted;text:blue
package package         #aliceblue;line:blue;line.dotted;text:blue
person person           #aliceblue;line:blue;line.dotted;text:blue
process process         #aliceblue;line:blue;line.dotted;text:blue
queue queue             #aliceblue;line:blue;line.dotted;text:blue
rectangle rectangle     #aliceblue;line:blue;line.dotted;text:blue
stack stack             #aliceblue;line:blue;line.dotted;text:blue
storage storage         #aliceblue;line:blue;line.dotted;text:blue
usecase usecase         #aliceblue;line:blue;line.dotted;text:blue
usecase/ "usecase/"     #aliceblue;line:blue;line.dotted;text:blue
@enduml

Nested element

Without sub-element

@startuml
action action #aliceblue;line:blue;line.dotted;text:blue {
}
artifact artifact #aliceblue;line:blue;line.dotted;text:blue {
}
card card #aliceblue;line:blue;line.dotted;text:blue {
}
cloud cloud #aliceblue;line:blue;line.dotted;text:blue {
}
component component #aliceblue;line:blue;line.dotted;text:blue {
}
database database #aliceblue;line:blue;line.dotted;text:blue {
}
file file #aliceblue;line:blue;line.dotted;text:blue {
}
folder folder #aliceblue;line:blue;line.dotted;text:blue {
}
frame frame #aliceblue;line:blue;line.dotted;text:blue {
}
hexagon hexagon #aliceblue;line:blue;line.dotted;text:blue {
}
node node #aliceblue;line:blue;line.dotted;text:blue {
}
package package #aliceblue;line:blue;line.dotted;text:blue {
}
process process #aliceblue;line:blue;line.dotted;text:blue {
}
queue queue #aliceblue;line:blue;line.dotted;text:blue {
}
rectangle rectangle #aliceblue;line:blue;line.dotted;text:blue {
}
stack stack #aliceblue;line:blue;line.dotted;text:blue {
}
storage storage #aliceblue;line:blue;line.dotted;text:blue {
}
@enduml

With sub-element

@startuml
action      actionVeryLOOOOOOOOOOOOOOOOOOOg      as "action" #aliceblue;line:blue;line.dotted;text:blue {
file f1
}
artifact    artifactVeryLOOOOOOOOOOOOOOOOOOOg    as "artifact" #aliceblue;line:blue;line.dotted;text:blue {
file f1
}
card        cardVeryLOOOOOOOOOOOOOOOOOOOg        as "card" #aliceblue;line:blue;line.dotted;text:blue {
file f2
}
cloud       cloudVeryLOOOOOOOOOOOOOOOOOOOg       as "cloud" #aliceblue;line:blue;line.dotted;text:blue {
file f3
}
component   componentVeryLOOOOOOOOOOOOOOOOOOOg   as "component" #aliceblue;line:blue;line.dotted;text:blue {
file f4
}
database    databaseVeryLOOOOOOOOOOOOOOOOOOOg    as "database" #aliceblue;line:blue;line.dotted;text:blue {
file f5
}
file        fileVeryLOOOOOOOOOOOOOOOOOOOg        as "file" #aliceblue;line:blue;line.dotted;text:blue {
file f6
}
folder      folderVeryLOOOOOOOOOOOOOOOOOOOg      as "folder" #aliceblue;line:blue;line.dotted;text:blue {
file f7
}
frame       frameVeryLOOOOOOOOOOOOOOOOOOOg       as "frame" #aliceblue;line:blue;line.dotted;text:blue {
file f8
}
hexagon     hexagonVeryLOOOOOOOOOOOOOOOOOOOg     as "hexagon" #aliceblue;line:blue;line.dotted;text:blue {
file f9
}
node        nodeVeryLOOOOOOOOOOOOOOOOOOOg        as "node" #aliceblue;line:blue;line.dotted;text:blue {
file f10
}
package     packageVeryLOOOOOOOOOOOOOOOOOOOg     as "package" #aliceblue;line:blue;line.dotted;text:blue {
file f11
}
process     processVeryLOOOOOOOOOOOOOOOOOOOg     as "process" #aliceblue;line:blue;line.dotted;text:blue {
file f11
}
queue       queueVeryLOOOOOOOOOOOOOOOOOOOg       as "queue" #aliceblue;line:blue;line.dotted;text:blue {
file f12
}
rectangle   rectangleVeryLOOOOOOOOOOOOOOOOOOOg   as "rectangle" #aliceblue;line:blue;line.dotted;text:blue {
file f13
}
stack       stackVeryLOOOOOOOOOOOOOOOOOOOg       as "stack" #aliceblue;line:blue;line.dotted;text:blue {
file f14
}
storage     storageVeryLOOOOOOOOOOOOOOOOOOOg     as "storage" #aliceblue;line:blue;line.dotted;text:blue {
file f15
}
@enduml

付録：すべての要素に対するスタイルのテスト

Appendix: Test of style on all element

シンプルな要素

グローバルスタイル（componentDiagram）

@startuml
<style>
componentDiagram {
  BackGroundColor palegreen
  LineThickness 1
  LineColor red
}
document {
  BackGroundColor white
}
</style>
actor アクター
actor/ "アクター/"
agent エージェント
artifact アーティファクト
boundary 境界
card カード
circle 円
cloud クラウド
collections コレクション
component コンポーネント
control コントロール
database データベース
entity エンティティ
file ファイル
folder フォルダ
frame フレーム
hexagon 六角形
interface インターフェース
label ラベル
node ノード
package パッケージ
person 人型
queue キュー
rectangle 四角形
stack スタック
storage ストレージ
usecase ユースケース
usecase/ "ユースケース/"
@enduml

エレメント毎のスタイル

@startuml
<style>
actor {
  BackGroundColor #f80c12
  LineThickness 1
  LineColor black
}
agent {
  BackGroundColor #f80c12
  LineThickness 1
  LineColor black
}
artifact {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
boundary {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
card {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
circle {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
cloud {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
collections {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
component {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
control {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
database {
  BackGroundColor #ff9933
  LineThickness 1
  LineColor black
}
entity {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
file {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
folder {
  BackGroundColor #ccbb33
  LineThickness 1
  LineColor black
}
frame {
  BackGroundColor #d0c310
  LineThickness 1
  LineColor black
}
hexagon {
  BackGroundColor #aacc22
  LineThickness 1
  LineColor black
}
interface {
  BackGroundColor #69d025
  LineThickness 1
  LineColor black
}
label {
  BackGroundColor black
  LineThickness 1
  LineColor black
}
node {
  BackGroundColor #22ccaa
  LineThickness 1
  LineColor black
}
package {
  BackGroundColor #12bdb9
  LineThickness 1
  LineColor black
}
person {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
queue {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
rectangle {
  BackGroundColor #4444dd
  LineThickness 1
  LineColor black
}
stack {
  BackGroundColor #3311bb
  LineThickness 1
  LineColor black
}
storage {
  BackGroundColor #3b0cbd
  LineThickness 1
  LineColor black
}
usecase {
  BackGroundColor #442299
  LineThickness 1
  LineColor black
}
</style>
actor アクター
actor/ "アクター/"
agent エージェント
artifact アーティファクト
boundary 境界
card カード
circle 円
cloud クラウド
collections コレクション
component コンポーネント
control コントロール
database データベース
entity エンティティ
file ファイル
folder フォルダ
frame フレーム
hexagon 六角形
interface インターフェース
label ラベル
node ノード
package パッケージ
person 人型
queue キュー
rectangle 四角形
stack スタック
storage ストレージ
usecase ユースケース
usecase/ "ユースケース/"
@enduml

[Ref. QA-13261]

入れ子要素 (階層無し)

グローバルスタイル (componentDiagram)

@startuml
<style>
componentDiagram {
  BackGroundColor palegreen
  LineThickness 2
  LineColor red
}
</style>
artifact artifact {
}
card card {
}
cloud cloud {
}
component component {
}
database database {
}
file file {
}
folder folder {
}
frame frame {
}
hexagon hexagon {
}
node node {
}
package package {
}
queue queue {
}
rectangle rectangle {
}
stack stack {
}
storage storage {
}
@enduml

入れ子要素ごとのスタイル

@startuml
<style>
artifact {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
card {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
cloud {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
component {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
database {
  BackGroundColor #ff9933
  LineThickness 1
  LineColor black
}
file {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
folder {
  BackGroundColor #ccbb33
  LineThickness 1
  LineColor black
}
frame {
  BackGroundColor #d0c310
  LineThickness 1
  LineColor black
}
hexagon {
  BackGroundColor #aacc22
  LineThickness 1
  LineColor black
}
node {
  BackGroundColor #22ccaa
  LineThickness 1
  LineColor black
}
package {
  BackGroundColor #12bdb9
  LineThickness 1
  LineColor black
}
queue {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
rectangle {
  BackGroundColor #4444dd
  LineThickness 1
  LineColor black
}
stack {
  BackGroundColor #3311bb
  LineThickness 1
  LineColor black
}
storage {
  BackGroundColor #3b0cbd
  LineThickness 1
  LineColor black
}

</style>
artifact artifact {
}
card card {
}
cloud cloud {
}
component component {
}
database database {
}
file file {
}
folder folder {
}
frame frame {
}
hexagon hexagon {
}
node node {
}
package package {
}
queue queue {
}
rectangle rectangle {
}
stack stack {
}
storage storage {
}
@enduml

入れ子要素（一階層）

グローバルスタイル（componentDiagram）

@startuml
<style>
componentDiagram {
  BackGroundColor palegreen
  LineThickness 1
  LineColor red
}
document {
  BackGroundColor white
}
</style>
artifact e1 as "アーティファクト" {
file f1
}
card e2 as "カード" {
file f2
}
cloud e3 as "クラウド" {
file f3
}
component e4 as "コンポーネント" {
file f4
}
database e5 as "データベース" {
file f5
}
file e6 as "ファイル" {
file f6
}
folder e7 as "フォルダ" {
file f7
}
frame e8 as "フレーム" {
file f8
}
hexagon e9 as "六角形" {
file f9
}
node e10 as "ノード" {
file f10
}
package e11 as "パッケージ" {
file f11
}
queue e12 as "キュー" {
file f12
}
rectangle e13 as "四角形" {
file f13
}
stack e14 as "スタック" {
file f14
}
storage e15 as "ストレージ" {
file f15
}
@enduml

入れ子要素ごとのスタイル

@startuml
<style>
artifact {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
card {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
cloud {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
component {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
database {
  BackGroundColor #ff9933
  LineThickness 1
  LineColor black
}
file {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
folder {
  BackGroundColor #ccbb33
  LineThickness 1
  LineColor black
}
frame {
  BackGroundColor #d0c310
  LineThickness 1
  LineColor black
}
hexagon {
  BackGroundColor #aacc22
  LineThickness 1
  LineColor black
}
node {
  BackGroundColor #22ccaa
  LineThickness 1
  LineColor black
}
package {
  BackGroundColor #12bdb9
  LineThickness 1
  LineColor black
}
queue {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
rectangle {
  BackGroundColor #4444dd
  LineThickness 1
  LineColor black
}
stack {
  BackGroundColor #3311bb
  LineThickness 1
  LineColor black
}
storage {
  BackGroundColor #3b0cbd
  LineThickness 1
  LineColor black
}
</style>
artifact e1 as "アーティファクト" {
file f1
}
card e2 as "カード" {
file f2
}
cloud e3 as "クラウド" {
file f3
}
component e4 as "コンポーネント" {
file f4
}
database e5 as "データベース" {
file f5
}
file e6 as "ファイル" {
file f6
}
folder e7 as "フォルダ" {
file f7
}
frame e8 as "フレーム" {
file f8
}
hexagon e9 as "六角形" {
file f9
}
node e10 as "ノード" {
file f10
}
package e11 as "パッケージ" {
file f11
}
queue e12 as "キュー" {
file f12
}
rectangle e13 as "四角形" {
file f13
}
stack e14 as "スタック" {
file f14
}
storage e15 as "ストレージ" {
file f15
}
@enduml

Simple element

Global style (on componentDiagram)

@startuml
<style>
componentDiagram {
  BackGroundColor palegreen
  LineThickness 1
  LineColor red
}
document {
  BackGroundColor white
}
</style>
actor actor
actor/ "actor/"
agent agent
artifact artifact
boundary boundary
card card
circle circle
cloud cloud
collections collections
component component
control control
database database
entity entity
file file
folder folder
frame frame
hexagon hexagon
interface interface
label label
node node
package package
person person
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
@enduml

Style for each element

@startuml
<style>
actor {
  BackGroundColor #f80c12
  LineThickness 1
  LineColor black
}
agent {
  BackGroundColor #f80c12
  LineThickness 1
  LineColor black
}
artifact {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
boundary {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
card {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
circle {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
cloud {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
collections {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
component {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
control {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
database {
  BackGroundColor #ff9933
  LineThickness 1
  LineColor black
}
entity {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
file {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
folder {
  BackGroundColor #ccbb33
  LineThickness 1
  LineColor black
}
frame {
  BackGroundColor #d0c310
  LineThickness 1
  LineColor black
}
hexagon {
  BackGroundColor #aacc22
  LineThickness 1
  LineColor black
}
interface {
  BackGroundColor #69d025
  LineThickness 1
  LineColor black
}
label {
  BackGroundColor black
  LineThickness 1
  LineColor black
}
node {
  BackGroundColor #22ccaa
  LineThickness 1
  LineColor black
}
package {
  BackGroundColor #12bdb9
  LineThickness 1
  LineColor black
}
person {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
queue {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
rectangle {
  BackGroundColor #4444dd
  LineThickness 1
  LineColor black
}
stack {
  BackGroundColor #3311bb
  LineThickness 1
  LineColor black
}
storage {
  BackGroundColor #3b0cbd
  LineThickness 1
  LineColor black
}
usecase {
  BackGroundColor #442299
  LineThickness 1
  LineColor black
}
</style>
actor actor
actor/ "actor/"
agent agent
artifact artifact
boundary boundary
card card
circle circle
cloud cloud
collections collections
component component
control control
database database
entity entity
file file
folder folder
frame frame
hexagon hexagon
interface interface
label label
node node
package package
person person
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
@enduml

[Ref. QA-13261]

Nested element (without level)

Global style (on componentDiagram)

@startuml
<style>
componentDiagram {
  BackGroundColor palegreen
  LineThickness 2
  LineColor red
}
</style>
artifact artifact {
}
card card {
}
cloud cloud {
}
component component {
}
database database {
}
file file {
}
folder folder {
}
frame frame {
}
hexagon hexagon {
}
node node {
}
package package {
}
queue queue {
}
rectangle rectangle {
}
stack stack {
}
storage storage {
}
@enduml

Style for each nested element

@startuml
<style>
artifact {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
card {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
cloud {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
component {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
database {
  BackGroundColor #ff9933
  LineThickness 1
  LineColor black
}
file {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
folder {
  BackGroundColor #ccbb33
  LineThickness 1
  LineColor black
}
frame {
  BackGroundColor #d0c310
  LineThickness 1
  LineColor black
}
hexagon {
  BackGroundColor #aacc22
  LineThickness 1
  LineColor black
}
node {
  BackGroundColor #22ccaa
  LineThickness 1
  LineColor black
}
package {
  BackGroundColor #12bdb9
  LineThickness 1
  LineColor black
}
queue {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
rectangle {
  BackGroundColor #4444dd
  LineThickness 1
  LineColor black
}
stack {
  BackGroundColor #3311bb
  LineThickness 1
  LineColor black
}
storage {
  BackGroundColor #3b0cbd
  LineThickness 1
  LineColor black
}

</style>
artifact artifact {
}
card card {
}
cloud cloud {
}
component component {
}
database database {
}
file file {
}
folder folder {
}
frame frame {
}
hexagon hexagon {
}
node node {
}
package package {
}
queue queue {
}
rectangle rectangle {
}
stack stack {
}
storage storage {
}
@enduml

Nested element (with one level)

Global style (on componentDiagram)

@startuml
<style>
componentDiagram {
  BackGroundColor palegreen
  LineThickness 1
  LineColor red
}
document {
  BackGroundColor white
}
</style>
artifact e1 as "artifact" {
file f1
}
card e2 as "card" {
file f2
}
cloud e3 as "cloud" {
file f3
}
component e4 as "component" {
file f4
}
database e5 as "database" {
file f5
}
file e6 as "file" {
file f6
}
folder e7 as "folder" {
file f7
}
frame e8 as "frame" {
file f8
}
hexagon e9 as "hexagon" {
file f9
}
node e10 as "node" {
file f10
}
package e11 as "package" {
file f11
}
queue e12 as "queue" {
file f12
}
rectangle e13 as "rectangle" {
file f13
}
stack e14 as "stack" {
file f14
}
storage e15 as "storage" {
file f15
}
@enduml

Style for each nested element

@startuml
<style>
artifact {
  BackGroundColor #ee1100
  LineThickness 1
  LineColor black
}
card {
  BackGroundColor #ff3311
  LineThickness 1
  LineColor black
}
cloud {
  BackGroundColor #ff4422
  LineThickness 1
  LineColor black
}
component {
  BackGroundColor #ff6644
  LineThickness 1
  LineColor black
}
database {
  BackGroundColor #ff9933
  LineThickness 1
  LineColor black
}
file {
  BackGroundColor #feae2d
  LineThickness 1
  LineColor black
}
folder {
  BackGroundColor #ccbb33
  LineThickness 1
  LineColor black
}
frame {
  BackGroundColor #d0c310
  LineThickness 1
  LineColor black
}
hexagon {
  BackGroundColor #aacc22
  LineThickness 1
  LineColor black
}
node {
  BackGroundColor #22ccaa
  LineThickness 1
  LineColor black
}
package {
  BackGroundColor #12bdb9
  LineThickness 1
  LineColor black
}
queue {
  BackGroundColor #11aabb
  LineThickness 1
  LineColor black
}
rectangle {
  BackGroundColor #4444dd
  LineThickness 1
  LineColor black
}
stack {
  BackGroundColor #3311bb
  LineThickness 1
  LineColor black
}
storage {
  BackGroundColor #3b0cbd
  LineThickness 1
  LineColor black
}
</style>
artifact e1 as "artifact" {
file f1
}
card e2 as "card" {
file f2
}
cloud e3 as "cloud" {
file f3
}
component e4 as "component" {
file f4
}
database e5 as "database" {
file f5
}
file e6 as "file" {
file f6
}
folder e7 as "folder" {
file f7
}
frame e8 as "frame" {
file f8
}
hexagon e9 as "hexagon" {
file f9
}
node e10 as "node" {
file f10
}
package e11 as "package" {
file f11
}
queue e12 as "queue" {
file f12
}
rectangle e13 as "rectangle" {
file f13
}
stack e14 as "stack" {
file f14
}
storage e15 as "storage" {
file f15
}
@enduml

付録: すべての要素にスタイル指定した場合のステレオタイプのテスト

Appendix: Test of stereotype with style on all element

単純な要素

@startuml
<style>
.stereo {
  BackgroundColor palegreen
}
</style>
actor アクター << stereo >>
actor/ "アクター/" << stereo >>
agent エージェント << stereo >>
artifact アーティファクト << stereo >>
boundary 境界 << stereo >>
card カード << stereo >>
circle 円 << stereo >>
cloud クラウド << stereo >>
collections コレクション << stereo >>
component コンポーネント << stereo >>
control コントロール << stereo >>
database データベース << stereo >>
entity エンティティ << stereo >>
file ファイル << stereo >>
folder フォルダ << stereo >>
frame フレーム << stereo >>
hexagon 六角形 << stereo >>
interface インターフェース << stereo >>
label ラベル << stereo >>
node ノード << stereo >>
package パッケージ << stereo >>
person 人型 << stereo >>
queue キュー << stereo >>
rectangle 四角形 << stereo >>
stack スタック << stereo >>
storage ストレージ << stereo >>
usecase ユースケース << stereo >>
usecase/ "ユースケース/" << stereo >>
@enduml

Simple element

@startuml
<style>
.stereo {
  BackgroundColor palegreen
}
</style>
actor actor << stereo >>
actor/ "actor/" << stereo >>
agent agent << stereo >>
artifact artifact << stereo >>
boundary boundary << stereo >>
card card << stereo >>
circle circle << stereo >>
cloud cloud << stereo >>
collections collections << stereo >>
component component << stereo >>
control control << stereo >>
database database << stereo >>
entity entity << stereo >>
file file << stereo >>
folder folder << stereo >>
frame frame << stereo >>
hexagon hexagon << stereo >>
interface interface << stereo >>
label label << stereo >>
node node << stereo >>
package package << stereo >>
person person << stereo >>
queue queue << stereo >>
rectangle rectangle << stereo >>
stack stack << stereo >>
storage storage << stereo >>
usecase usecase << stereo >>
usecase/ "usecase/" << stereo >>
@enduml

Display JSON Data on Deployment diagram

Simple example

@startuml
allowmixing

component Component
actor     Actor
usecase   Usecase
()        Interface
node      Node
cloud     Cloud

json JSON {
   "fruit":"Apple",
   "size":"Large",
   "color": ["Red", "Green"]
}
@enduml

[Ref. QA-15481]

For another example, see on JSON page.

Mixing Deployment (Usecase, Component, Deployment) element within a Class or Object diagram

In order to add a Deployment element or a State element within a Class or Object diagram, you can use the allowmixing or allow_mixing directive.

Mixing all elements

@startuml

allowmixing

skinparam nodesep 10
abstract        abstract
abstract class  "abstract class"
annotation      annotation
circle          circle
()              circle_short_form
class           class
diamond         diamond
<>              diamond_short_form
entity          entity
enum            enum
exception       exception
interface       interface
metaclass       metaclass
protocol        protocol
stereotype      stereotype
struct          struct
object          object
map map {
 key => value
}
json JSON {
   "fruit":"Apple",
   "size":"Large",
   "color": ["Red", "Green"]
}
action action
actor actor
actor/ "actor/"
agent agent
artifact artifact
boundary boundary
card card
circle circle
cloud cloud
collections collections
component component
control control
database database
entity entity
file file
folder folder
frame frame
hexagon hexagon
interface interface
label label
node node
package package
person person
process process
queue queue
rectangle rectangle
stack stack
storage storage
usecase usecase
usecase/ "usecase/"
state state
@enduml

[Ref. QA-2335 and QA-5329]

Port [port, portIn, portOut]

You can added port with port, portinand portout keywords.

Port

@startuml
[c]
node node {
  port p1
  port p2
  port p3
  file f1
}

c --> p1
c --> p2
c --> p3
p1 --> f1
p2 --> f1
@enduml

PortIn

@startuml
[c]
node node {
  portin p1
  portin p2
  portin p3
  file f1
}

c --> p1
c --> p2
c --> p3
p1 --> f1
p2 --> f1
@enduml

PortOut

@startuml
node node {
  portout p1
  portout p2
  portout p3
  file f1
}
[o]
p1 --> o
p2 --> o
p3 --> o
f1 --> p1
@enduml

Mixing PortIn & PortOut

@startuml
[i]
node node {
  portin p1
  portin p2
  portin p3
  portout po1
  portout po2
  portout po3
  file f1
}
[o]

i --> p1
i --> p2
i --> p3
p1 --> f1
p2 --> f1
po1 --> o
po2 --> o
po3 --> o
f1 --> po1
@enduml

Change diagram orientation

You can change (whole) diagram orientation with:
  • top to bottom direction (by default)
  • left to right direction

Top to bottom (by default)

With Graphviz (layout engine by default)

The main rule is: Nested element first, then simple element. 

@startuml
card a
card b
package A {
  card a1
  card a2
  card a3
  card a4
  card a5
  package sub_a {
   card sa1
   card sa2
   card sa3
  }
}
  
package B {
  card b1
  card b2
  card b3
  card b4
  card b5
  package sub_b {
   card sb1
   card sb2
   card sb3
  }
}
@enduml

With Smetana (internal layout engine)

The main rule is the opposite: Simple element first, then nested element. 

@startuml
!pragma layout smetana
card a
card b
package A {
  card a1
  card a2
  card a3
  card a4
  card a5
  package sub_a {
   card sa1
   card sa2
   card sa3
  }
}
  
package B {
  card b1
  card b2
  card b3
  card b4
  card b5
  package sub_b {
   card sb1
   card sb2
   card sb3
  }
}
@enduml

Left to right

With Graphviz (layout engine by default)

@startuml
left to right direction
card a
card b
package A {
  card a1
  card a2
  card a3
  card a4
  card a5
  package sub_a {
   card sa1
   card sa2
   card sa3
  }
}
  
package B {
  card b1
  card b2
  card b3
  card b4
  card b5
  package sub_b {
   card sb1
   card sb2
   card sb3
  }
}
@enduml

With Smetana (internal layout engine)

@startuml
!pragma layout smetana
left to right direction
card a
card b
package A {
  card a1
  card a2
  card a3
  card a4
  card a5
  package sub_a {
   card sa1
   card sa2
   card sa3
  }
}
  
package B {
  card b1
  card b2
  card b3
  card b4
  card b5
  package sub_b {
   card sb1
   card sb2
   card sb3
  }
}
@enduml

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