システムの設計や説明って、難しいですよね。言葉で説明するだけだと、複雑な処理の流れがうまく伝わらないことも…。そんな時に便利なのがシーケンス図です！
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のオンラインサーバーやエディタに貼り付けてみてください。素敵なシーケンス図が生成されますよ！ ぜひ、色々な機能を試して、分かりやすい図を作ってみてくださいね！
この記事が、あなたの役に立てば幸いです！
フローチャート図の書き方について知りたい方は、こちら
ユースケース図の書き方について知りたい方は、こちら
参考情報
シーケンス図の詳細な仕様や高度な機能については、以下の公式ドキュメントをご参照ください。
コメント