LoginSignup
47
9

PlantUMLでシーケンス図を書いてみた

Last updated at Posted at 2023-12-11

はじめに

今回は、シーケンス図について記事を書こうと思います。
というのも、最近業務の中で初めてシーケンス図を作ることになったのでその備忘録のような感じです。
構文等よく使いそうなものをピックアップしてまとめていこうと思います。
最後にはサンプルで作ってみたものも載せているので初心者の方の参考になればうれしいです。

そもそもシーケンス図とは

シーケンス図とは、プログラムの処理の流れや概要を設計する際に使われるものです。
具体的な書き方は、クラスやオブジェクト間のやりとりを時間軸に沿って図で表現します。
(参考:https://cacoo.com/ja/blog/what-is-sequence-diagram/)

環境構築

実際に書いてみるために環境構築から始めます。
以下手順です。(今回はJavaの環境が整っている前提で進めさせていただきます)

①VSCodeの拡張機能で「PlantUML」を検索する

image.png

②PlantUMLをインストールする

image.png

手順はこれだけになります。
試しにファイルを作成し入力してみるとこのような感じになります。(拡張子は.puです)
※プレビューは「Alt+D」で出せます!
image.png

サンプルコード
sample.pu
@startuml test

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

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response

@enduml

プレビューが出ない人へ
設定でPlantUMLを検索し、赤枠内のように変更してみてください。
image.png
(参考:https://qiita.com/zonbitamago/items/7946acfb4cbaa139f00a)

以上で環境構築と動作確認は完了です。

シーケンス図を書いてみよう

環境が整ったところで次は実際に書いてみましょう!
まずは構文をいくつか紹介していきます。

構文

①分類子

分類子名 表示名 as ○○ と書きます。
※分類子の宣言の後にある「as ○○」は省略可能
分類子には以下のような種類があります。

image.png

sample.pu

participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7

②メッセージ

続いてメッセージは 送信元 -> 送信先 : メッセージ のように書きます。
送信元と送信先を同じにすれば自分自身へのメッセージも可能です。
image.png

sample.pu
Bob -> Alice : 送信メッセージ
Bob <- Alice : 返信メッセージ
Bob -> Bob : 自分自身へのメッセージ

③メッセージの番号付け

autonumber (開始) (増分) をメッセージの前に記述することで連番を自動でつけてくれます。
()内のものは省略可能です。省略した場合1から順につけてくれます。
image.png

sample.pu
autonumber
Bob -> Alice : メッセージ(1から連番スタート)
Bob <- Alice : メッセージ
|||
autonumber 15
Bob -> Alice : メッセージ(15から連番スタート)
Bob <- Alice : メッセージ
|||
autonumber 30 10
Bob -> Alice : メッセージ(30から10刻みで連番スタート)
Bob <- Alice : メッセージ

④メッセージのグループ分け

よく使うのはalt/elseloopgroup あたりかなと思います。
それぞれ入れ子にすることで複雑な処理も書くことができます。
image.png

sample.pu
Bob -> Alice :メッセージ
alt Alt
    Alice -> Bob :メッセージ

else Else
    group Group
        Alice -> Bob :メッセージ
        loop 1000回
            Bob -> Alice :loop内メッセージ
        end
        Bob -> log :メッセージ
        log -> Bob :メッセージ
    end
end

⑤メッセージにノートを付ける

ノートを付けたいメッセージの直後にnote left または note rightnote over ○○ と書きます。

image.png

sample.pu
Bob -> Alice :メッセージ
note right : 右側のノート
Alice -> Bob :メッセージ
note left : 左側のノート
Bob -> Alice :メッセージ
note over Alice : Aliceの上にノート

⑥ライフラインの活性化

activate ○○ と記載することでライフラインを活性化させることができます。

image.png

sample.pu
Bob -> Alice :メッセージ
activate Alice
note right : ライフラインの活性化
Alice -> Bob :メッセージ
deactivate Alice

サンプル

構文で取り上げたものを組み合わせてシーケンス図を作ってみました。

image.png

サンプルコード
sample.pu
@startuml test

actor Webブラウザ
participant サーバー
database データベース

autonumber 10 10
Webブラウザ -> サーバー : 認証リクエスト
activate サーバー

alt 認証成功
    サーバー -> Webブラウザ : 認証成功

else 認証失敗
    サーバー -> Webブラウザ : 認証失敗
    deactivate サーバー

    group サーバー処理
        サーバー -> データベース : 失敗回数記録
        note right #ffff00 : アカウントロックは連続3回認証\n失敗した場合に実行されます

        loop 3回失敗
            サーバー -> データベース : アカウントロック
        end
        サーバー -> Webブラウザ : アカウントロック通知
    end

else その他のシステムエラー
    サーバー -> Webブラウザ : 再度認証実行要求
end

@enduml

なかなかそれっぽいものができたような気がします。

まとめ

今回は主にPlantUMLの環境構築とシーケンス図の構文について書いてみました。
実際にシーケンス図を書いてみると、処理の流れを考えたりメモを付けてわかりやすくしたりと難しいところが多かったです。
ですが、書くことで具体的な処理がイメージしやすく、シーケンス図っていいなって思いました。
環境は割と簡単に整えられるので興味を持った方はぜひやってみてください。
簡単なまとめでしたが、少しでも私と同じような初心者の方の参考になればいいなと思います。

参考

47
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
9