PlantUMLで手軽にUML図を作成する

UML図とは
PlantUMLとは
PlantUMLの使用例
UMLをテキストで記述できるメリット
- Gitのバージョン管理がしやすい
- 生成AIを活用できる
まとめ

こんにちは、個人ブログ「TechJourney」を運営しているkoimaiです！

私は情報系の大学に通っており、講義でシステム構造設計書を書く機会がありました。その際に、シーケンス図を作成するのが非常に手間だったため、もっと簡単に作成できる方法はないかと調べました。

すると、「PlantUML」という、テキストからUML図を作成できるツールを見つけて、その便利さに感動しました。

今回は、その経験をもとにPlantUMLの魅力について紹介します。

UML図とは

UML（Unified Modeling Language）とは、オブジェクト指向のシステムを視覚的に表現するための標準言語のこと。

UMLは、システム開発において重要な役割を果たし、システムの構造や振る舞いを明確にするために使用される。

以下に、UML図の主な種類を紹介します。

クラス図（Class Diagram）
- システムの静的構造を表現する
- クラス、属性、メソッド、およびクラス間の関係を示す
- 主に、システムの設計やデータベース設計に使用される
シーケンス図（Sequence Diagram）
- システム内のオブジェクト間でのメッセージ交換のタイミングと順序を表現する
- オブジェクト同士のやり取りやプロセスの流れを視覚化する
- 主に、システムの動的な振る舞いやプロセスの理解に使用される
ユースケース図（Use Case Diagram）
- システムの機能をユーザー視点で表現する
- アクター（ユーザーや他のシステム）とユースケース（システムの機能）を示す
- 主に、システムの要件定義や機能の範囲を明確にするために使用される

UML図を使用することで、システムの複雑な動作を視覚的に理解しやすくなり、開発チーム間のコミュニケーションが円滑にできる。

また、設計ミスや誤解を減らすことで、プロジェクトの品質向上に寄与する。

次に、それらを簡単に作成できるツールであるPlantUMLについて説明します。

PlantUMLとは

PlantUMLは、テキスト記述からUML図を自動生成するオープンソースのツールです。

シンプルな記法で、クラス図やシーケンス図などを描画できるため、設計やドキュメント作成の効率を大幅に向上させます。

ここでは、PlantUMLの基本的な使用方法を紹介します。まず、PlantUMLを使用するために必要な準備としてJavaのインストールとVSCOdeの拡張機能の導入方法について説明します。

Javaのインストール

すでにお使いのPCにJavaがインストールされていれば、このステップはとばしてください。

公式サイトから最新のJava Development Kit（JDK）をダウンロードをします。

ダウンロードしたインストーラを実行して、指示に従ってインストールを完了してください。

Javaのインストール確認

コマンドプロンプトやターミナルを開き、以下のコマンドを入力してJavaが正しくインストールされていることを確認しましょう。

java --version

正常にインストールされていれば、Javaのバージョン情報が表示されます。

Graphvizのインストール

Graphvizは、シーケンス図には不要ですが、ユースケース図やクラス図などの特定の図を描画するために必要です。

MacOSの場合は、Homebrewでインストールすることができます。

brew install graphviz

VSCodeの拡張機能でPlantUMLを使用

PlantUMLを使用する方法として、公式サイトからダウンロードしてくる、Dockerを利用して仮想環境で用意するなど複数ありますが、VSCodeの拡張機能が一番便利です。

VSCodeを起動して、拡張機能で「PlantUML」を検索をして、PlantUMLをインストールしてください。

以上の操作で、VSCodeで使用できるようになりました。

PlantUMLの使用例

PlantUMLを使うことで、さまざまなUML図を簡単に作成できます。

ここでは、アプリケーション開発においてよく考えられるシーケンス図、ユースケース図、クラス図の具体例を紹介します。

シーケンス図における使用例

シーケンス図は、システム内のオブジェクト間でのメッセージ交換のタイミングと順序を表現します。

以下は、ユーザーがログインするプロセスのシーケンス図の例です。

@startuml login_sequence
actor User
User -> LoginPage: ログインページを開く
User -> LoginForm: 資格情報を入力する
LoginForm -> AuthService: 資格情報を検証する
AuthService -> Database: ユーザーデータを照会する
Database --> AuthService: ユーザーデータを返す
AuthService --> LoginForm: 認証結果を返す
LoginForm --> User: ログイン結果を表示する
@enduml

このシーケンス図は、ユーザーがログインページを開き、資格情報を入力し、認証サービスがデータベースと通信してユーザーを認証するプロセスを表しています。

ユースケース図における使用例

ユースケース図は、システムの機能をユーザー視点で表現し、ユーザーとシステムの相互作用を示します。

以下は、ブログ管理システムにおけるユースケース図の例です。

@startuml blog_use_cases
actor Blogger
actor Visitor
Blogger --> (ブログ記事を書く)
Blogger --> (ブログ記事を編集する)
Blogger --> (ブログ記事を削除する)
Visitor --> (ブログ記事を読む)
Visitor --> (ブログ記事にコメントする)
@enduml

このユースケース図は、ブログ管理システムにおける主な機能と、それに関わるアクター（BloggerとVisitor）を示しています。

クラス図における使用例

クラス図は、システムの静的構造を表し、クラス間の関係を示します。

以下は、簡単なeコマースシステムのクラス図の例です。

@startuml ecommerce_class_diagram
left to right direction
class User {
  +String name
  +String email
  +String password
  +login()
  +logout()
}

class Product {
  +String name
  +String description
  +double price
  +addToCart()
}

class ShoppingCart {
  +User user
  +List<Product> products
  +addProduct(Product)
  +removeProduct(Product)
  +checkout()
}

User "1" -- "1..*" ShoppingCart: owns
ShoppingCart "1" -- "0..*" Product: contains
@enduml