プロダクト開発

PlantUML入門①: シーケンス図の書き方

この記事ではシーケンス図とは何か、またPlantUMLによるシーケンス図の書き方を解説します。

シーケンス図を書けるようになることで、ドキュメントやブログ、チーム開発においてものごとを伝えるための表現の幅が広がります。また設計のときに思考が整理されるという利点もあります。

シーケンス図の書き方は覚えなくても、この記事を見ながら書ければ十分だと思います。この記事をチートシートのような使い方でご利用ください。

著者
ぜに/Hiroki Zenigami

Webエンジニア&プロダクトマネージャ←プログラミング教育で起業←東大院←熊本高専。 共著に「現場で使えるRuby on Rails 5」。

目次

シーケンス図とは

シーケンス図は、システムの処理の流れを表現したりするときに用いられる図です。システムの構成要素同士のやりとりを、時間軸にそって表現します。このシーケンス図は、UMLという言語で記述することができます。

例えばドキュメントや技術ブログを書くときを考えてみます。システムについて説明するとき、文章だけだと伝わりづらいことがあります。このとき、“システム内でどういうやりとりがされるか”という図があると、読者の理解を助けることができます。

シーケンス図の例

以下に「アクセストークンでリソースを取得する流れ」を表した図を表示しています。このような図がシーケンス図になります。

アクセストークンでリソースを取得する例

シーケンス図での登場人物としては、大きく分けると次の4つがあります。このような登場人物を組み合わせてシーケンス図を書いていくことになります。

登場人物意味図における例
分類子システムの構成要素ユーザーやクライアントなど
ライフライン分類子の時間軸各分類子がもつ縦のライン
メッセージやりとりの内容矢印
ノート補足情報黄色いメモ

PlantUMLとは

PlantUMLは、テキストベースでシーケンス図を書くことのできる、UMLの一種です。この記事ではPlantUmlでシーケンス図を書く方法を解説していきます。

前提条件

この記事では、すでにPlantUMLが動作する環境がある前提で解説していきます。もしまだ環境を構築していない場合は、インターネットで検索するなどして準備してください。

あるいは、次の各ページではオンライン上でPlantUMLを実行することができます。こちらを利用しても問題ありません。

メッセージ

メッセージの例

システムの構成要素(分類子)同士のやりとりがメッセージです。メッセージを送り合うことで、シーケンス図を書いていきます。

メッセージの基本的な書き方は次の通りです。これを表示すると上の図のようになります:

User -> Client : アクセスする
User <- Client : 認可用URLを提示する
Client -> Client : 何らかの処理をする
User <-> Server : ユーザー認証・同意する

このように、分類子同士を矢印、ここでいう->でつなげます。その後にコロンを書き、続けてメッセージの内容を書きます。これで分類子同士のやりとりを表現できます。

この矢印は、左右どちらの向きにもかけます。また自分から自分に矢印をつなげることで、自分自身へのメッセージも表現できます。<->のように、双方向のメッセージも表現できます。

メッセージの種類

メッセージの種類の例

メッセージとは分類子同士を矢印でつなげたものですが、この矢印にはいくつかの種類があります。上の図は、次のようなコードで表現します:

User ->o Client : アクセスする
User x<- Client : 認可用URLを提示する
Client --> Client : 何らかの処理をする

矢印の先頭にoをつけると、丸が表示されます。同じようにxをつけるとバツが表示されます。また、矢印を-->のようにハイフンを二つつなげると、破線になります。

メッセージの色

メッセージの色の例

メッセージを書くときに、矢印の色を変更できます。上の図は、次のようなコードで表現します:

User -[#red]> Client : アクセスする
User <[#0000ff]- Client : 認可用URLを提示する

色を変えるには、矢印の記号の間にカッコを書きます。その中に#を書き、続けて色を指定します。

色の指定は、色の名前か、あるいは16進数のカラーコードで行います。名前・カラーコードはHTML Color Namesというページが役に立ちます。

メッセージの番号

メッセージの番号の例

メッセージに、上から順に番号をつけることができます。これは文章で図を解説するときなどに役立ちます。

番号をつけるにはautonumberというキーワードを使います。これで、メッセージごとにひとつずつ番号が増えていきます。例えば上の図は、次のようなコードで表現できます:

autonumber
User -> Client : アクセスする
User <- Client : 認可用URLを提示する
User -> Server : 認可を要求する
autonumber 10
User <-> Server : ユーザー認証・同意する
autonumber stop
Client <- Server : 認可コードを発行する
autonumber resume
Client -> Server : アクセストークンを要求する

番号を指定したいときは、autonumberの後に番号を書きます。また途中でカウントを中止したいときはstopを、再開したいときはresumeを付け加えます。

メッセージのグループ化

メッセージのグループ化の例

いくつかのメッセージをグループでまとめたいときがあります。このときはaltなどのキーワードを使います。例えば、上の図は次のコードで表現できます:

User -> Client : アクセスする
alt 認証が不要なページ
User <- Client : ページを表示する
else 認証が必要なページ
User <- Client : 認可用URLを提示する
end

このコードの例では、ユーザーの認証状況によって、クライアントからのレスポンスが変わることを表現しています。このelseはいくつでもつなげることができます。

上の例ではaltですが、これ以外にも次のようなキーワードがあります:

  • opt
  • loop
  • par
  • break
  • critical
  • group 任意のラベル名

例えばloopはループの回数を表すときに役立ちます。groupは任意のラベルでメッセージをグループ化することができます。

分類子

シーケンス図において、システムの構成要素を分類子といいます。例えばこの記事に出てくる図のユーザーやクライアント、サーバーなどが分類子にあたります。システムの構成要素の数だけ、分類子を書くことになります。

分類子の種類

分類子の種類の例

この分類子には、次に示す8つの種類があります。表現したい構成要素に合わせて分類子を使い分けていきます。ちなみに分類子の種類を明示しなかった場合はparticipantになります。

participant MyParticipant
actor MyActor
boundary MyBoundary
control MyControl
entity MyEntity
database MyDatabase
collections MyCollections
queue MyQueue

分類子の名前

分類子の名前の例

分類子には名前をつけることができます。例えば分類子をユーザー、クライアントと日本語で表記したいとします。このとき:

ユーザー -> クライアント : アクセスする

と日本語で表記すると、図を書くのが面倒になります。このとき、asキーワードを使うことで分類子に名前をつけることができます。

actor ユーザー as User
participant クライアント as Client

User -> Client : アクセスする

分類子の背景色

分類子の背景色の例

分類子の背景色を変更することができます。やり方は、分類子を定義するときに色も合わせて指定します。

actor ユーザー as User
participant クライアント as Client
participant 悪意のあるアプリ as App #ffaaaa

上の図のように、例えば背景を赤くすることで“この分類子は危険な要素である”ことを表現できます。

分類子のグループ化

分類子のグループ化の例

分類子をまとまりごとにグループ化することができます。グループ化は、分類子を定義するときにboxキーワードで囲います。

box Internal Service #eeeeee
  actor User
  participant Client
end box
participant App

boxキーワードの後ろの文字はタイトルを表します。また色を指定することで背景色を変更することもできます。

ノート・リファレンス

PlantUMLではシーケンス図の中に補足情報を表示できます。これがノートとリファレンスです。

ノートの書き方

ノートの書き方の例

ノートは、メッセージの近くにメモを表示できる機能です。noteキーワードでノートを表示することができます。あわせて、noteに続けてleftまたはrightでノートの表示位置を指定します。

User -> Client : アクセスする
note left : note left
User <- Client : 認可用URLを提示する
note right
note
right
end note
note over User : note over User
User <- Server : ログイン画面を表示
note over User, Client : note over User, Client
note across : note across

overキーワードで、分類子を基準とした位置にノートを表示できます。このoverキーワードのときに指定する分類子は、複数を指定することが可能です。

acrossキーワードを指定すると、すべての分類子をまたぐノートを表示することができます。またend noteキーワードを用いれば、複数行のノートも表示できます。

ノートの背景色

ノートの背景色の例

ノートも背景色を変更することができます。これはnoteキーワードの後ろに色を指定します。

User -> Client : アクセスする
note left User #aqua : note left

リファレンスの書き方

リファレンスの書き方の例

シーケンス図の中に、リファレンスとして補足情報を表示できます。これはref overキーワードを用います。ref overの後ろに、対象となる分類子を指定します。

User -> Client : アクセスする
ref over User : ユーザーの上に表示する
User <- Client : 認可用URLを提示する
ref over User, Client
  ユーザー・クライアントに
  またがって表示する
end ref

分類子を指定するときは、カンマでつなげることで複数の分類子にまたがってリファレンスを表示できます。また、end refキーワードを用いれば複数行のリファレンスを表示できます。

ライフライン

ライフラインの例

ライフラインは分類子の下にある縦の線のことで、分類子の時間軸を表しています。activateというキーワードを用いると、このライフラインがアクティブな状態であることを表現することができます。アクティブな状態は、白い長方形のようなもので表現されます。

また、アクティブな状態を解除するにはdeactivateキーワードを用います。例えば上の図を表現するには、次のようなコードになります:

actor ユーザー as User
participant クライアント as Client
database 認可サーバー as Server

User -> Client : アクセスする
activate Client
  User <- Client : 認可用URLを提示する
  User -> Server : 認可を要求する
  activate Server #ffaaaa
    User <-> Server : ユーザー認証・同意する
    Client <- Server : 認可コードを発行する
    Client -> Server : アクセストークンを要求する
    Client <-- Server : アクセストークンを返却する
  destroy Server
  User <- Client : 画面を表示する
deactivate Client

destroyキーワードは、アクティブな状態が途中で終わったことを意味します。またactivateの後ろに色を指定することで、背景色を設定できます。

ショートカット

ライフラインのショートカットの例

上ではライフラインのアクティブ化にactivatedeactivateを用いましたが、ショートカットもあります。

  • ++: 対象となる分類子をアクティブにする
  • --: 起点となる分類子を非アクティブにする

例えば、上の図は次のようなコードで表現できます:

actor ユーザー as User
participant クライアント as Client
database 認可サーバー as Server

User -> Client ++ : アクセスする
User <- Client : 認可用URLを提示する
User -> Server ++ : 認可を要求する
User <-> Server : ユーザー認証・同意する
Client <- Server : 認可コードを発行する
Client -> Server : アクセストークンを要求する
Client <- Server -- : アクセストークンを返却する
User <- Client -- : 画面を表示する

ショートカットはライフラインの状態を表すのに便利ですが、一方でショートカットではうまく表現しきれないときがあります。そのときはactivateキーワードを用いるといいです。

その他の表現

ここまでで解説した内容が、PlantUMLの基本になります。ただ、他にも役に立つ表現がいくつかあるので補足します。

区切り線

区切り線の例

メッセージのやりとりをステップごとに分けることができます。これは== タイトル ==という形式で書きます。

User -> Client : アクセスする
== 区切り線 ==
User <- Client : 認可用URLを提示する

遅延

遅延の例

メッセージのやりとりの途中で発生する遅延を表現することができます。これは...と書きます。遅延にコメントをつけるときは... コメント ...のように記述します。

User -> Client : アクセスする
...
User <- Client : 認可用URLを提示する
... 5 minutes later ...
User -> Server : 認可を要求する

文字の装飾

文字の装飾の例

ノートやメッセージなど、文字を表示できるところでは、文字の太さや色を変えるといった装飾が行えます。これはWikiのための記法であるCreoleというフォーマットで装飾できます。

User -> Client : アクセスする
note left User
=== 文字の装飾
* **太字**
* __下線__
* <color #red>色の変更</color>
end note

Creoleフォーマットについては、次のページが役に立ちます:

改行

改行の例

メッセージやノートなどの文字を書くところでは、文字を改行することができます。これは\nという記号で行えます。

User -> Client : アクセス\nする
著者
ぜに/Hiroki Zenigami

Webエンジニア&プロダクトマネージャ←プログラミング教育で起業←東大院←熊本高専。 共著に「現場で使えるRuby on Rails 5」。

関連記事関連書籍人気記事
applis
エンジニアとしてのんびり暮らす
お問い合わせ
ご意見・ご質問やお仕事のご依頼などは下記よりお願いいたします
お問い合わせ
© applis