Diagrama de estados
A sintaxe do diagrama de estados do Mermaid é compatível com a sintaxe usada no plantUml, o que facilita o compartilhamento de diagramas entre o mermaid e o plantUml.
Copiar
Incorporar
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Editor antigo:
Copiar
Incorporar
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Novo editor:
Em um diagrama de estados, o sistema é descrito por meio de estados e de como um estado passa para outro por meio de transições. O exemplo de diagrama acima mostra três estados: parado, em movimento e colisão. Você começa no estado parado e, a partir do estado parado, pode passar para o estado em movimento. A partir do estado em movimento, você pode voltar ao estado parado ou passar ao estado de colisão. Não há transição do estado parado para o estado de colisão. (Se permanecer parado, você não colidirá.)
状态
É possível declarar estados de várias maneiras; a mais simples é definir um estado apenas com um id:
Copiar
Incorporar
stateDiagram-v2
stateId
Outra maneira é usar a sintaxe state, adicionando a seguinte descrição:
Copiar
Incorporar
stateDiagram-v2
state "This is a state description" as s2
Outra forma de definir um estado com descrição é definir primeiro o ID do estado e depois adicionar dois-pontos e a descrição:
Copiar
Incorporar
stateDiagram-v2
s2 : This is a state description
Transição
Uma transição é a linha de conexão que ocorre quando um estado passa para outro, representada pela seta de texto "-->".
Quando você define uma transição entre dois estados e o estado ainda não foi definido, o estado indefinido será definido usando o id da transição. Depois, você pode adicionar uma descrição ao estado definido dessa forma.
Copiar
Incorporar
stateDiagram-v2
s1 --> s2
É possível adicionar texto a uma transição para descrever o que ela representa:
Copiar
Incorporar
stateDiagram-v2
s1 --> s2: A transition
Início e fim
Há dois estados especiais que representam o início e a parada do diagrama. Esses dois estados são representados pela sintaxe [*], e a direção da transição para esse estado determina se ele é o estado inicial ou o estado final.
Copiar
Incorporar
stateDiagram-v2
[*] --> s1
s1 --> [*]
Estado composto
Ao usar diagramas de estados no mundo real, você frequentemente encontra diagramas multidimensionais, pois um estado pode ter vários estados internos; isso é chamado de estado composto.
Para definir um estado composto, você precisa usar a sintaxe state, seguida de um id, e escrever o corpo do estado composto entre chaves {}. Você pode nomear o estado composto em uma linha separada, como faz ao definir um estado simples. Consulte o exemplo abaixo:
Copiar
Incorporar
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Você pode trabalhar em vários níveis:
Copiar
Incorporar
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Você também pode definir transições entre estados compostos:
Copiar
Incorporar
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Observação: não é possível definir transições entre estados internos que pertencem a estados compostos diferentes.
Escolha
Às vezes você precisa simular a escolha entre dois ou mais caminhos; isso pode ser feito com <<choice>>.
Copiar
Incorporar
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Bifurcação/Mesclagem
É possível usar <<fork>> e <<join>> para especificar uma bifurcação/junção no diagrama.
Copiar
Incorporar
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 --> [*]
Observação
O uso de comentários em diagramas de estados permite uma expressão mais clara; você pode optar por colocar o comentário à direita ou à esquerda do nó.
Copiar
Incorporar
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.
Concorrência
Assim como no plantUml, você pode usar o símbolo de hífen -- para especificar a concorrência.
Copiar
Incorporar
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
}
Definir a direção do diagrama
Para diagramas de estados, você pode usar uma instrução de direção para definir a direção de renderização do diagrama, como neste exemplo.
Copiar
Incorporar
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Comentário
É possível inserir comentários em um diagrama de estados; o editor irá ignorá-los. Os comentários devem começar com dois sinais de porcentagem (%%); todo o texto desde essa marcação até a próxima quebra de linha será considerado comentário, incluindo qualquer sintaxe de diagrama. Os comentários podem ocupar uma linha própria ou ser colocados no final de uma instrução.
Copiar
Incorporar
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Definir estilos com classDefs
Limitações atuais do classDef em diagramas de estados:
1. Não pode ser aplicado a estados iniciais ou finais
2. Não pode ser aplicado a um estado composto nem dentro de um estado composto
Você pode usar a sintaxe classDef (abreviação de class definition, em que "class" é semelhante a uma classe em CSS) para definir estilos. Depois de classDef vem o nome do estilo, seguido de um ou mais pares 'propriedade-valor', cada um composto por um nome de propriedade CSS válido, dois-pontos (:) e o valor correspondente.
A seguir está um exemplo de classDef com apenas um par 'propriedade-valor':
Copiar
Incorporar
classDef movement font-style:italic;
- O nome do estilo é movement
- A única propriedade é font-style, e o valor é italic
Se você quiser ter vários pares 'propriedade-valor', pode colocar uma vírgula (,) entre cada par 'propriedade-valor'.
A seguir está um exemplo com três pares 'propriedade-valor':
Copiar
Incorporar
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- O nome do estilo é badBadEvent
- A primeira propriedade é fill, e seu valor é #f00
- A segunda propriedade é color, e seu valor é white
- A terceira propriedade é font-weight, e seu valor é bold
- A quarta propriedade é stroke-width, e seu valor é 2px
- A quinta propriedade é stroke, e seu valor é yellow
Aplicar estilos classDef a estados
Há duas maneiras de aplicar estilos classDef a estados:
- Use a sintaxe class para aplicar um estilo classDef a um ou mais estados em uma única instrução
- Use o operador ::: para aplicar um estilo classDef quando um estado é usado em uma instrução de transição (por exemplo, com uma seta apontando para/partindo de outro estado)
1. Instrução class
A instrução class diz ao Mermaid para aplicar o classDef especificado a uma ou mais classes. A forma é:
Copiar
Incorporar
class [one or more state names, separated by commas] [name of a style defined with classDef]
A seguir está um exemplo de aplicação do estilo badBadEvent ao estado chamado Crash:
Copiar
Incorporar
class Crash badBadEvent
A seguir está um exemplo de aplicação do estilo movement aos estados Moving e Crash:
Copiar
Incorporar
class Moving,Crash movement
Aqui está um exemplo. Observe que o estado Crash aplica dois estilos classDef: movement e badBadEvent
Copiar
Incorporar
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. Aplicar estilo a estados com o operador :::
Você pode usar o operador ::: para aplicar um estilo classDef a um estado. A sintaxe é:
Copiar
Incorporar
[state]:::[style name]
Você pode aplicá-lo em instruções que usam classes, incluindo estados inicial e final. Por exemplo:
Copiar
Incorporar
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 --> [*]
Espaços no nome do estado
Você pode definir primeiro o estado usando um id e depois referenciar esse id para adicionar espaços ao estado.
No exemplo a seguir, há um estado cujo ID é yswsii, descrito como ''Your state with spaces in it''. Após a definição, yswsii é usado na primeira transição do diagrama ([*] --> yswsii) e também é usado ao transitar para YetAnotherState (yswsii --> YetAnotherState). yswsii foi estilizado para diferenciá-lo dos outros estados.
Copiar
Incorporar
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 --> [*]
