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


コンポーネント図

Component Diagram

いくつかの例をご覧ください。

Let's have few examples.

コンポーネント

Components

コンポーネントは括弧でくくります。

また、 component キーワードでもコンポーネントを定義できます。 そして、コンポーネントには as キーワードにより別名をつけることができます。 この別名は、後でリレーションを定義するときに使えます。

@startuml

[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4

@enduml

Components must be bracketed.

You can also use the component keyword to define a component. And you can define an alias, using the as keyword. This alias will be used later, when defining relations.

@startuml

[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4

@enduml

インタフェース

Interfaces

インタフェースは丸括弧 () でシンボルを囲うことで定義できます。 (何故なら見た目が丸いからです。)

もちろん interface キーワードを使って定義することもできます。 as キーワードでエイリアスを定義できます。 このエイリアスは後で、関係を定義する時に使えます。

後で説明されますが、インタフェースの定義は省略可能です。

@startuml

() "First Interface"
() "Another interface" as Interf2
interface Interf3
interface "Last\ninterface" as Interf4

[component]
footer //Adding "component" to force diagram to be a **component diagram**//
@enduml

Interface can be defined using the () symbol (because this looks like a circle).

You can also use the interface keyword to define an interface. And you can define an alias, using the as keyword. This alias will be used latter, when defining relations.

We will see latter that interface definition is optional.

@startuml

() "First Interface"
() "Another interface" as Interf2
interface Interf3
interface "Last\ninterface" as Interf4

[component]
footer //Adding "component" to force diagram to be a **component diagram**//
@enduml

基本的な例

Basic example

要素間の関係は、破線 (..)、直線 (--), 矢印 (-->) の組合せで構成されます。

@startuml

DataAccess - [First Component]
[First Component] ..> HTTP : use

@enduml

Links between elements are made using combinations of dotted line (..), straight line (--), and arrows (-->) symbols.

@startuml

DataAccess - [First Component]
[First Component] ..> HTTP : use

@enduml

ノートの使用方法

Using notes

オブジェクトに関連のあるノートを作成するにはnote left ofnote right ofnote top ofnote bottom of キーワードを使います。

@startuml
[Component] as C

note top of C: A top note

note bottom of C
  A bottom note can also
  be on several lines
end note

note left of C
  A left note can also
  be on several lines
end note

note right of C: A right note
@enduml

または note キーワードを使ってノートを作成し、.. 記号(または任意の矢印記号(---、...))を使ってオブジェクトに紐づけることができます。

@startuml
[Component] as C

note as N
  A floating note can also
  be on several lines
end note

C .. N
@enduml

別の例:

@startuml

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

note left of HTTP : Web Service only

note right of [First Component]
  A note can also
  be on several lines
end note

@enduml

You can use the note left of , note right of , note top of , note bottom of keywords to define notes related to a single object.

@startuml
[Component] as C

note top of C: A top note

note bottom of C
  A bottom note can also
  be on several lines
end note

note left of C
  A left note can also
  be on several lines
end note

note right of C: A right note
@enduml

A note can be also defined alone with the note keywords, then linked to other objects using the .. symbol or whatever arrow symbol (-, --, ...).

@startuml
[Component] as C

note as N
  A floating note can also
  be on several lines
end note

C .. N
@enduml

Another note example:

@startuml

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

note left of HTTP : Web Service only

note right of [First Component]
  A note can also
  be on several lines
end note

@enduml

コンポーネントのグループ化

Grouping Components

いくつかのキーワードをグループコンポーネントやインタフェースに使用することができます:
  • package
  • node
  • folder
  • frame
  • cloud
  • database

@startuml

package "Some Group" {
  HTTP - [First Component]
  [Another Component]
}

node "Other Groups" {
  FTP - [Second Component]
  [First Component] --> FTP
}

cloud {
  [Example 1]
}


database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}


[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

@enduml

You can use several keywords to group components and interfaces together:
  • package
  • node
  • folder
  • frame
  • cloud
  • database

@startuml

package "Some Group" {
  HTTP - [First Component]
  [Another Component]
}

node "Other Groups" {
  FTP - [Second Component]
  [First Component] --> FTP
}

cloud {
  [Example 1]
}


database "MySql" {
  folder "This is my folder" {
    [Folder 3]
  }
  frame "Foo" {
    [Frame 4]
  }
}


[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]

@enduml

矢印の方向を変える

Changing arrows direction

デフォルトではクラス間のリンクは 2 つのダッシュ -- を持っており垂直方向に配向されています。 次のように単一のダッシュ(またはドット)を置くことによって水平方向のリンクを使用することが可能です:

@startuml
[Component] --> Interface1
[Component] -> Interface2
@enduml

リンクを反対にすることで方向を変更することもできます。

@startuml
Interface1 <-- [Component]
Interface2 <- [Component]
@enduml

また、 left を加えることで矢印の向きを変更することもできます。 right, up, down などのキーワードを矢印の間に記述します。:

@startuml
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml

方向の最初の文字のみを使用して矢印を短くすることができます(例えば、-down- の代わりに-d-)、または最初の 2 文字(-do-)。

この機能を悪用してはならないことに注意してください:Graphviz は微調整の必要がない良い結果を通常は与えてくれます。

left to right directionパラメータを指定した場合は、次のようになります。:

@startuml
left to right direction
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml

By default, links between classes have two dashes -- and are vertically oriented. It is possible to use horizontal link by putting a single dash (or dot) like this:

@startuml
[Component] --> Interface1
[Component] -> Interface2
@enduml

You can also change directions by reversing the link:

@startuml
Interface1 <-- [Component]
Interface2 <- [Component]
@enduml

It is also possible to change arrow direction by adding left, right, up or down keywords inside the arrow:

@startuml
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml

You can shorten the arrow by using only the first character of the direction (for example, -d- instead of -down-) or the two first characters (-do-).

Please note that you should not abuse this functionality : Graphviz gives usually good results without tweaking.

And with the left to right direction parameter:

@startuml
left to right direction
[Component] -left-> left
[Component] -right-> right
[Component] -up-> up
[Component] -down-> down
@enduml

UML2 表記の使用

Use UML2 notation

デフォルトでは、UML2表記が使用されます(v1.2020.13-14以降)

@startuml

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

@enduml

By default (from v1.2020.13-14), UML2 notation is used.

@startuml

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

@enduml

UML1 表記の使用

Use UML1 notation

コマンド skinparam componentStyle uml1 は、UML1 表記に切り替えるために使用されます。

@startuml
skinparam componentStyle uml1

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

@enduml

The skinparam componentStyle uml1 command is used to switch to UML1 notation.

@startuml
skinparam componentStyle uml1

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

@enduml

四角形表記の使用(UML表記をしない)

Use rectangle notation (remove UML notation)

skinparam componentStyle rectangleコマンドを使用すると、UML表記ではなく四角形による表記を行うことができます。

@startuml
skinparam componentStyle rectangle

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

@enduml

The skinparam componentStyle rectangle command is used to switch to rectangle notation (without any UML notation).

@startuml
skinparam componentStyle rectangle

interface "Data Access" as DA

DA - [First Component]
[First Component] ..> HTTP : use

@enduml

長い説明

Long description

角括弧を使用して説明を複数行で記述することができます。

@startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml

It is possible to put description on several lines using square brackets.

@startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml

個々の色

Individual colors

コンポーネント定義のあとに色を指定することができます。

@startuml
component  [Web Server] #Yellow
@enduml

You can specify a color after component definition.

@startuml
component  [Web Server] #Yellow
@enduml

ステレオタイプでスプライトを使用

Using Sprite in Stereotype

ステレオタイプのコンポーネント内にスプライトを使用することができます。

@startuml
sprite $businessProcess [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}


rectangle " End to End\nbusiness process" <<$businessProcess>> {
 rectangle "inner process 1" <<$businessProcess>> as src
 rectangle "inner process 2" <<$businessProcess>> as tgt
 src -> tgt
}
@enduml

You can use sprites within stereotype components.

@startuml
sprite $businessProcess [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}


rectangle " End to End\nbusiness process" <<$businessProcess>> {
 rectangle "inner process 1" <<$businessProcess>> as src
 rectangle "inner process 2" <<$businessProcess>> as tgt
 src -> tgt
}
@enduml

見かけを変える

Skinparam

ダイアグラムの色やフォントを変更するには skinparam コマンドを使用します。

このコマンドは以下の場面で使用できます。

ステレオタイプのコンポーネントおよびインタフェースのための特定の色とフォントを定義することができます。

@startuml

skinparam interface {
  backgroundColor RosyBrown
  borderColor orange
}

skinparam component {
  FontSize 13
  BackgroundColor<<Apache>> Pink
  BorderColor<<Apache>> #FF6655
  FontName Courier
  BorderColor black
  BackgroundColor gold
  ArrowFontName Impact
  ArrowColor #FF6655
  ArrowFontColor #777777
}

() "Data Access" as DA
Component "Web Server" as WS << Apache >>

DA - [First Component]
[First Component] ..> () HTTP : use
HTTP - WS

@enduml

@startuml
[AA] <<static lib>>
[BB] <<shared lib>>
[CC] <<static lib>>

node node1
node node2 <<shared node>>
database Production

skinparam component {
    backgroundColor<<static lib>> DarkKhaki
    backgroundColor<<shared lib>> Green
}

skinparam node {
borderColor Green
backgroundColor Yellow
backgroundColor<<shared node>> Magenta
}
skinparam databaseBackgroundColor Aqua

@enduml

You can use the skinparam command to change colors and fonts for the drawing.

You can use this command :

You can define specific color and fonts for stereotyped components and interfaces.

@startuml

skinparam interface {
  backgroundColor RosyBrown
  borderColor orange
}

skinparam component {
  FontSize 13
  BackgroundColor<<Apache>> Pink
  BorderColor<<Apache>> #FF6655
  FontName Courier
  BorderColor black
  BackgroundColor gold
  ArrowFontName Impact
  ArrowColor #FF6655
  ArrowFontColor #777777
}

() "Data Access" as DA
Component "Web Server" as WS << Apache >>

DA - [First Component]
[First Component] ..> () HTTP : use
HTTP - WS

@enduml

@startuml
[AA] <<static lib>>
[BB] <<shared lib>>
[CC] <<static lib>>

node node1
node node2 <<shared node>>
database Production

skinparam component {
    backgroundColor<<static lib>> DarkKhaki
    backgroundColor<<shared lib>> Green
}

skinparam node {
borderColor Green
backgroundColor Yellow
backgroundColor<<shared node>> Magenta
}
skinparam databaseBackgroundColor Aqua

@enduml

特有のskinparam

Specific SkinParameter

componentStyle

  • デフォルトで(もしくはskinparam componentStyle uml2を指定することで)、コンポーネントにはアイコンが表示されます。

@startuml
skinparam BackgroundColor transparent
skinparam componentStyle uml2
component A {
   component "A.1" {
}
   component A.44 {
      [A4.1]
}
   component "A.2"
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]->[b]
@enduml

  • これを非表示にして四角形だけを表示するには、skinparam componentStyle rectangleを指定します。

@startuml
skinparam BackgroundColor transparent
skinparam componentStyle rectangle
component A {
   component "A.1" {
}
   component A.44 {
      [A4.1]
}
   component "A.2"
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]->[b]
@enduml

[Ref. 10798]

componentStyle

  • By default (or with skinparam componentStyle uml2), you have an icon for component

@startuml
skinparam BackgroundColor transparent
skinparam componentStyle uml2
component A {
   component "A.1" {
}
   component A.44 {
      [A4.1]
}
   component "A.2"
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]->[b]
@enduml

  • If you want to suppress it, and to have only the rectangle, you can use skinparam componentStyle rectangle

@startuml
skinparam BackgroundColor transparent
skinparam componentStyle rectangle
component A {
   component "A.1" {
}
   component A.44 {
      [A4.1]
}
   component "A.2"
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]->[b]
@enduml

[Ref. 10798]

孤立したコンポーネントを非表示または削除する

Hide or Remove unlinked component

デフォルトでは、すべてのコンポーネントが表示されます:

@startuml
component C1
component C2
component C3
C1 -- C2
@enduml

  • しかし、hide @unlinkedで、孤立したコンポーネントを非表示にできます:

@startuml
component C1
component C2
component C3
C1 -- C2

hide @unlinked
@enduml

  • もしくは、remove @unlinkedで、孤立したコンポーネントを削除できます:

@startuml
component C1
component C2
component C3
C1 -- C2

remove @unlinked
@enduml

[Ref. QA-11052]

By default, all components are displayed:

@startuml
component C1
component C2
component C3
C1 -- C2
@enduml

But you can:
  • hide @unlinked components:

@startuml
component C1
component C2
component C3
C1 -- C2

hide @unlinked
@enduml

  • or remove @unlinked components:

@startuml
component C1
component C2
component C3
C1 -- C2

remove @unlinked
@enduml

[Ref. QA-11052]

タグ付け、またはワイルドカードによるコンポーネントの非表示、削除、復元

Hide, Remove or Restore tagged component or wildcard

$を使って、コンポーネントにタグ付けすることができます。それから、コンポーネント個別、またはタグごとに、非表示(hide)、削除(remove)、復元(restore)を指定することができます。

デフォルトでは、すべてのコンポーネントが表示されます:

@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml

次のような指定が可能です:
  • $tag13のコンポーネントを非表示にする:

@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

hide $tag13
@enduml

  • $tag13のコンポーネントを削除する:

@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

remove $tag13
@enduml

  • $tag13のコンポーネントを削除するが$tag1は表示する:

@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove $tag13
restore $tag1
@enduml

  • *(すべてのコンポーネント)を削除するが$tag1は表示する:

@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove *
restore $tag1
@enduml

[Ref. QA-7337 and QA-11052]

You can put $tags (using $) on components, then remove, hide or restore components either individually or by tags.

By default, all components are displayed:

@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml

But you can:
  • hide $tag13 components:

@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

hide $tag13
@enduml

  • or remove $tag13 components:

@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

remove $tag13
@enduml

  • or remove $tag13 and restore $tag1 components:

@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove $tag13
restore $tag1
@enduml

  • or remove * and restore $tag1 components:

@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove *
restore $tag1
@enduml

[Ref. QA-7337 and QA-11052]


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