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

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

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

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

### ①VSCodeの拡張機能で「PlantUML」を検索する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/fe3cec93-97c2-9a1a-caf6-86fa9cd3cbd7.png)

### ②PlantUMLをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/7136f950-7f2f-b8ae-3ddb-c18dfba15425.png)

手順はこれだけになります。
試しにファイルを作成し入力してみるとこのような感じになります。(拡張子は.puです)
※プレビューは「**Alt＋D**」で出せます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/ff90e1da-f7e9-c092-1337-07c4d9f60ca3.png)
<details><summary>サンプルコード</summary>


```sample.pu
@startuml test

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

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

@enduml
```
</details>

:::note info
プレビューが出ない人へ
設定でPlantUMLを検索し、赤枠内のように変更してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/9e93efc1-859e-0da0-6ed1-054be351f990.png)
(参考：https://qiita.com/zonbitamago/items/7946acfb4cbaa139f00a)
:::
以上で環境構築と動作確認は完了です。


# シーケンス図を書いてみよう
環境が整ったところで次は実際に書いてみましょう！
まずは構文をいくつか紹介していきます。


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/06157781-fe12-5088-6b64-e2d0b0e78603.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/dcdfbadd-adb6-6cac-5db0-bac199b550f0.png)



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


### ③メッセージの番号付け
`autonumber (開始) (増分)` をメッセージの前に記述することで連番を自動でつけてくれます。
()内のものは省略可能です。省略した場合1から順につけてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/5bc75bbc-72c6-6644-7645-ad6a12b82e4a.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/else`、`loop`、`group` あたりかなと思います。
それぞれ入れ子にすることで複雑な処理も書くことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/c97ff3b0-d9d8-c4da-788e-aad9340ab5fd.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 right` 、`note over ○○` と書きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/75b18a7e-5f01-992b-be3a-b009e4e63d93.png)


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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/016e9dc9-0c35-9698-9533-a0ca36311c2e.png)

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












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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629104/8d30558a-7750-a161-1b3d-cbc1806ead2a.png)
<details><summary>サンプルコード</summary>


```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
```
</details>

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


# まとめ

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



## 参考
https://plantuml.com/ja-dark/sequence-diagram