상태 다이어그램
Mermaid 상태 다이어그램 문법은 plantUml에서 사용되는 문법과 호환되므로 사용자가 mermaid 와 plantUml 사이에서 다이어그램을 더 쉽게 공유할 수 있습니다.
복사
임베드
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
이전 편집기:
복사
임베드
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
새 편집기:
상태 다이어그램에서 시스템은 상태와 한 상태가 전환을 통해 다른 상태로 변경되는 방식으로 설명됩니다. 위의 예시 다이어그램은 정지, 이동, 충돌의 세 가지 상태를 보여줍니다. 정지 상태에서 시작하며 정지 상태에서 이동 상태로 변경할 수 있습니다. 이동 상태에서 정지 상태로 돌아가거나 충돌 상태로 변경할 수 있습니다. 정지 상태에서 충돌 상태로의 전환은 없습니다. (정지해 있으면 충돌하지 않습니다.)
状态
여러 가지 방법으로 상태를 선언할 수 있으며, 가장 간단한 방법은 id만으로 상태를 정의하는 것입니다:
복사
임베드
stateDiagram-v2
stateId
또 다른 방법은 state 문법을 사용하고 다음 설명을 추가하는 것입니다:
복사
임베드
stateDiagram-v2
state "This is a state description" as s2
설명이 있는 상태를 정의하는 또 다른 방법은 먼저 상태 ID를 정의한 다음 콜론과 설명을 추가하는 것입니다:
복사
임베드
stateDiagram-v2
s2 : This is a state description
전환
전환은 한 상태가 다른 상태로 진입할 때의 연결선을 말하며, 텍스트 화살표 "-->" 로 표현됩니다.
두 상태 사이의 전환을 정의하고 상태가 아직 정의되지 않은 경우, 정의되지 않은 상태는 전환의 id를 사용하여 정의됩니다. 이후 이 방식으로 정의된 상태에 설명을 추가할 수 있습니다.
복사
임베드
stateDiagram-v2
s1 --> s2
전환에 텍스트를 추가하여 그것이 나타내는 내용을 설명할 수 있습니다:
복사
임베드
stateDiagram-v2
s1 --> s2: A transition
시작과 끝
차트의 시작과 정지를 나타내는 두 가지 특수 상태가 있습니다. 이 두 상태는 [*] 문법으로 표현되며, 해당 상태로의 전환 방향이 시작 상태인지 종료 상태인지를 결정합니다.
복사
임베드
stateDiagram-v2
[*] --> s1
s1 --> [*]
복합 상태
실제 세계에서 상태 다이어그램을 사용할 때, 하나의 상태가 여러 내부 상태를 가질 수 있기 때문에 다차원 다이어그램을 자주 접하게 되며, 이를 복합 상태라고 합니다.
복합 상태를 정의하려면 state 문법 뒤에 id를 붙이고 중괄호 {} 안에 복합 상태의 본문을 작성해야 합니다. 단순 상태를 정의하듯이 별도의 줄에 복합 상태의 이름을 지정할 수 있습니다. 아래 예를 참조하세요:
복사
임베드
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
여러 계층으로 나누어 작업할 수 있습니다:
복사
임베드
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
복합 상태 간의 전환도 정의할 수 있습니다:
복사
임베드
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
참고: 서로 다른 복합 상태에 속하는 내부 상태 간의 전환은 정의할 수 없습니다.
선택
때로 두 개 이상의 경로 중에서 선택하는 것을 시뮬레이션해야 할 수 있으며, <<choice>> 를 사용하여 구현할 수 있습니다.
복사
임베드
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
분기/병합
<<fork>> <<join>> 을 사용하여 다이어그램에 분기/병합을 지정할 수 있습니다.
복사
임베드
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
참고
상태 다이어그램에서 주석을 사용하면 더 명확하게 표현할 수 있으며, 주석을 노드의 오른쪽 또는 왼쪽에 배치하도록 선택할 수 있습니다.
복사
임베드
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
동시성
plantUml 에서와 마찬가지로 하이픈 기호 -- 를 사용하여 동시성을 지정할 수 있습니다.
복사
임베드
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
차트 방향 설정
상태 다이어그램의 경우 이 예에서와 같이 방향 문을 사용하여 차트 렌더링 방향을 설정할 수 있습니다.
복사
임베드
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
주석
상태 다이어그램에 주석을 입력할 수 있으며 편집기는 이러한 주석을 무시합니다. 주석은 이중 퍼센트 기호(%%)로 시작해야 하며, 해당 표시부터 다음 줄바꿈 문자 사이의 모든 텍스트는 모든 차트 문법을 포함하여 주석으로 간주됩니다. 주석은 한 줄을 단독으로 차지할 수도 있고 문 끝에 놓을 수도 있습니다.
복사
임베드
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
classDefs 를 사용한 스타일 설정
상태 다이어그램 classDef 현재 제한 사항:
1. 시작 또는 종료 상태에 적용할 수 없습니다.
2. 복합 상태 또는 복합 상태 내부에 적용할 수 없습니다.
classDef 문법(즉, class definition의 약자로, 여기서 "class"는 CSS의 클래스와 유사함)을 사용하여 스타일을 정의할 수 있습니다. classDef 뒤에는 스타일 이름이 오고, 이어서 하나 이상의 '속성-값'이 오며, 각 '속성-값'은 유효한 CSS 속성 이름, 콜론(:) 및 해당 값으로 구성됩니다.
다음은 '속성-값'이 하나만 있는 classDef 의 예입니다:
복사
임베드
classDef movement font-style:italic;
- 스타일 이름은 movement 입니다.
- 유일한 속성은 font-style 이고 값은 italic 입니다.
여러 '속성-값'을 가지려면 각 '속성-값' 사이에 쉼표(,)를 넣으면 됩니다.
다음은 세 개의 '속성-값'을 포함하는 예입니다:
복사
임베드
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- 스타일 이름은 badBadEvent 입니다.
- 첫 번째 속성은 fill 이고 그 값은 #f00 입니다.
- 두 번째 속성은 color 이고 그 값은 white 입니다.
- 세 번째 속성은 font-weight 이고 그 값은 bold 입니다.
- 네 번째 속성은 stroke-width 이고 그 값은 2px 입니다.
- 다섯 번째 속성은 stroke 이고 그 값은 yellow 입니다.
classDef 스타일을 상태에 적용
classDef 스타일을 상태에 적용하는 두 가지 방법이 있습니다:
- class 문법을 사용하여 하나의 문에서 하나 이상의 상태에 classDef 스타일을 적용합니다.
- ::: 연산자를 사용하여 상태가 전환 문에 사용될 때 classDef 스타일을 적용합니다(예: 다른 상태를 향하거나 다른 상태에서 오는 화살표가 있는 경우)
1. class 문
class 문은 Mermaid 에게 지정된 classDef 를 하나 이상의 클래스에 적용하도록 지시합니다. 형식은 다음과 같습니다:
복사
임베드
class [one or more state names, separated by commas] [name of a style defined with classDef]
다음은 badBadEvent 스타일을 Crash 라는 상태에 적용하는 예입니다:
복사
임베드
class Crash badBadEvent
다음은 movement 스타일을 Moving 과 Crash 두 상태에 적용하는 예입니다:
복사
임베드
class Moving,Crash movement
여기 예가 있습니다. Crash 상태에 두 개의 classDef 스타일(movement 와 badBadEvent)이 적용되어 있습니다.
복사
임베드
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*]--> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
class end badBadEvent
2. ::: 연산자를 사용하여 상태에 스타일 적용
::: 연산자를 사용하여 classDef 스타일을 상태에 적용할 수 있습니다. 문법은 다음과 같습니다:
복사
임베드
[state]:::[style name]
클래스를 사용하는 문에서 적용할 수 있으며, 여기에는 시작 상태와 종료 상태가 포함됩니다. 예:
복사
임베드
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
상태 이름의 공백
먼저 id를 사용하여 상태를 정의한 다음, 나중에 해당 id를 참조하여 상태에 공백을 추가할 수 있습니다.
다음 예에는 ID 가 yswsii 이고 ''Your state with spaces in it'' 로 설명되는 상태가 있습니다. 정의 후 yswsii 는 차트의 첫 번째 전환([*] --> yswsii)과 YetAnotherState 로의 전환(yswsii --> YetAnotherState)에서도 사용됩니다. yswsii 는 다른 상태와 다르게 보이도록 스타일이 설정되었습니다.
복사
임베드
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
