Categories: PlantUML技術

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 シーケンス図

にいやん

出身 : 関西 居住区 : 関西 職業 : 組み込み機器エンジニア (エンジニア歴13年) 年齢 : 38歳(2022年11月現在) 最近 業務の効率化で噂もありPython言語に興味を持ち勉強しています。 そこで学んだことを記事にして皆さんとシェアさせていただければと思いブログをはじめました!! 興味ある記事があれば皆さん見ていってください!! にほんブログ村