😎

ロバストネス図をvscodeとPlantUMLで作成する

5 min read

概要

ユースケース駆動開発実践ガイド」(以下「UCDD 本」)を読んで、ICONIX プロセスを実践しています。
普段、ER 図やクラス図などを作成するときには draw.io を vscode で使っているのですが、ロバストネス図を作成するコンポーネント(ドメインオブジェクト、バウンダリオブジェクト、コントローラなど)が用意されていなさそうでした。
そこで、draw.io の代わりに、vscode と PlantUML を使うことで、ロバストネス図を作成したいと思います。

環境構築

brew

vscode で PlantUML を使うためには、以下をインストールする必要があります。

brew install graphviz
brew install plantuml

vscode

vscode で、拡張機能 PlantUML をインストールします。

動作確認

以下の test.puml ファイルを作成します。
uml でも動作しますが、デフォルトではシンタクッスが puml に有効になっているため、拡張子は puml にします。

@startuml

usecase ユースケース
actor アクター
boundary バウンダリオブジェクト
control コントローラ
entity エンティティオブジェクト

@enduml

option+d を実行したさいに、画像のようにプレビューが表示されたら成功です。

以下のコマンドで画像を生成することができます。

plantuml test.puml

vscode 上で赤い!マックが表示されWarning: the fonts "Times" and "Times" are not available for the Java logical font "Serif", which may have unexpected appearance or behavior. Re-enable the "Times" font to remove this warning.が記述されていたら、以下のサイトからダウンロードし、Mac 上で FontBook を開きダウンロードしたフォントを追加しましょう。(動作には問題ありません)

https://www.freebestfonts.com/timr45w-font#google_vignette

PlanUML の基本的な描き方

コンポーネント

ロバストネス図のコンポーネントは以下のようにコンポーネント コンポーネント名で記述することで描写されます。

@startuml

usecase ユースケース
actor アクター
boundary バウンダリオブジェクト
control コントローラ
entity エンティティオブジェクト

@enduml

バウンダリオブジェクト名を二つ記述して間に-または--を書くことで線を引くことができます。
---の違いは方向(-が横向きで--が縦向き)が違います。

@startuml

usecase ユースケース
actor アクター
boundary バウンダリオブジェクト
control コントローラ
entity エンティティオブジェクト

アクター -- バウンダリオブジェクト
バウンダリオブジェクト - コントローラ
コントローラ -- エンティティオブジェクト

@enduml

矢印

線に>または、<を追加することで矢印にすることができます。

@startuml

usecase ユースケース

control コントローラ1
control コントローラ2

コントローラ1 --> コントローラ2

@enduml

線(矢印)に言葉を付与する

線(矢印)に言葉を付与したい場合は、該当箇所の末尾に: 言葉を追加することで追加されます。

@startuml

usecase ユースケース

control コントローラ1
control コントローラ2
control コントローラ3

コントローラ1 --> コントローラ2 : はい
コントローラ1 --> コントローラ3 : いいえ

@enduml

コンポーネントの色を変更する

コンポーネント色を変更するには、コンポーネントを宣言する箇所の末尾にを追加します。
以下の例では#Red/Yelloでグラデーションを指定していますが、#Red#Yellowなどの単色を指定できます。

@startuml

usecase ユースケース

control コントローラ1
control コントローラ2
control コントローラ3 #Red/Yellow

コントローラ1 --> コントローラ2 : はい
コントローラ1 --> コントローラ3 : いいえ

@enduml

詳しくは以下を参照してください

https://plantuml.com/ja/color

ロバストネス図を作成

ロバストネス図を作成します。
UCDD 本の図 5.5 の例をもとにを作成します。

今までの書き方を元にロバストネス図は作成できます。
自分の調査不足だと思いますが、一部の記号(「、」、?)が使用できませんでした。
基本コースは通常色で、代替コースには#Red/Yelloを使用したいと思います。

ユースケース記述

基本コース

ユーザーはどかのページから「ログイン」リンクをクリックする。システムは「ログイン」ページを表示する。ユーザーはユーザー名とパスワードを入力して「ログイン」ボタンをクリックする。システムはそのユーザーのアカウントが存在するかどうかを確認するために、マスターアカウントリストをチェックする。もしアカウントが存在すれば、システムはパスワードをチェックする。システムはアカウント情報を取得して認証されたセッションを開始し、歓迎メッセージとともに直前のページを再表示する

代替コース

ユーザーがパスワードを忘れた場合: ユーザーは「私のパスワードは」リンクをクリックする。まだユーザー名が入力されていない場合、システムはユーザーにユーザー名入力ページを表示し、アカウント情報を取得してパスワードをユーザーにメールする

アカウントが正しくない場合: システムは、「ユーザー名またはパスワード」が正しくないことを示すメッセージを示すメッセージを表示し、アカウント情報を取得してパスワードをユーザーにメールする。

パスワードが正しくない場合: システムは「ユーザーユーザー名またはパスワード」が正しくないことを示すメッセージを表示し、ユーザーにそれらの再入力をうながす。

ユーザーがログインキャンセルした場合: システムは直前のページを再表示する

3回目のログイン失敗の場合: システムはユーザーのアカウントをロックする。ユーザーはロックを解除するためにカスタマーサービスに連絡しなければならない

ユースケーシ記述をもとに puml ファイルを作成すると以下になります。
p.126 の図 5.5 と違って、コントローラのアカウント情報を取得するが一つにまとまってしまったので少し歪な形になってしまいました。
しかし、これでも大分みやすく調整したほうなので、綺麗にかけるようになるには練習が必要だと思いました。

@startuml

usecase ログインする

actor ユーザー
boundary ログインページ
control ログインページを表示する
control ユーザ名とパスワードを入力する
control アカウントは存在するか
entity マスターアカウントリスト
control アカウント情報を取得する
entity アカウント
control パスワードは正しいか
control アカウント情報を取得する
control 認証済みのセッションを開始する
control 歓迎メッセージとともに直前のページを再表示する

control 私のパスワードはリンクをクリックする #Red/Yellow
control ユーザー名入力ページを表示する #Red/Yellow
boundary ユーザー名入力ページ #Red/Yellow
control ユーザーにパスワードをメールする #Red/Yellow

control ユーザー名またはパスワードが正しくないを表示 #Red/Yellow

control 3回目のログイン失敗か #Red/Yellow

control アカウントを凍結する #Red/Yellow

ユーザー - ログインページ
ログインページを表示する --> ログインページ
ログインページ -> ユーザ名とパスワードを入力する : ログインボタンをクリックする
ユーザ名とパスワードを入力する -> アカウントは存在するか
アカウントは存在するか - マスターアカウントリスト
アカウントは存在するか --> パスワードは正しいか : はい
パスワードは正しいか -> アカウント情報を取得する : はい
アカウント情報を取得する --> 認証済みのセッションを開始する
認証済みのセッションを開始する --> 歓迎メッセージとともに直前のページを再表示する
マスターアカウントリスト -- アカウント情報を取得する
アカウント情報を取得する -- アカウント
ログインページ -- 私のパスワードはリンクをクリックする
私のパスワードはリンクをクリックする -- ユーザー名入力ページを表示する
ユーザー名入力ページを表示する -- ユーザー名入力ページ
ユーザー名入力ページ <-- ユーザーにパスワードをメールする
アカウントは存在するか --> ユーザー名またはパスワードが正しくないを表示 : いいえ
3回目のログイン失敗か <- ユーザー名またはパスワードが正しくないを表示
ログインページ <- 3回目のログイン失敗か
アカウントを凍結する - アカウント
3回目のログイン失敗か - アカウントを凍結する

@enduml

参考

https://plantuml.com/ja/color

https://maku.blog/p/n8p7qmw/

https://html-coding.co.jp/knowhow/tips/plantuml/

Discussion

ログインするとコメントできます