PlantUML - コンポーネント図

PlantUML でのコンポーネント図の記法についての解説です。

コンポーネント図は、コンポーネント間の依存関係を把握するための図であり、 クラス図を特化したもの です。
PlantUML でも クラス図 や ユースケース図 とほとんど同じように書けます。 解説もクラス図やユースケース図など他のダイアグラムの記法と同じところは省略しています。

1. コンポーネント
2. インターフェース
3. 関係
4. 配置図
5. 参考

@startuml{plantuml_compo_sample.png}
title <size:18>コンポーネント図のサンプル</size>

component 発注管理システム as sys
sys .> [在庫管理システム]
sys ..> [顧客管理システム]
component [発注管理 DB] as db <<Database>>
sys ...> db

@enduml

コンポーネント

コンポーネントは [ ] または component キーワードで記述します。

[コンポーネント名]
component コンポーネント名

@startuml{plantuml_compo_define.png}

[First component]
[コンポーネント] as Comp2  
component Comp3
component [Last\ncomponent] <<Foo>>

@enduml

PlantUML では [ ] や component などの定義でコンポーネント図と判断します。

なお、 コンポーネントを UML 2.0 のスタイルで書きたい場合は skinparam のページを見てください。

インターフェース

インターフェースの場合は次の形式となります。

() インターフェース名
interface インターフェース名

@startuml{plantuml_compo_interface.png}

() "First Interface"
() "インターフェース" as Interf2
interface Interf3
interface "Last\ninterface" <<Foo>>

@enduml

関係

コンポーネント間の関係を記述は次の形式で記述します。

コンポーネント名 -- コンポーネント名 [: ラベル]

コンポーネント間を結ぶ線には --(実線) 以外にも ..(破線)、 ..>(破線矢印) などが使えます。

関係の記述で書いたコンポーネント、 インターフェースは前述の定義がなくても自動的に作成されます。
また、 [ ], () を省略した場合、 関係の場合はインターフェース、 独立している場合はコンポーネントとなります。

@startuml{plantuml_compo_relation.png}

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

コンポーネント <<Test>>
' [] を省略した場合、ステレオタイプを
' つけていないと解析エラー

@enduml

配置図

配置図はシステムのハードウェア構成などを図式化したものです。
PlantUML では配置図のとしては用意されていませんが、 コンポーネント図でパッケージも使えるので、近いものは作成できます。

@startuml{plantuml_compo_deployment.png}

package "クライアント PC" <<Node>> {
    [勤怠入力]
}
 
package "サーバー" <<Node>> {
    [勤怠入力] - [CGI] : <<HTTP>>
} 

package "データベース" <<Database>> {
    [CGI] ..> [DB]
}
@enduml

なお、パッケージスタイルは skinparam を使って指定することもできます。

参考

このページの記述には以下のサイトを参考にさせていただきました。

• PlantUML の本家のページ
• - UML 超入門_第 2 章
• UML - 実装図(コンポーネント図 / 配置図)