PlantUML備忘録(画面遷移図)

画面遷移図で役立った構文

業務で画面遷移図(状態遷移図)を描きながら開発しているシステムの理解、未解決のバグを理解するタスクに取り組んだ時に助けられた構文を備忘録として残しておこうと思います。

合成状態

タブ遷移などを描くときに便利な構文として合成状態が有ります。

@startuml
left to right direction
title Example State Transition Diagram1

[*] -down-> メニュー1
メニュー1 -down-> メニュー2

state メニュー2 {
	[*] -down-> 概要
    概要 -down-> 詳細 : 詳細
    詳細 -down-> 概要 : 概要
}
@enduml

• 参考: 合成状態

同じ名前の使用

別の画面内の同名のタブを考慮したい時が有ります。まずは利用しなかった場合にどうなるかを示します。正しく画面遷移が表せていません。

正しくない構文例

@startuml
hide empty description
left to right direction
title Example State Transition Diagram2

[*] -down-> メニュー1
メニュー1 -down-> メニュー2

state メニュー2 {
	[*] -down-> 概要
    概要 -down-> 詳細 : 詳細
    詳細 -down-> 概要 : 概要
}

[*] -down-> メニュー3
メニュー3 -down-> メニュー4

state メニュー4 {
	[*] -down-> 概要
    概要 -down-> 詳細 : 詳細
    詳細 -down-> 概要 : 概要
}
@enduml

ここで別名を付ける構文を利用します。利用した結果を以下に示します。

正しい構文例

@startuml
left to right direction
title Example State Transition Diagram3

[*] -down-> メニュー1
メニュー1 -down-> メニュー2

state メニュー2 {
	state "概要" as メニュー2概要
    state "詳細" as メニュー2詳細
	[*] -down-> メニュー2概要
    メニュー2概要 -down-> メニュー2詳細 : 詳細
    メニュー2詳細 -down-> メニュー2概要 : 概要
}

[*] -down-> メニュー3
メニュー3 -down-> メニュー4

state メニュー4 {
	state "概要" as メニュー4概要
    state "詳細" as メニュー4詳細
	[*] -down-> メニュー4概要
    メニュー4概要 -down-> メニュー4詳細 : 詳細
    メニュー4詳細 -down-> メニュー4概要 : 概要
}
@enduml

意図した通りの遷移図になりました。

• 参考: 長い名前

説明文記載欄は削除

画面(ステート)を表す四角の2行目は説明文が入りますが、不要な場合は邪魔です。取り除く構文は以下の様になります。

@startuml
hide empty description
left to right direction
title Example State Transition Diagram1

[*] -down-> メニュー1
メニュー1 -down-> メニュー2

state メニュー2 {
	state "概要" as メニュー2概要
    state "詳細" as メニュー2詳細 : 説明を書いた場合は残ります。
	[*] -down-> メニュー2概要
    メニュー2概要 -down-> メニュー2詳細 : 詳細
    メニュー2詳細 -down-> メニュー2概要 : 概要
}
@enduml

• 参考: ステートの表現を変える