UML (Unified Modeling Language) は、ソフトウェアやシステムの設計・開発を行う際に、その設計をモデル化するための標準化された図示記法のことです。例えば、あるアプリケーションの処理の流れをシーケンス図として描きたい場合に、ある種の共通言語ともいえるUML を活用することで、シンプルで、多くの人が理解でき、再利用性に優れた形式でシーケンス図を作成することができます。
PlantUMLは、UML をテキストファイルで記述し、それを画像にレンダリングするオープンソースのツールです。つまり、UML をより手軽に始められるツールということで、本記事ではさっそくPlantUML を使ってシーケンス図を実際に作ってみましょう。
目次
インストール方法
今回はVSCode 上でUML を作成する環境を整える方法を紹介します。OS はWindows を対象としますが、その他のOS でも基本的なインストール方法は同じです。インストールの流れは下記の通りです。
- VSCode パッケージのインストール
- OpenJDK のインストール
- (オプション) Graphviz のインストール
- 参考 : Web でのレンダリング
1. VSCode パッケージのインストール
まずはパッケージをインストールします。これはWeb サイトからでも、直接VSCode からパッケージ名「PlantUML」を検索しても構いません。
インストールが完了しても、残念ながらまだUML の図示はできません。というのも、要件としてJava 環境が必要なためです。
2. Java のインストール
基本的には下記ドキュメントのRequirements に従います。
https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
ただし、Java を新規でインストールする際は、例えばWindows の場合であれば下記からダウンロードできるMS Build 版OpenJDK のmsi ファイルを利用したほうがUI でインストールでき、自動的にパスを通してくれるのでオススメです。
https://learn.microsoft.com/en-us/java/openjdk/download
インストール完了後、正しくjava が実行できるかどうかを確認します。
plantuml> java --version
openjdk 21.0.2 2024-01-16 LTS
OpenJDK Runtime Environment Microsoft-8905927 (build 21.0.2+13-LTS)
OpenJDK 64-Bit Server VM Microsoft-8905927 (build 21.0.2+13-LTS, mixed mode, sharing)3. (オプション) Graphviz のインストール
Windows の場合、現在では個別のインストールは必要ありません。Graphviz (のdot) を使用した図が作成できるかは下記コマンドで確認できます。plantuml.jar のインストールディレクトリは環境に合わせて適宜変更してください。
plantuml> java -jar C:\Users\${YOUR_USER_NAME}\.vscode\extensions\jebbs.plantuml-2.17.5\plantuml.jar -testdot
Dot version: dot - graphviz version 2.44.1 (20200629.0846)
Installation seems OK. File generation OKLinux やmacOS の場合は現時点では追加でのGraphviz インストールが必要になるようです。詳細は先述したReuirements や下記ドキュメントを確認してください。
https://plantuml.com/en/graphviz-dot
参考までにmacOS の場合は下記コマンドでGraphviz をインストールできます。
brew install graphviz4. 参考 : Web でのレンダリング
実はPlantUML はWeb ブラウザで実行できるサービスが提供されています。これにより、ローカルで表示する必要がないのであれば、Web 版を利用したほうが簡単に始めることができます。
https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
VSCode 版を使うメリットとしては、ファイル共有やバージョン管理、Github Copilot を使いたいといった時でしょう。PlantUML を簡単に試したい、けどJava のインストールなどは面倒……といった場合にはWeb 版を利用してください。
シーケンス図を作成してみよう
まずは「ユーザーがリクエストを送信し、システムが応答を返す」という簡単なシーケンス図を作成してみます。ファイル名はここではsample-diagram.puml とします。
@startuml
actor ユーザー
participant システム
ユーザー -> システム: リクエストを送信
activate システム
システム --> ユーザー: 応答を返す
deactivate システム
@endumlVSCode の拡張をインストールしていれば、右上に図示用のアイコンが出ているはずなので、それをクリックします。
下記スクリーンショットのように、ユーザーとシステムの間の関係がシーケンス図として出力されます。
ここで、いくつかPlantUML 特有の代表的な記法を確認します。まず、PlantUML ファイルは必ず@startuml/@enduml で囲みます(' で始まる記載はコメントです)。
@startuml
'Line comments use a single apostrophe
@enduml-> または-->(逆向きは<- <-- でもOK)でシーケンス図を書く際の処理の流れを図示できます。
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
分類子（participant）はシーケンス図に出てくる登場人物のようなものです。
@startuml
participant Participant as Foo
actor Actor as Foo1
boundary Boundary as Foo2
control Control as Foo3
entity Entity as Foo4
database Database as Foo5
collections Collections as Foo6
queue Queue as Foo7
Foo -> Foo1 : To actor
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml
対応している分類子は下記の通りです。
- actor
- boundary
- control
- entity
- database
- collections
- queue
メッセージに自動的に番号を振ることができます。
@startuml
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
autonumber 15
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response
autonumber 40 10
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response
@enduml
メッセージをalt/else, opt, loop, group などといったワードでグルーピングできます。
@startuml
Alice -> Bob: Authentication Request
alt successful case
Bob -> Alice: Authentication Accepted
else some kind of failure
Bob -> Alice: Authentication Failure
group My own label
Alice -> Log : Log attack start
loop 1000 times
Alice -> Bob: DNS Attack
end
Alice -> Log : Log attack end
end
else Another type of failure
Bob -> Alice: Please repeat
end
@enduml
ここまで、代表的な記法をいくつか紹介しましたが、ほかにもシーケンス図を作成するうえで役立つ記法があります。詳細は下記ドキュメントを参照してください。
https://plantuml.com/en/sequence-diagram
生成AI を活用したシーケンス図の作成
ここまででいくつかPlantUML の記法を紹介しましたが、ある程度UML を描けるようになるためには当然それなりのスキルセットが必要になります。そこで、ChatGPT などの生成AI を活用することで、このハードルを大きく下げることができます。
たとえば、TCP 3 way handshake をシーケンス図にしたい場合、これをChatGPT で作ってしまうことができます。
とはいえ、実際に生成AI で作成する場合は必ずしも意図したものができるわけではないため、UML 作成のベースとして活用し、細かい表記を調整していくことになります。
参考までに、ChatGPT では画像の入力もできるため、Web から拾ってきたシーケンス図や手書きのシーケンス図をPlantUML に変換することができます。
もちろん、得られた結果が正しくない場合もありますが、いずれにせよ、PlantUML の目的である、UML をコード化して標準化するための支援ツールとして、生成AI は大いに活用できると思います。
まとめ
本記事では、PlantUML とVSCode を使った基本的なシーケンス図の作成の流れを紹介しました。また、ChatGPT のような生成AI を活用することで、PlantUML によるUML の標準化をより手軽に始められることができます。例えば、ミーティングの最中にホワイトボードに書き起こしたシーケンス図の写真を撮影し、ChatGPT に入力してコード化してから社内共有といったこともユースケースとして考えられます（もっとも、セキュリティの問題はつきまとうのですが）。
本記事がPlantUML を始めるきっかけになれば幸いです。