화면 전환 다이어그램에서 유용한 구문

업무로 화면 천이도(상태 천이도)를 그리면서 개발하고 있는 시스템의 이해, 미해결의 버그를 이해하는 태스크에 임했을 때에 도와진 구문을 비망록으로서 남겨 두려고 생각합니다.

합성 상태

탭 천이 등을 그릴 때 편리한 구문으로서 합성 상태가 있습니다.

@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

참고: 상태의 표현을 변경