PlantUML でシーケンス図を作成してみよう！

PlantUMLの導入についてはこの記事を参考にしました
https://qiita.com/Charotarou/items/10bd47c68a1190061858

株式会社オフグリッドでは、主に未経験、または経験が浅い社員を対象に研修制度を設けています。
基本的な座学を一通り受講した後、実際にPython flaskを使ってログイン機能を持つダッシュボード画面を作成します。

今回はそのログイン処理をシーケンス図にしてみます。

処理の流れはこうです
1.ユーザーがログイン画面に、データ（メールアドレスとパスワード）を入力する
2.ログイン画面（フロントエンド）からバックエンドに入力情報を渡す
3.バックエンドで、受け取った入力データのバリデーションチェックを行う
4.バリデーションチェックで問題がなければ、ユーザー情報を管理しているデータベース上に、受信したユーザーデータが存在するか確認する
5.登録済みユーザーと一致した場合はダッシュボード画面を表示、一致しない場合はエラーメッセージを表示する

うーん、文章だけだとよくわからないですね。
そこでシーケンス図で処理の流れを整理します。

文章だけよりはマシになったんじゃないでしょうか？
ただこれだけだとまだ寂しいですね

各処理に番号を自動採番し、色を着けてみました。

ソースはこんな感じです

login.pu

@startuml sequence
' シーケンスタイトル
title ダッシュボードログイン処理
' 番号の自動採番
autonumber 1

' 色設定
skinparam ParticipantBackgroundColor orange
skinparam SequenceLifeLineBackgroundColor lightBlue

' 登場人物
actor ユーザー as user
participant 画面表示 as fe
participant バックエンド as be
participant データベース as db

activate user
activate fe
activate be
group ログイン処理
    ' \nで改行できる！横に長くなりすぎたら、いいところで改行しましょう
    user -> fe :メールアドレス、パスワードを入力、\nログインボタンをクリックする

    fe -> be:入力データ送信
    be -> be:バリデーションチェック

    opt 入力値に異常な値があった場合
        be --> fe:エラーメッセージ：入力できない文字が含まれています
    end

    be -> db :メールアドレスとパスワードを暗号化した値でデータ取得要求
    activate db
    return データ取得応答
    
    alt データ取得件数０件の場合
        be --> fe:エラーメッセージ：\nメールアドレスが登録されていないか、パスワードが違います

    else データ取得件数１件の場合
        be --> fe :ダッシュボード画面を表示する
    end

end
deactivate fe
deactivate be
deactivate user
@enduml

いかがでしたか。
シーケンス図の作成方法として、今回紹介したPlantUMLのほかに、エクセルなどで図を組み合わせて作図する方法もありますが、なかなかきれいにできなかったり、あとで修正しようと思うと大変です。
手軽に始められるのでぜひ試してみてください。