messyなkitchenなブログ

ただひたすらに散らかった台所や人生やその他を晒す。

MENU

コンポーネント図を描いてみる @PlantUML [脱W〇rd, 脱E×cel, 脱＠st＠h : #13]

PlantUML

今年も残り1箇月ですね

昨年は同じくらいの時期に、その年の目標を考えたものだ・・・

今年もそろそろ、今年の目標を立てよう・・・！

そして何の前触れもなしに、今回はコンポーネント図を描いてみることにした

その1

f:id:messykitchen:20201130221402p:plain
コンポーネント図 1

こんな感じですかね。

で表現してます。

図のソースコードはこちら（クリックすると展開されます）

@startuml

actor おいら as oira
actor だれか as dareka #black

' コンポーネントの定義  component or [ ] で定義する。
[Bank]
' インターフェースの定義  interface or () で定義する。
() 入金 as deposit
() 出金 as withdrawal

deposit - Bank
oira -( deposit : 養育費を\n入金する

Bank - withdrawal
withdrawal )- dareka : 引き出す

@enduml

その2

次のような「ロリポップ」と「ソケット」が離れている図を見かけました。

f:id:messykitchen:20201130221939p:plain
ウェブで見つけたコンポーネント図
（参照: https://www.itmedia.co.jp/im/articles/0502/02/news110.html

このような図の場合、工夫すれば何とか描けるかな。ためしてみました。

準備1

ダミーのインターフェースを追加しました。

f:id:messykitchen:20201130222339p:plain
コンポーネント図 2 (途中)

図のソースコードはこちら（クリックすると展開されます）

@startuml

actor おいら as oira
actor だれか as dareka #black

' コンポーネントの定義  component or [ ] で定義する。
[Bank]
' インターフェースの定義  interface or () で定義する。
() 入金 as deposit
() 出金 as withdrawal
() dummy1   /' ★追加 '/

deposit - Bank
oira -( deposit : 養育費を\n入金する

Bank - withdrawal
withdrawal <. dummy1
dummy1 )- dareka : 引き出す

@enduml

準備2

追加したインターフェースに、ステレオタイプ を定義しました。
ここでは <<hidden>> という名称。

f:id:messykitchen:20201130222713p:plain
コンポーネント図 3 (途中)

図のソースコードはこちら（クリックすると展開されます）

@startuml

actor おいら as oira
actor だれか as dareka #black

' コンポーネントの定義  component or [ ] で定義する。
[Bank]
' インターフェースの定義  interface or () で定義する。
() 入金 as deposit
() 出金 as withdrawal
() dummy1 <<hidden>>  /' ★ステレオタイプを追加 '/

deposit - Bank
oira -( deposit : 養育費を\n入金する

Bank - withdrawal
withdrawal <. dummy1
dummy1 )- dareka : 引き出す

@enduml

仕上げ

skinparam コマンドで、対象のインターフェースに対しての書式を定義します。

  • 対象エレメント interface
  • 対象プロパティ <<hidden>>
    • BorderColor BackgroundColor FontColor → 背景色と同じ #white にする。

ついでに、見た目をすっきりさせるために、インターフェースの影も表示しないようにします。

  • 対象エレメント interface
  • 対象プロパティ (共通)
    • Shadowing → false

最後に、ステレオタイプ <<hidden>> を非表示にします。 （hide <<hidden>> stereotype）

上記の定義をおこなうと、見た目、不要な表示なされなくなり、 「ロリポップ」と「ソケット」の間を広げて矢印で結ぶことができました。

f:id:messykitchen:20201130222918p:plain
コンポーネント図 4

図のソースコードはこちら（クリックすると展開されます）

@startuml

actor おいら as oira
actor だれか as dareka #black

' コンポーネントの定義  component or [ ] で定義する。
[Bank]
' インターフェースの定義  interface or () で定義する。
() 入金 as deposit
() 出金 as withdrawal
() dummy1 <<hidden>>  /' ★ステレオタイプを追加 '/

deposit - Bank
oira -( deposit : 養育費を\n入金する

Bank - withdrawal
withdrawal <. dummy1
dummy1 )- dareka : 引き出す

' インターフェースの見た目を設定する。
skinparam interface {
    Shadowing false
    BorderColor<<hidden>> #white
    BackgroundColor<<hidden>> #white
    FontColor<<hidden>> #white
}
' 任意のステレオタイプの表示を消す。
hide <<hidden>> stereotype

@enduml

他のやり方で、かんたんにできるといいのですけど。
今のところ僕は知らない。