PlantUML コンポーネント図によるGitリポジトリ構成の記述例

Visual Studio Code 用の PlantUML のエクステンションで、コンポーネント図を作図する構文を使って、テキストから Git の複数のリポジトリの構成の図を作成する例を紹介します。
文言などは不正確かもしれませんが、 PlantUML のテキストでコンポーネント図を記述する雰囲気が伝われば幸いです。

※ Visual Studio Code のバージョンは 1.103.0 です。
※ PlantUML エクステンションのバージョンは 2.18.1 です。

コンポーネント図とは

コンポーネント図では、モジュールなどの部品間の依存関係などを表現します。

統一モデリング言語 (UML) におけるコンポーネント図（コンポーネントず）は、実装しようとするソフトウェアシステムやモジュール等の構造の概要の図で、コンポーネント（部品）とそのインターフェース、それらの依存関係などを表現する。

コンポーネント図 – Wikipedia

PlantUML の導入

Visual Studio Code へ PlantUML のエクステンションを導入する手順については以下の記事を参照してください。

VisualStudioCode PlantUML エクステンションの導入

テキストでUMLやマインドマップなどを作図できるPlantUMLのエクステンションを Visual Studio Code にインストールして、サンプルのテキストから図を表示する動作確認までの手順を紹介します。PlantUML エクステンションを動作させるには Java, GraphViz のインストールが必要です。

compota-soft.work

2025.12.21

作成した plantuml スクリプトと生成画像

以下は、コンポーネント図を生成するもとになる PlantUML のコンポーネント図を生成する構文を用いたスクリプトの例です。
※ ‘ から始まる行はコメントです。

@startuml

' <<for use>> のリポジトリは、class_name を持ち、その内部のスクリプトやシーンなどのリソースに
' ファイル位置を意識せずにアクセスできます。

package "ScLibProject" {
    component [sc_util_dev] <<for development>>
    component [sc_util] <<for use>>

    component [sc_fit_font_size_dev] <<for development>>
    component [sc_fit_font_size] <<for use>>

    component [sc_lib] <<for use>>
}

[sc_util_dev] --> [sc_util] : plan, tests, examples

[sc_fit_font_size_dev] --> [sc_fit_font_size] : plan, tests, examples
[sc_fit_font_size] --> [sc_util] : uses

[sc_lib] --> [sc_util] : wraps

note top of [sc_lib] : class_name ScUtil から \nsc_util Git リポジトリのスクリプト\nにアクセス可能にします。

@enduml

上記の PlantUML の構文のスクリプトを Visual Studio Code に新規ファイルで入力して、 .plantuml 形式などで保存します。
拡張子は以下がサポートされています。

Supported Formats

*.wsd, *.pu, *.puml, *.plantuml, *.iuml

PlantUML – Visual Studio Marketplace

右上の「Preview Current Diagram」ボタンを押すとプレビュータブが追加され、その中にコンポーネント図が表示されます。
※コンポーネント図の生成が始まるまで数秒かかる場合があります。

先ほどの .plantuml 拡張子のテキストファイルから、以下のコンポーネント図が作成されました。

プレビュータブの生成画像の保存については以下の記事を参照してください。

https://compota-soft.work/wp1/wp-admin/post.php?post=58602&action=edit

使用したキーワードの説明

以降は、用いた各キーワードについて紹介します。

package

{} 内のコンポーネントをグループ化したパッケージを定義します。

component

依存関係などを持つコンポーネントを定義します。
名前のあとに : << text >> を追記することでステレオタイプを上部に記述できます。
※ text の部分には任意のテキストをいれてください。

自分の言葉で UML のステレオタイプを３行でまとめると次のとおりです。

• 表現を補足するための拡張表現​
• なにを書いてもいい​
• なにを書いてもいいけどオレオレ目線で書くと混乱の元になるのでチームやプロジェクトの共通表現で書く

UML のステレオタイプの使い方について #オブジェクト指向 – Qiita

–>

左辺のコンポーネントから右辺のコンポーネントへ向けた矢印を描画して、依存関係を表します。
そのあとに : から始まる文章を入れることで、依存関係の説明を矢印の近くに記述できます。

note

指定したコンポーネントに対して、指定した方向に注釈文を追加します。

コンポーネント図の構文についての詳細は「コンポーネント図の構文と機能」を参照してください。

まとめ

• Visual Studio Code 用の PlantUML のエクステンションで、テキストから UML のコンポーネント図を作成できる。
• コンポーネント図では、モジュールなどの部品間の依存関係などを表すことができる。
• コンポーネントや依存関係の矢印には、ステレオタイプや、説明を追記できる。
• コンポーネントには注釈文を方向を指定して追加できる。

参照サイト Thank You!

• シンプルなテキストファイルで UML が書ける、オープンソースのツール
• PlantUML – Visual Studio Marketplace
• コンポーネント図の構文と機能
• コンポーネント図 – Wikipedia
• UML のステレオタイプの使い方について #オブジェクト指向 – Qiita
• Visual Studio Code – Code Editing. Redefined

記事一覧 → Compota-Soft-Press