Diagramme d'états
La syntaxe du diagramme d'états de Mermaid est compatible avec la syntaxe utilisée dans plantUml, ce qui permet aux utilisateurs de partager plus facilement des diagrammes entre mermaid et plantUml.
Copier
Intégrer
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Ancien éditeur :
Copier
Intégrer
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Nouvel éditeur :
Dans un diagramme d'états, le système est décrit par ses états et par la manière dont un état passe à un autre au moyen d'une transition. L'exemple ci-dessus montre trois états : immobile, en mouvement et collision. Vous commencez par l'état immobile, puis depuis l'état immobile vous pouvez passer à l'état en mouvement. Depuis l'état en mouvement, vous pouvez revenir à l'état immobile ou passer à l'état de collision. Il n'existe pas de transition de l'état immobile vers l'état de collision. (Si vous restez immobile, vous n'entrez pas en collision.)
状态
Un état peut être déclaré de plusieurs manières ; la plus simple consiste à définir un état avec un simple id :
Copier
Intégrer
stateDiagram-v2
stateId
Une autre méthode consiste à utiliser la syntaxe state en ajoutant la description suivante :
Copier
Intégrer
stateDiagram-v2
state "This is a state description" as s2
Une autre façon de définir un état avec une description consiste à définir d'abord l'ID de l'état, puis à ajouter deux-points et la description :
Copier
Intégrer
stateDiagram-v2
s2 : This is a state description
Transition
Une transition est la ligne de connexion qui relie un état à un autre ; elle est représentée par la flèche textuelle "-->" .
Lorsque vous définissez une transition entre deux états et que l'état n'est pas encore défini, l'état non défini sera défini à l'aide de l'id de la transition. Par la suite, vous pourrez ajouter une description à l'état ainsi défini.
Copier
Intégrer
stateDiagram-v2
s1 --> s2
Vous pouvez ajouter du texte à une transition pour décrire ce qu'elle représente :
Copier
Intégrer
stateDiagram-v2
s1 --> s2: A transition
Début et fin
Deux états spéciaux représentent le début et l'arrêt du diagramme. Ces deux états sont représentés à l'aide de la syntaxe [*] , et le sens de la transition vers cet état détermine s'il s'agit d'un état de début ou de fin.
Copier
Intégrer
stateDiagram-v2
[*] --> s1
s1 --> [*]
État composite
Lorsque vous utilisez des diagrammes d'états dans le monde réel, vous rencontrez souvent des diagrammes multidimensionnels, car un état peut contenir plusieurs états internes ; c'est ce qu'on appelle un état composite.
Pour définir un état composite, vous devez utiliser la syntaxe state, suivie d'un id, et écrire le corps de l'état composite entre accolades {} . Vous pouvez nommer l'état composite sur une ligne distincte, comme pour définir un état simple. Voir l'exemple ci-dessous :
Copier
Intégrer
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Vous pouvez opérer sur plusieurs niveaux :
Copier
Intégrer
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Vous pouvez également définir des transitions entre états composites :
Copier
Intégrer
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Remarque : les transitions entre états internes appartenant à des états composites différents ne peuvent pas être définies.
Choix
Il est parfois nécessaire de simuler un choix entre deux chemins ou plus ; cela peut être réalisé à l'aide de <<choice>> .
Copier
Intégrer
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Bifurcation/fusion
Vous pouvez utiliser <<fork>> <<join>> pour spécifier une bifurcation ou une fusion dans le diagramme.
Copier
Intégrer
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 --> [*]
Remarque
L'utilisation de commentaires dans un diagramme d'états permet une expression plus claire ; vous pouvez choisir de placer le commentaire à droite ou à gauche du nœud.
Copier
Intégrer
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.
Concurrence
Comme dans plantUml, vous pouvez spécifier la concurrence à l'aide du symbole de tiret -- .
Copier
Intégrer
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
}
Définir la direction du diagramme
Pour les diagrammes d'états, vous pouvez utiliser une instruction de direction pour définir la direction de rendu du diagramme, comme le montre cet exemple.
Copier
Intégrer
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Commentaire
Vous pouvez saisir des commentaires dans un diagramme d'états ; l'éditeur les ignorera. Un commentaire doit commencer par un double signe de pourcentage (%%) ; tout texte allant de ce marqueur jusqu'au prochain retour à la ligne est considéré comme un commentaire, y compris toute syntaxe de diagramme. Un commentaire peut occuper une ligne à lui seul ou être placé à la fin d'une instruction.
Copier
Intégrer
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Définir des styles à l'aide de classDefs
Limitations actuelles de classDef dans les diagrammes d'états :
1. Ne peut pas être appliqué aux états de début ou de fin
2. Ne peut pas être appliqué à un état composite ni à l'intérieur d'un état composite
Vous pouvez définir des styles à l'aide de la syntaxe classDef (abréviation de class definition, où « class » est analogue à une classe en CSS). classDef est suivi du nom du style, puis d'une ou plusieurs paires « propriété-valeur », chaque « propriété-valeur » étant composée d'un nom de propriété CSS valide, d'un deux-points (:) et de la valeur correspondante.
Voici un exemple de classDef ne comportant qu'une seule paire « propriété-valeur » :
Copier
Intégrer
classDef movement font-style:italic;
- Le nom du style est movement
- La seule propriété est font-style, dont la valeur est italic
Si vous souhaitez avoir plusieurs paires « propriété-valeur », vous pouvez placer une virgule (,) entre chaque paire.
Voici un exemple comportant trois paires « propriété-valeur » :
Copier
Intégrer
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Le nom du style est badBadEvent
- La première propriété est fill, dont la valeur est #f00
- La deuxième propriété est color, dont la valeur est white
- La troisième propriété est font-weight, dont la valeur est bold
- La quatrième propriété est stroke-width, dont la valeur est 2px
- La cinquième propriété est stroke, dont la valeur est yellow
Appliquer un style classDef à un état
Il existe deux façons d'appliquer un style classDef à un état :
- Utiliser la syntaxe class pour appliquer un style classDef à un ou plusieurs états dans une même instruction
- Utiliser l'opérateur ::: pour appliquer un style classDef lorsqu'un état est utilisé dans une instruction de transition (par exemple, avec une flèche pointant vers/depuis un autre état)
1. L'instruction class
L'instruction class indique à Mermaid d'appliquer le classDef spécifié à une ou plusieurs classes. Sa forme est :
Copier
Intégrer
class [one or more state names, separated by commas] [name of a style defined with classDef]
Voici un exemple qui applique le style badBadEvent à l'état nommé Crash :
Copier
Intégrer
class Crash badBadEvent
Voici un exemple qui applique le style movement aux deux états Moving et Crash :
Copier
Intégrer
class Moving,Crash movement
Voici un exemple. Notez que l'état Crash applique deux styles classDef : movement et badBadEvent
Copier
Intégrer
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. Appliquer un style à un état à l'aide de l'opérateur :::
Vous pouvez appliquer un style classDef à un état à l'aide de l'opérateur ::: . La syntaxe est :
Copier
Intégrer
[state]:::[style name]
Vous pouvez l'appliquer dans une instruction utilisant une classe, ce qui inclut les états de début et de fin. Par exemple :
Copier
Intégrer
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 --> [*]
Espaces dans le nom d'un état
Vous pouvez d'abord définir un état à l'aide d'un id, puis référencer cet id ultérieurement pour ajouter des espaces à l'état.
Dans l'exemple suivant, il y a un état dont l'ID est yswsii, décrit par ''Your state with spaces in it''. Après sa définition, yswsii est utilisé dans la première transition du diagramme ( [*] --> yswsii ), et il est également utilisé lors de la transition vers YetAnotherState ( yswsii --> YetAnotherState ). yswsii a été stylisé pour le distinguer des autres états.
Copier
Intégrer
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 --> [*]
