ロバストネス図をvscodeとPlantUMLで作成する
概要
「ユースケース駆動開発実践ガイド」（以下「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 を開きダウンロードしたフォントを追加しましょう。（動作には問題ありません）
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
詳しくは以下を参照してください
ロバストネス図を作成
ロバストネス図を作成します。
UCDD 本の図 5.5 の例をもとにを作成します。
今までの書き方を元にロバストネス図は作成できます。
自分の調査不足だと思いますが、一部の記号（「、」、？）が使用できませんでした。
基本コースは通常色で、代替コースには#Red/Yelloを使用したいと思います。
ユースケース記述
基本コース
ユーザーはどかのページから「ログイン」リンクをクリックする。システムは「ログイン」ページを表示する。ユーザーはユーザー名とパスワードを入力して「ログイン」ボタンをクリックする。システムはそのユーザーのアカウントが存在するかどうかを確認するために、マスターアカウントリストをチェックする。もしアカウントが存在すれば、システムはパスワードをチェックする。システムはアカウント情報を取得して認証されたセッションを開始し、歓迎メッセージとともに直前のページを再表示する
代替コース
ユーザーがパスワードを忘れた場合: ユーザーは「私のパスワードは」リンクをクリックする。まだユーザー名が入力されていない場合、システムはユーザーにユーザー名入力ページを表示し、アカウント情報を取得してパスワードをユーザーにメールする
アカウントが正しくない場合: システムは、「ユーザー名またはパスワード」が正しくないことを示すメッセージを示すメッセージを表示し、アカウント情報を取得してパスワードをユーザーにメールする。
パスワードが正しくない場合: システムは「ユーザーユーザー名またはパスワード」が正しくないことを示すメッセージを表示し、ユーザーにそれらの再入力をうながす。
ユーザーがログインキャンセルした場合: システムは直前のページを再表示する
３回目のログイン失敗の場合: システムはユーザーのアカウントをロックする。ユーザーはロックを解除するためにカスタマーサービスに連絡しなければならない
ユースケーシ記述をもとに 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
参考
Discussion