[テキストで簡単作図] PlantUMLでコンポーネント図を簡単に作成！

コンポーネント図はシステムの構造や依存関係を表現する重要なUML図の1つです。PlantUMLを使えば、テキストベースで簡単にコンポーネント図が作成できます。

PlantUMLとは？

PlantUMLは、シンプルなテキスト記述でUMLダイアグラムやフローチャートを作成できるツールです。 専用の構文を覚える必要はありますが、一度慣れてしまえば、GUIツールよりも素早く、そして美しくフローチャートを描けるようになります。 バージョン管理システムとの相性も抜群で、テキストベースなので変更履歴の追跡も簡単です。

UML・PlantUMLや、VSCode環境への導入方法等は以下にまとめていますので、こちらを参照ください。

基本的なコンポーネントの定義

コンポーネントは2つの方法で定義できます:角括弧による定義:

@startuml
[First component]
@enduml

componentキーワードによる定義:

@startuml
component SecondComponent
@enduml

コンポーネント間の関係

コンポーネント間の関係は矢印で表現できます:

@startuml
[ComponentA] --> [ComponentB]
[ComponentC] ..> [ComponentD]: 依存関係
[ComponentE] --> [ComponentF]: 実線矢印
[ComponentG] ..> [ComponentH]: 破線矢印
@enduml

インターフェースの定義

インターフェースは丸括弧またはinterfaceキーワードで定義します:

@startuml
' インターフェースの定義
() "Interface1"
interface Interface2

' コンポーネントの定義
[Component1]
[Component2]

' コンポーネントとインターフェースの接続
[Component1] -- () "Interface1"
[Component2] -- Interface2
@enduml

パッケージの利用

コンポーネントをグループ化するためにパッケージを使用できます:

@startuml
package "Frontend" {
    [WebPortal]
    [UserInterface]
}

package "Backend" {
    [API]
    [Database]
}

[WebPortal] --> [API]
[API] --> [Database]
@enduml

ポートとインターフェース

システムの外部とのインタラクションポイントを示すポートを定義できます:

@startuml
[Component]
interface "Port1" as P1
interface "Port2" as P2
[Component] -- P1
[Component] -- P2

[ExternalSystem1] --> P1
[ExternalSystem2] --> P2
@enduml

ステレオタイプの使用

コンポーネントに追加情報を付与するためのステレオタイプを指定できます:

@startuml
[Component1] <<Database>>
component [WebService] <<Service>>
component [Controller] <<Controller>>

[WebService] --> [Controller]
[Controller] --> [Component1]
@enduml

カラーとスタイルの適用

コンポーネントの見た目をカスタマイズできます:

@startuml
skinparam component {
    BackgroundColor LightSkyBlue
    BorderColor Black
    ArrowColor DarkBlue
}

[ComponentA] #Pink
[ComponentB] #LightGreen
[ComponentA] --> [ComponentB]
@enduml

まとめ

PlantUMLを使用することで、テキストベースでコンポーネント図を簡単に作成できます。基本的なコンポーネントの定義から、関係性の表現、パッケージによるグループ化まで、システムの構造を分かりやすく表現することができます。上記のコードをコピーしてVSCodeなどのエディタに貼り付けることで、すぐに使い始めることができます。

参考情報

ER図についてより詳細や機能については、以下を参照ください。
https://plantuml.com/ja-dark/component-diagram

この記事が、あなたの役に立てば幸いです！