PlantUMLでシーケンス図を書こう！ | 底辺プログラマーヤスの雑記ブログ

皆さんこんにちは！底辺プログラマーのヤスです！

今回は現場でもよく使われるシーケンス図を
PlantUMLで描く方法を記事にしたいと思います。

処理の流れをシーケンス図に表せるようになると
コードがキレイに書けるようになります。

導入から基本的な使い方までを説明していきます。

Contents

PlantUML公式ドキュメント

下記のリンクをクリックすればPlantUML公式ドキュメントがあります。

ありますが、非常に広告が多くて鬱陶しい感じなのでお気をつけください。

https://plantuml.com/ja/

環境構築

PlantUMLでシーケンス図を描くためにはJavaとVSCodeが必要です。

筆者の環境はWindows10 64bitです。

もしかしたらOSが違うと環境構築方法が違うかもしれませんので、
ここではWindowsの方を対象にしたいと思います。

まぁJavaとVSCodeなんでmacとかでも使えるとは思いますが念の為。。。

Javaのインストール

下記のリンクからJavaをインストールしてください。
無料です。

https://java.com/ja/download/

こんなページが表示されるので『無料Javaのダウンロード』をクリックしてインストールしましょう。

Visual Studio Codeのインストール

下記のリンクからVisual Studio Codeをインストールしてください。
無料です。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

こんな画面が表示されるので『今すぐダウンロード』をクリックしてインストールを行ってください。

Visual Studio Codeの拡張機能でPlantUMLをインストール

Visual Studio Codeのインストールが終わったら起動してください。

左側のメニューに『拡張機能』があるので選択してください。

Marketplaceで拡張機能を検索すると表示されているテキストボックスに
【PlantUML】と入力してください。

PlantUMLが表示されたら『インストール』を選択しましょう。

これでPlantUMLでシーケンス図を書く準備は完了です。

基本的な図の書き方

.puのファイルを作成します。

そのファイルを開き、下記のコードを記載します。

@startuml
participant A
participant B
participant C
A -> B
B -> C
B <-- C
A <-- B
@enduml

@startuml

participant A

participant B

participant C

A -> B

B -> C

B <-- C

A <-- B

@enduml

右クリックで『カーソル位置のダイアグラムをプレビュー』を選択するか、
『Alt+D』でプレビュー画面が表示されます。

こんな感じの図があっという間に描けます。

記載するコードもかなり簡単で直感的じゃないですか？

条件分岐を表現する

次は条件分岐の描き方を説明します。
プログラムで言うとif文にですね。

条件分岐を表したい時は【alt】で記載します。
試しに下記のコードを打ち込んでみてください。

@startuml Login
Actor User
participant "スマホアプリ" as App
database "ユーザー情報" as DB
User -> App : ログイン要求(userid, password)
App -> DB : ユーザー情報検索
App <-- DB : 検索結果返却

alt userid, password不一致
    User <-- App : ログインに失敗しました！
else userid, password一致
    User <-- App : ログインに成功しました！
end 
@enduml

@startuml Login

Actor User

participant "スマホアプリ" as App

database "ユーザー情報" as DB

User -> App : ログイン要求(userid, password)

App -> DB : ユーザー情報検索

App <-- DB : 検索結果返却

alt userid, password不一致

User <-- App : ログインに失敗しました！

else userid, password一致

User <-- App : ログインに成功しました！

end

@enduml

こんな感じに表示されます。

スマホアプリのログイン機能の流れを表した図になります。

今どきサーバーを介さないでDBにアクセスする手法は使われませんが、
まぁこんな感じで表現できます。

altで記載された部分も直感的でわかりやすいですね！
単純にログインに失敗したら「ログインに失敗しました。」
ログインに成功したら「ログインに成功しました。」

というメッセージを出すだけのロジックです。

ループ処理を表現する

次はループ処理の描き方を説明します。
プログラムで言うところの【for】文【while】文などに相当しますね。

ループ処理を表現したい場合は【loop】で記載します。
試しに下記のコードを入力してみてください。

@startuml Login
Actor User
participant "ガチャ" as App

loop SRが引けるまでループ 
    User -> App : 100円でガチャを1回まわす！
    User <-- App

    alt 資金がない
        User -> User : 諦めて終了
        destroy User
    end
end 
@enduml

@startuml Login

Actor User

participant "ガチャ" as App

loop SRが引けるまでループ

User -> App : 100円でガチャを1回まわす！

User <-- App

alt 資金がない

User -> User : 諦めて終了

destroy User

end

@enduml

こんな感じに表示されます。

SRが出るまでひたすらガチャを回し続けるユーザーを表現しました。

最後の【資金がない】の条件分岐を入れておかなくては無限ループになってしまいますね。

リファレンスを使う

次はリファレンスについて説明します。

リファレンスというのは既に作成されている
別のシーケンス図と同じ処理であることを表現しています。

下記のコードを打ち込んでみてください。

@startuml stopcharge
Actor User1
Actor User2
participant "ガチャ" as App

ref over User2,App
    ガチャを引き続ける
end ref

User1 -> User2 : 結果を確認
User1 <-- User2

alt SRが引けなかった
    User1 -> User2 : 課金をやめろと諭す
    User1 <-- User2
end
@enduml

@startuml stopcharge

Actor User1

Actor User2

participant "ガチャ" as App

ref over User2,App

ガチャを引き続ける

end ref

User1 -> User2 : 結果を確認

User1 <-- User2

alt SRが引けなかった

User1 -> User2 : 課金をやめろと諭す

User1 <-- User2

end

@enduml

こんな感じで表示されます。

前回の章でガチャを回し続けるユーザーについて記載しましたが、
今回はそれを【ref】で表現することにしました。

【ref】内に『ガチャを引き続ける』と記載しましたが、
本来はファイル名か@startumlの横に記載されたタイトルを使うのが良いでしょう。

User1がUser2にこれ以上課金はするなよと諭す場面を図で表現しました。

説明するまでもなく直感的にわかるかと思います！

ノートを使う

ノートとは図だけでは表現しきれない部分を補足するための機能です。

記載すると付箋のような物が表示されます。

下記のコードを入力してみてください。

@startuml stopcharge
Actor User1
Actor User2
participant "ガチャ" as App

ref over User2,App
    ガチャを引き続ける
end ref

User1 -> User2 : 結果を確認
User1 <-- User2

alt SRが引けなかった
    note right User1
        User2が課金を止めないのは
        わかっているが。。。
    end note
    User1 -> User2 : 課金をやめろと諭す
    User1 <-- User2
end
@enduml