[VSCode]PlantUMLを使いこなそう！（シーケンス図）

## 背景
プロジェクトでUML作成するのに、PlantUMLを使用することになり、初見だったため、必要なコマンドをまとめてみました。

## PlantUMLでシーケンス図を作成するためのコマンドまとめ

### 1. 分類子の宣言
シーケンス図の分類子（アクターやオブジェクトなど）を宣言するには、以下のように記述します。
```diff
@startuml HandsOn-1
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

Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml
```

```plantuml
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

Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
```

### 2. 分類子名にアルファベット以外を使う
分類子名に日本語などのアルファベット以外の文字を使用することも可能です。
```diff
@startuml HandsOn-2
participant Alice
participant "Bob()"

Alice -> "Bob()" : Hello
"Bob()" -> "This is very\nlong" as Long
' You can also declare:
' "Bob()" -> Long as "This is very\nlong"
Long --> "Bob()" : ok
@enduml
```

```plantuml
participant Alice
participant "Bob()"

Alice -> "Bob()" : Hello
"Bob()" -> "This is very\nlong" as Long
' You can also declare:
' "Bob()" -> Long as "This is very\nlong"
Long --> "Bob()" : ok
```

### 3. 自分自身へのメッセージ
オブジェクトが自分自身にメッセージを送る場合の記述方法です。
```diff
@startuml HandsOn-3
participant Alice

' 右
Alice -> Alice: This is a signal to self.\nIt also demonstrates\nmultiline \ntext
' 左
Alice <- Alice: This is a signal to self.\nIt also demonstrates\nmultiline \ntext
@enduml
```

```plantuml
participant Alice
' 右
Alice -> Alice: This is a signal to self.\nIt also demonstrates\nmultiline \ntext
' 左
Alice <- Alice: This is a signal to self.\nIt also demonstrates\nmultiline \ntext
```

### 4. テキストの位置
メッセージのテキスト位置を指定することができます。
```diff
@startuml HandsOn-4
participant Bob
participant Alice

skinparam sequenceMessageAlign right
Bob -> Alice : Request
skinparam sequenceMessageAlign left
Alice -> Bob : Response
@enduml
```

```plantuml
participant Bob
participant Alice

skinparam sequenceMessageAlign right
Bob -> Alice : Request
skinparam sequenceMessageAlign left
Alice -> Bob : Response
```

### 5. メッセージシーケンスの番号付け
メッセージに番号を付けることで、シーケンスを明確にします。
```diff
@startuml HandsOn-5
participant Bob
participant Alice


' 自動採番
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response


' 自動採番開始番号、増分設定
autonumber 15
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response

autonumber 40 10
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response


' JavaのDecimalFormat方式で書式設定
autonumber "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response

autonumber 15 "<b>(<u>##</u>)"
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response

autonumber 40 10 "<font color=red><b>Message 0  "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response


' 自動採番の一時停止と再会
autonumber 10 10 "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response

autonumber stop
Bob -> Alice : dummy

autonumber resume "<font color=red><b>Message 0  "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response

autonumber stop
Bob -> Alice : dummy

autonumber resume 1 "<font color=blue><b>Message 0  "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response


' 「.」、「;」、「,」、「:」も対応できる
' 1番目の数値をあげるA、2番目の数値をあげるB
autonumber 1.1.1
Alice -> Bob: Authentication request
Bob --> Alice: Response


' 1、2番目の数値を増加させる
autonumber inc A
' 2.1.1
Alice -> Bob: Another authentication request
Bob --> Alice: Response

autonumber inc B
' 2.2.1
Alice -> Bob: Another authentication request
Bob --> Alice: Response

autonumber inc A
' 3.1.1
Alice -> Bob: Another authentication request
autonumber inc B
' 3.2.1
Bob --> Alice: Response


' %autonumber%変数で参照
autonumber 10
Alice -> Bob
note right
  the <U+0025>autonumber<U+0025> works everywhere.
  Here, its value is ** %autonumber% **
end note
Bob --> Alice: //This is the response %autonumber%//
@enduml
```

```plantuml
participant Bob
participant Alice


' 自動採番
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response


' 自動採番開始番号、増分設定
autonumber 15
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response

autonumber 40 10
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response


' JavaのDecimalFormat方式で書式設定
autonumber "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response

autonumber 15 "<b>(<u>##</u>)"
Bob -> Alice : Another authentication Request
Bob <- Alice : Another authentication Response

autonumber 40 10 "<font color=red><b>Message 0  "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response


' 自動採番の一時停止と再会
autonumber 10 10 "<b>[000]"
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response

autonumber stop
Bob -> Alice : dummy

autonumber resume "<font color=red><b>Message 0  "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response

autonumber stop
Bob -> Alice : dummy

autonumber resume 1 "<font color=blue><b>Message 0  "
Bob -> Alice : Yet another authentication Request
Bob <- Alice : Yet another authentication Response


' 「.」、「;」、「,」、「:」も対応できる
' 1番目の数値をあげるA、2番目の数値をあげるB
autonumber 1.1.1
Alice -> Bob: Authentication request
Bob --> Alice: Response


' 1、2番目の数値を増加させる
autonumber inc A
' 2.1.1
Alice -> Bob: Another authentication request
Bob --> Alice: Response

autonumber inc B
' 2.2.1
Alice -> Bob: Another authentication request
Bob --> Alice: Response

autonumber inc A
' 3.1.1
Alice -> Bob: Another authentication request
autonumber inc B
' 3.2.1
Bob --> Alice: Response


' %autonumber%変数で参照
autonumber 10
Alice -> Bob
note right
  the <U+0025>autonumber<U+0025> works everywhere.
  Here, its value is ** %autonumber% **
end note
Bob --> Alice: //This is the response %autonumber%//
```

### 6. メッセージのグループ化
以下キーワードを使用して、メッセージをグループ化して、処理の流れをわかりやすくします。
※コード例に出ていないキーワードありますが、そちらについても試してみてください。
1. alt/else
1. opt
1. loop
1. par
1. break
1. critical

```diff
@startuml HandsOn-6
participant Bob
participant Alice


Alice -> Bob: Authentication Request

alt successful case

    Bob -> Alice: Authentication Accepted

else some kind of failure

    Bob -> Alice: Authentication Failure
    ' groupキーワードのラベルを設定
    group My own label [My own label 2]
    Alice -> Log : Log attack start
        loop 1000 times
            Alice -> Bob: DNS Attack
        end
    Alice -> Log : Log attack end
    end

else Another type of failure

   Bob -> Alice: Please repeat

end
@enduml
```

```plantuml
participant Bob
participant Alice


Alice -> Bob: Authentication Request

alt successful case

    Bob -> Alice: Authentication Accepted

else some kind of failure

    Bob -> Alice: Authentication Failure
    ' groupキーワードのラベルを設定
    group My own label [My own label 2]
    Alice -> Log : Log attack start
        loop 1000 times
            Alice -> Bob: DNS Attack
        end
    Alice -> Log : Log attack end
    end

else Another type of failure

   Bob -> Alice: Please repeat

end
```

### 7. メッセージに付けるノート
メッセージにノートを付けることで、補足情報を追加できます。
```diff
@startuml HandsOn-7
participant Bob
participant Alice


Alice->Bob : hello
note left: this is a first note

Bob->Alice : ok
note right: this is another note

Bob->Bob : I am thinking
note left
a note
can also be defined
on several lines
end note


' 背景色を変更
note left of Alice #aqua
This is displayed
left of Alice.
end note

note right of Alice: This is displayed right of Alice.

note over Alice: This is displayed over Alice.

note over Alice, Bob #FFAAAA: This is displayed\n over Bob and Alice.

note over Bob, Alice
This is yet another
example of
a long note.
end note


' すべてにまたがるノート
Alice->Bob:m1
Bob->Charlie:m2
note over Alice, Charlie: Old method for note over all part. with:\n ""note over //FirstPart, LastPart//"".
note across: New method with:\n""note across""
Bob->Alice
hnote across:Note across all part.


' 複数のノートを同じレベルに並べる
note over Alice : initial state of Alice
note over Bob : initial state of Bob
Bob -> Alice : hello

note over Alice : initial state of Alice
/ note over Bob : initial state of Bob
Bob -> Alice : hello
@enduml
```

```plantuml
participant Bob
participant Alice


Alice->Bob : hello
note left: this is a first note

Bob->Alice : ok
note right: this is another note

Bob->Bob : I am thinking
note left
a note
can also be defined
on several lines
end note


' 背景色を変更
note left of Alice #aqua
This is displayed
left of Alice.
end note

note right of Alice: This is displayed right of Alice.

note over Alice: This is displayed over Alice.

note over Alice, Bob #FFAAAA: This is displayed\n over Bob and Alice.

note over Bob, Alice
This is yet another
example of
a long note.
end note


' すべてにまたがるノート
Alice->Bob:m1
Bob->Charlie:m2
note over Alice, Charlie: Old method for note over all part. with:\n ""note over //FirstPart, LastPart//"".
note across: New method with:\n""note across""
Bob->Alice
hnote across:Note across all part.


' 複数のノートを同じレベルに並べる
note over Alice : initial state of Alice
note over Bob : initial state of Bob
Bob -> Alice : hello

note over Alice : initial state of Alice
/ note over Bob : initial state of Bob
Bob -> Alice : hello
```

### 8. リファレンス
他のシーケンス図を参照することができます。
```diff
@startuml HandsOn-8
participant Alice
participant "Bob()"

Alice -> "Bob()" : Hello
"Bob()" -> "This is very\nlong" as Long
' You can also declare:
' "Bob()" -> Long as "This is very\nlong"
Long --> "Bob()" : ok
@enduml
```

```plantuml
ref over ユーザー, システム: 他のシーケンス図
```

### 9. ライフラインの活性化と破棄
オブジェクトのライフラインを活性化および破棄する方法です。
```diff
@startuml HandsOn-9
participant User

User -> A: DoWork
activate A #FFBBBB

A -> A: Internal call
activate A #DarkSalmon

A -> B: << createRequest >>
activate B

B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A
@enduml
```

```plantuml
participant User

User -> A: DoWork
activate A #FFBBBB

A -> A: Internal call
activate A #DarkSalmon

A -> B: << createRequest >>
activate B

B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A
```

### 10. Reference
図中にリファレンスを挿入することができます。
```diff
@startuml HandsOn-10
participant Alice
actor Bob

ref over Alice, Bob : init

Alice -> Bob : hello

ref over Bob
  This can be on
  several lines
end ref
@enduml
```

```plantuml
participant Alice
actor Bob

ref over Alice, Bob : init

Alice -> Bob : hello

ref over Bob
  This can be on
  several lines
end ref
```

### 11. Return
メッセージの戻り値を示すことができます。
```diff
@startuml HandsOn-11
actor Bob
participant Alice

Bob -> Alice : hello
activate Alice
Alice -> Alice : some action
return bye
@enduml
```

```plantuml
actor Bob
participant Alice

Bob -> Alice : hello
activate Alice
Alice -> Alice : some action
return bye
```

## まとめ
今回は[PlantUMLの公式サイト](https://plantuml.com/ja-dark/sequence-diagram#63d5049791d9d79d)を使って、ハンズオンしてみました。
手軽に記述でき、図を思うようなところに配置しようとするとずれるというストレスがなさそうなため、今回取り上げたシーケンス図以外のUML作成にも、使用してみようと考えております。

ぜひ、気になる方は[PlantUMLの公式サイト](https://plantuml.com/ja-dark/sequence-diagram#63d5049791d9d79d)を使って、今回投稿した内容以外にもハンズオンしてみてください。

この記事が皆さんの役に立てば幸いです。何か質問があれば、コメント欄で教えていただけると幸いです！