Skip to main content

コンポーネント図

(Component Diagram)

サンプル​

@startuml
[データベース] as DB
[バックエンド] as BE
[フロントエンド] as FE

FE --> BE : HTTPリクエスト
BE --> DB : SQLクエリ
@enduml
PlantUML diagram

全体の設定​

タイトル​

タイトルを定義できます。

title 新基盤構築計画
PlantUML diagram

ヘッダ​

ヘッダを定義できます。

header 新基盤構築計画
PlantUML diagram

フッタ​

フッタを定義できます。

footer フッタ
PlantUML diagram

キャプション​

キャプションを定義できます。

caption キャプション
PlantUML diagram

すべて組み合わせると...​

PlantUML diagram

コンポーネント​

[]で囲むか、componentに続けてコンポーネント名を記載する事でコンポーネントを定義できます。

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

インターフェース​

(インターフェース名)
PlantUML diagram

パッケージ​

これはクラス図のパッケージと同じ記載になっていますね・・・。

package "パッケージ名"
PlantUML diagram

パッケージにコンポーネント又はインターフェースを定義する場合​

package "パッケージ名" {
    [コンポーネント名]
    (インターフェース名)
}
PlantUML diagram

コンポーネント間の関係​

[コンポーネントＡ] --> [コンポーネントＢ]
PlantUML diagram
[コンポーネントＡ] ..> [コンポーネントＢ]
PlantUML diagram

コンポーネントとインターフェイスの関係​

[コンポーネントＡ] -- (インターフェイスＡ)
PlantUML diagram

位置調整​

上​

[コンポーネント] .u.> [コンポーネントUP]
PlantUML diagram

下​

[コンポーネント] .d.> [コンポーネントDOWN]
PlantUML diagram

左​

[コンポーネント] .l.> [コンポーネントLEFT]
PlantUML diagram

右​

[コンポーネント] .r.> [コンポーネントRIGHT]
PlantUML diagram

ノート​

左側​

note left : ノート
PlantUML diagram

右側​

note right : ノート
PlantUML diagram

上側​

note top : ノート
PlantUML diagram

下側​

note bottom : ノート
PlantUML diagram

複数行の場合​

この機能は、ノートを右側に配置する場合、左側に配置する場合、上側に配置する場合、下側に配置する場合でも使用できます。
尚、このサイトでは右側のみ紹介しています。

note right
クラスの右側に注釈１
クラスの右側に注釈２
end note
PlantUML diagram

行コメント​

'から始まる行は行コメントとして扱われます。

ブロックコメント​

/*から*/まではブロックコメントとして扱われます。

warning

注意: ただし、行頭以外に/*を置いた場合にブロックコメントとして認識されないようです。
また行の途中で*/を記載してもその行の最後までブロックコメントとして処理されるようです。

参照​

(https://niyanmemo.com/5186/)[https://niyanmemo.com/5186/]

(http://yohshiy.blog.fc2.com/blog-entry-158.html)[http://yohshiy.blog.fc2.com/blog-entry-158.html]