コンポーネント図はシステムの構造や依存関係を表現する重要な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
この記事が、あなたの役に立てば幸いです!
コメント