PlantUMLのシーケンス図の書き方

kitabatake

この記事は、PlantUMLでシーケンス図を書くときに必要になる情報をまとめたものです。

PlantUMLとは

簡単なコードによる記述でUMLの様々な図が作成できるツールです。
UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。

シーケンス図とは

一連の処理の実現方法を参加者間の相互作用で表すことができます。
設計時にどのクラスにどういうメッセージ（責務）を割り当てるかの検討や、既存の実装がどういう相互作用で実現されているかを整理するためなど、
色々な使い方ができる図です。

例

インターネット記事投稿サービスの「記事を検索する」処理をどう実現させるかを設計する想定で図を作成してみました。

問題領域寄りの図

フレームワークなど、特定の技術要素に依存しない抽象的なシーケンス図です。

画像1

@startuml
/' define participants '/
actor ユーザー
boundary ホーム画面
boundary 検索ビュー
boundary 検索結果画面
entity 記事検索
entity 記事一覧

/' messages '/
ユーザー -> ホーム画面 : access
create 検索ビュー
ホーム画面 -> 検索ビュー : display

ユーザー -> 検索ビュー : input keyword

検索ビュー -> 検索ビュー : validateKeyword
検索ビュー -> 記事検索 : search(keyword)
記事検索 -> 記事一覧 : new
記事検索 --> 検索ビュー : 記事一覧

create 検索結果画面

alt exists 記事一覧
   検索ビュー  -> 検索結果画面 : display
else
   検索ビュー -> ホーム画面 : display with message
end
@enduml

解決領域寄りの図

WEBのMVCフレームワークの「Ruby on Rails」上に適応させたシーケンス図です。

画像21

@startuml
actor ユーザー
ユーザー -> "a HomeController" : access
activate "a HomeController"
"a HomeController" -->> ユーザー : rendering 検索ビュー
deactivate "a HomeController"

ユーザー -> "an ArticleSearchResultController" : キーワードを入力して送信
activate "an ArticleSearchResultController"
"an ArticleSearchResultController" -> "an ArticleSearcher" : search(keyword)

activate "an ArticleSearcher"
"an ArticleSearcher" -> "an ArticleSearcher" : validates
"an ArticleSearcher" -->> "an ArticleSearchResultController" : IllegalArgumentException

"an ArticleSearchResultController" -> "a HomeController" : redirect
note bottom : 「キーワードを入力してください」メッセージ

"an ArticleSearcher" -> "an Article Class" : query
activate "an Article Class"
"an Article Class" -->> "an ArticleSearcher" : return Article::ActiveRecordRelation
deactivate "an Article Class"
"an ArticleSearcher" -->> "an ArticleSearchResultController" : return Article::ActiveRecordRelation
deactivate "an ArticleSearcher"

"an ArticleSearchResultController" -> "an Article::ActiveRecordRelation" : order(publish_date: desc)
activate "an Article::ActiveRecordRelation"
deactivate "an Article::ActiveRecordRelation"

"an ArticleSearchResultController" -> "an Article::ActiveRecordRelation" : page(0)
activate "an Article::ActiveRecordRelation"
deactivate "an Article::ActiveRecordRelation"

"an ArticleSearchResultController" -->> ユーザー : rendering
deactivate "an ArticleSearchResultController"
@enduml

記述方法

参加者

参加者は様々なグラフィック要素で定義できます。

画像2

@startuml
hide footbox

participant 汎用的な参加者
actor アクター
boundary バウンダリオブジェクト
control コントロールオブジェクト
entity エンティティオブジェクト
database DB
collections コレクションオブジェクト

/' 空白や記号のような通常の文字以外を使いたい場合 "" で囲う '/
participant "a Article:SpecialArticle"
@enduml

参加者の定義を省略してメッセージを記述した場合は「汎用的な参加者」の形になります。

画像3

@startuml
objectA -> objectB : message1
@enduml

UMLの参加者の表記のルールは `オブジェクト名:クラス名` や `役割名:分類子名` でして、 前半のオブジェクト名か、後半の `:` 以降のクラス名のどちらかを省略することができます。
上記の「Ruby on Rails」例で書いたような、オブジェクト名を `a クラス名` と表現することもよくあるようです。（この場合は `:` 以降のクラス名を省略しています。）

画像4

@startuml
hide footbox
"オブジェクト名:クラス名" -> "オブジェクト名"
"オブジェクト名" -> ":クラス名"
@enduml

メッセージ

様々な種類のメッセージを表現することができます。

基本的なメッセージ

画像5

@startuml
objectA -> objectB : 同期メッセージ
objectA ->> objectB : 非同期メッセージ
objectB -->> objectA : リプライメッセージ

objectA -> objectA : 自分へのメッセージ
@enduml

図の外部の要素とのやりとり

画像6

@startuml
[-> objectA : 外部からのメッセージ
objectA ->] : 外部へのメッセージ
@enduml

参加者の生成と破棄

参加者を生成するメッセージの前に `create 参加者名` と記述することで、生成メッセージを表現することができます。
また、参加者を破棄するメッセージの後に `destroy 参加者名` と記述することで、破棄メッセージを表現することができます。

画像7

@startuml
participant objectA

create objectB
objectA -> objectB : create message
objectA -> objectB : destroy message
destroy objectB
@enduml

メッセージへの注釈

メッセージの直後に `note left|right|top|bottom : メッセージ内容` と書くことによって、メッセージに注釈をつけられます。

画像8

@startuml
objectA -> objectB
note right : message1

objectB -> objectB
/' 複数行の注釈 '/
note left
 message2
 message3
end note
@enduml

アクティベーションバー

画像9

@startuml
user -> objectA : call
activate objectA
objectA -> objectB : call
activate objectB
objectB -->> objectA
deactivate objectB
objectA -->> user
deactivate objectA
@enduml

結合フラグメント

繰り返し、分岐など様々な制御構造を表現することができます。

alt

if elseの条件分岐を表現できます。

画像10

@startuml
alt x > 0
   objectA -> objectB : message1
else
   objectA -> objectC : message2
end
@enduml

opt

ある条件が成立した時だけメッセージを送るということを表現できます。

画像11

@startuml
objectA -> objectB : message1
return x

opt x > 0
   objectA -> objectC : message2
end
@enduml

loop

画像12

@startuml
/' ループさせる数を指定 '/
loop 記事数
   objectA -> objectB : message1
end

/' 最小値と最大値を指定 '/
loop 1, 10
   objectA -> objectB : message2
end

/' 無限ループ '/
loop
   objectA -> objectB : message3
end
@enduml

break

loopなどのbreakを内包している要素の処理を中断することを表現できます。

画像20

@startuml
loop
   objectA -> objectB : message1
   break break condition
       objectA -> objectC : message2
   end
end
@enduml

par

複数のメッセージを並行して送ることを表現できます。

画像13

@startuml
par
   objectA -> objectB : message1
   objectA -> objectB : message2
   note right : message1とmessage2は並行して送信される 
end
@enduml

critical

クリティカルな部分という表現ができます。
例えばpar内にcriticalがあると、その部分だけは並行実行しないという表現ができます。

画像14

@startuml
par
   critical
        objectA -> objectB : critical message
   end
   objectA -> objectB : parallel message1
   objectA -> objectB : parallel message2
end
@enduml

他のシーケンス図への参照

他のシーケンス図への参照を表現できます。

画像20

@startuml
participant objectA
participant objectB
participant objectC

objectA -> objectB : message1
ref over objectB,objectC : message1 details

/' 複数行 '/
ref over objectB,objectC
   first line
   second line
end
@enduml

メッセージの遅延

画像16

@startuml
objectA -> objectB : message1
...
objectB -> objectA : replay1
... abount 10 minutes ...
objectA -> objectB : message2
@enduml

メッセージの間隔

画像17

@startuml
objectA -> objectB : message1
objectB -> objectA : replay1

|||

objectA -> objectB : message2
objectA -> objectB : replay2

/' ピクセル数を指定 '/
||50||

objectA -> objectB : message3
@enduml

参加者のグルーピング

画像18

@startuml
box "presentation" #LightBlue
   participant objectA
   participant objectB
end box

objectA -> objectB : message1
objectB -> objectC : message2
@enduml

指定できる色の名前は https://www.w3schools.com/colors/colors_names.asp にあります。
また、 `#AABBCC` のようなHEX形式で指定することもできます。

下部の参加者エリアの非表示

画像19

@startuml
hide footbox
objectA -> objectB
@enduml

図のタイトル

`title タイトル名`

コード内のコメント

' 行コメント

/'
 ブロックコメント
'/

(宣伝) PlantUMLのIntelliJ Pluginを作っています

有料プラグインとして出していまして、今後もアクティブに開発を進めていく予定ですので、フィードバックをいただけるととても嬉しいです。

いいなと思ったら応援しよう！