PlantUMLでシーケンス図を簡単に作成！

システムの設計や説明って、難しいですよね。言葉で説明するだけだと、複雑な処理の流れがうまく伝わらないことも…。そんな時に便利なのがシーケンス図です！

PlantUMLを使えば、テキストで簡単にシーケンス図が作れちゃいます。今回は、PlantUMLでできることを優しく解説しながら、ブログに貼り付けられるコードもご紹介しますね！

PlantUMLとは

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

まずは登場人物！参加者の定義

シーケンス図に登場するシステムやユーザーをparticipantで定義します。
ニックネームをつけるようにasで別名もつけられます。
asでつけた別名は、別名をシーケンスの中で使うことができるので、かなり便利です。

@startuml
participant ユーザー
participant Webサーバー as WS
participant データベース as DB
@enduml

やりとりを描こう！メッセージの送受信

->でメッセージの送信、<-で受信を表します。矢印の種類を変えることもできます。例えば、–>は非同期メッセージを表します。

@startuml
ユーザー -> WS: ログインリクエスト
WS --> DB: データベースクエリ
DB -> WS: クエリ結果
WS -> ユーザー: ログイン成功
@enduml

処理中を表現！アクティベーション

activateとdeactivateで、どのシステムが処理中かを視覚的に表現できます。

@startuml
ユーザー -> WS: リクエスト
activate WS
WS -> DB: クエリ
activate DB
DB -> WS: 結果
deactivate DB
WS -> ユーザー: レスポンス
deactivate WS
@enduml

メモ書きを追加！ノート

note left of、note right of、note overでメモを追加できます。hnoteやrnoteを使えば、水平方向や右寄せのメモも書けます。複数行のメモにはend noteを使いましょう。

@startuml
ユーザー -> WS: リクエスト
note right of WS: 認証処理
hnote left of ユーザー: ユーザーからのリクエスト
rnote over WS, DB: データベースへの問い合わせ \n\
処理中... \n\
何らかの処理が行われています。

WS -> DB: クエリ
note left of DB: データベースアクセス
DB -> WS: 結果
WS -> ユーザー: レスポンス
@enduml

複雑な処理も表現！ループ、条件分岐、並列処理

alt、loop、parなどで、条件分岐やループ、並列処理を表現できます。

@startuml
ユーザー -> WS: リクエスト
alt 成功
  WS -> ユーザー: 成功レスポンス
else 失敗
  WS -> ユーザー: 失敗レスポンス
end

loop 複数回
  WS -> DB: クエリ
  DB -> WS: 結果
end

par 並列処理
  WS -> DB: クエリ1
  WS -> DB: クエリ2
end
@enduml

処理時間を見える化！タイミング表示

[時間]を付け加えることで、処理時間を表現できます。

@startuml
ユーザー -> WS: リクエスト [3s]
WS -> DB: クエリ [1s]
DB -> WS: 結果 [2s]
WS -> ユーザー: レスポンス [1s]
@enduml

グループ分けでスッキリ！参加者のグループ化

boxを使って参加者をグループ化すると、図が見やすくなります。

@startuml
box "内部システム"
participant WS
participant DB
end box

ユーザー -> WS: リクエスト
WS -> DB: クエリ
DB -> WS: 結果
WS -> ユーザー: レスポンス
@enduml

タイトルとフッターで分かりやすく！

titleとfooterでタイトルとフッターを追加できます。

@startuml
title ログインシーケンス図
ユーザー -> WS: リクエスト
WS -> DB: クエリ
DB -> WS: 結果
WS -> ユーザー: レスポンス
footer PlantUMLで作成
@enduml

下部の登場人物を消去

hide footbox を宣言することで、下部の点線だけを消すことができます。自動番号付けは有効のままです。

@startuml
hide footbox

participant User
participant "Web Server" as WS
participant Database as DB

User -> WS: Request
WS -> DB: Query
DB -> WS: Response
WS -> User: Response

@enduml

シーケンスのナンバリング(番号付け)

autonumberを使って、番号付けを有効にできます。

@startuml
autonumber

Alice -> Bob: Authentication Request
Bob -> Alice: Authentication Response

@enduml

開始番号を指定する場合

@startuml
autonumber 10

Alice -> Bob: Authentication Request
Bob -> Alice: Authentication Response

@enduml

フォーマット指定して番号付け

@startuml
autonumber "Step "

Alice -> Bob: Authentication Request
Bob -> Alice: Authentication Response

@enduml

まとめ

PlantUMLを使えば、テキストで簡単にシーケンス図が作成できます。 これらのコードをコピーして、PlantUMLのオンラインサーバーやエディタに貼り付けてみてください。素敵なシーケンス図が生成されますよ！ ぜひ、色々な機能を試して、分かりやすい図を作ってみてくださいね！

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

フローチャート図の書き方について知りたい方は、こちら

ユースケース図の書き方について知りたい方は、こちら

参考情報

シーケンス図の詳細な仕様や高度な機能については、以下の公式ドキュメントをご参照ください。

PlantUML シーケンス図