PlantUMLでシーケンス図の書き方・サンプル

# はじめに
転職してから設計でUMLを書くのにplantumlを初めて使ったが、手探りでネットの情報からサンプルをよく探していたので、今の最適解をまとめておく。

# 作れるシーケンス図
今回紹介のコードを使うと、こんなシーケンス図が作れる。（最後にサンプルコードあり）

```plantuml
@startuml シーケンス図_サンプル
title シーケンス図_サンプル

/'
シーケンス図サンプル
ここではサンプルを記載します
'/

' フッターを隠せる
hide footbox

' actorで人型、Participantでボックスを定義
' asで別名を定義、処理の中で利用できる
actor user
Participant frontend as FE
Participant backend as BE
Participant database as DB
Participant 外部API as API

' ==でイベントごとにシーケンスを分割
== 初期表示 ==
' autonumber：処理に番号を自動でつけられる、
' イベントの初めに定義すればそこから番号を付与
autonumber

user -> FE : 処理開始
' activate、deactivateで処理の開始終了を意味
activate FE

    FE -> BE : request(GET: ID、年月)
    activate BE

        BE -> DB :request(in : ID、年月)
        ' note でAPI名や一言メモを残す
        note right
            履歴データの取得
        end note

        activate DB
        DB -> BE :response(out: 履歴データ)
        deactivate DB
        
        BE -> API : request(GET: ID、年月)
        note right
            外部APIデータの取得
        end note

        activate API
        API -> BE : response(外部データ)
        deactivate API

        BE -> BE : チェック処理
        note right
            スプレッドシート参照
        end note
    BE -> FE : response
    deactivate BE

FE -> user : 処理終了
deactivate FE


== 登録処理 ==
autonumber

user -> FE : 登録開始
activate FE

    FE -> BE : request(GET: ID、年月、データ)
    activate BE

        BE -> DB : request(in :ID、年月、データ)
        activate DB
        DB -> BE : response
        deactivate DB

    BE -> FE : response
    deactivate BE
FE -> user : 登録終了
deactivate FE

@enduml
```


# 使ったコード
## 設定系

### ファイルの最初と最後のおまじない
ファイル名に合わせる。
``` UMLファイル
@startuml シーケンス図_サンプル
title シーケンス図_サンプル


@enduml
```

### コメント

１行分と複数行の書き方。
``` UMLファイル
/'
複数行の
コメント
'/

' １行のコメント
```

### シーケンスの区切り
イベントの最初につけて、区切りを分かりやすくする。

``` UMLファイル
== 区切りを意味する ==
```

### 自動採番
処理に番号を自動で付与。
イベントの初めに定義すればそこから番号を採番できる。

``` UMLファイル
autonumber
```

### フッター隠し
ファイル先頭につけておくと、アクターなどヘッダーと重複した内容が
フッターに表示されるのを防ぐことができる。

``` UMLファイル
hide footbox
```

### ノート
処理にコメントをつける。API名や一言メモに利用する。

``` UMLファイル
note right
    履歴データの取得
end note
```

## 処理系

### アクター
actorで人型、ParticipantでサーバとかAPIなどユーザ以外を定義。
asで別名を定義、処理の中で利用できる。

``` UMLファイル
actor user
Participant frontend as FE

```

### 処理の向き先
処理の流れを記載。コメントをつけられる。

``` 
user -> FE : 登録開始
```

### 処理の開始と終了

アクター単位で、処理がどのタイミングから始まり、どのタイミングで終了するのかを定義する。
```
activate BE

deactivate BE
```

# 今回使用したコードの例

以下の通り。PlantUMLの環境構築して、ファイルに貼り付けて、
プレビューすれば、作り始めやすい。

``` 
@startuml シーケンス図_サンプル
title シーケンス図_サンプル

/'
シーケンス図サンプル
ここではサンプルを記載します
'/

' フッターを隠せる
hide footbox

' actorで人型、Participantでボックスを定義
' asで別名を定義、処理の中で利用できる
actor user
Participant frontend as FE
Participant backend as BE
Participant database as DB
Participant 外部API as API

' ==でイベントごとにシーケンスを分割
== 初期表示 ==
' autonumber：処理に番号を自動でつけられる、
' イベントの初めに定義すればそこから番号を付与
autonumber

user -> FE : 処理開始
' activate、deactivateで処理の開始終了を意味
activate FE

    FE -> BE : request(GET: ID、年月)
    activate BE

        BE -> DB :request(in : ID、年月)
        ' note でAPI名や一言メモを残す
        note right
            履歴データの取得
        end note

        activate DB
        DB -> BE :response(out: 履歴データ)
        deactivate DB
        
        BE -> API : request(GET: ID、年月)
        note right
            外部APIデータの取得
        end note

        activate API
        API -> BE : response(外部データ)
        deactivate API

        BE -> BE : チェック処理
        note right
            スプレッドシート参照
        end note
    BE -> FE : response
    deactivate BE

FE -> user : 処理終了
deactivate FE


== 登録処理 ==
autonumber

user -> FE : 登録開始
activate FE

    FE -> BE : request(GET: ID、年月、データ)
    activate BE

        BE -> DB : request(in :ID、年月、データ)
        activate DB
        DB -> BE : response
        deactivate DB

    BE -> FE : response
    deactivate BE
FE -> user : 登録終了
deactivate FE

@enduml
```


# 後書き

慣れてしまえばコードを書くだけで、UML書けるので今後もお世話になリマス。
またGitで管理することも可能。

ただ気になる点としては、自由に書けてしまうが故、ソースが見辛くなりがち。
ぱっと見文字の羅列で、修正しようにもどこを直せばいいか迷子になる。
今はなんとなくでやっているが、インデントルールとか、
明確に決めて取り掛かった方がいいかもしれない。



# 参考文献

https://plantuml.com/ja/



# 編集履歴
2023/3/15 図の貼り付けから、qiitaのコードブロックでPlantUMLを表示するよう反映（thx!）