Diagrama de estados
La sintaxis del diagrama de estados de Mermaid es compatible con la sintaxis usada en plantUml, lo que facilita a los usuarios compartir diagramas entre mermaid y plantUml.
Copiar
Insertar
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Editor antiguo:
Copiar
Insertar
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Editor nuevo:
En un diagrama de estados, el sistema se describe mediante estados y mediante cómo un estado cambia a otro estado a través de una transición. El diagrama de ejemplo de arriba muestra tres estados: Quieto, En movimiento y Choque. Comienzas en el estado Quieto; desde el estado Quieto puedes pasar al estado En movimiento. Desde el estado En movimiento puedes volver al estado Quieto o pasar al estado Choque. No hay transición del estado Quieto al estado Choque. (Si permaneces quieto, no chocas.)
状态
Los estados pueden declararse de varias formas; la más sencilla es definir el estado solo con un id:
Copiar
Insertar
stateDiagram-v2
stateId
Otra forma es usar la sintaxis state y añadir la siguiente descripción:
Copiar
Insertar
stateDiagram-v2
state "This is a state description" as s2
Otra forma de definir un estado con descripción es definir primero el ID del estado y luego añadir dos puntos y la descripción:
Copiar
Insertar
stateDiagram-v2
s2 : This is a state description
Transición
Una transición es la línea de conexión cuando un estado pasa a otro estado, y se representa con la flecha de texto "-->".
Cuando defines una transición entre dos estados y los estados aún no están definidos, los estados no definidos se definirán usando el id de la transición. Después, puedes añadir una descripción a los estados definidos de esta forma.
Copiar
Insertar
stateDiagram-v2
s1 --> s2
Puedes añadir texto a la transición para describir lo que representa:
Copiar
Insertar
stateDiagram-v2
s1 --> s2: A transition
Inicio y fin
Hay dos estados especiales que representan el inicio y la parada del gráfico. Estos dos estados se representan con la sintaxis [*], y la dirección de la transición hacia ese estado determina si es un estado de inicio o un estado de fin.
Copiar
Insertar
stateDiagram-v2
[*] --> s1
s1 --> [*]
Estado compuesto
Al usar diagramas de estados en el mundo real, a menudo te encontrarás con gráficos multidimensionales, porque un estado puede tener varios estados internos; esto se conoce como estado compuesto.
Para definir un estado compuesto, necesitas usar la sintaxis state, seguida de un id, y escribir el cuerpo del estado compuesto entre llaves {}. Puedes nombrar el estado compuesto en una línea aparte, igual que defines un estado simple. Consulta el siguiente ejemplo:
Copiar
Insertar
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Puedes operar en varios niveles:
Copiar
Insertar
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
También puedes definir transiciones entre estados compuestos:
Copiar
Insertar
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Nota: no se pueden definir transiciones entre estados internos que pertenecen a estados compuestos diferentes.
Elección
A veces necesitas simular una elección entre dos o más rutas; puedes hacerlo con <<choice>>.
Copiar
Insertar
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Bifurcación/Fusión
Puedes usar <<fork>> <<join>> para especificar una bifurcación/fusión en el gráfico.
Copiar
Insertar
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 --> [*]
Nota
Usar comentarios en un diagrama de estados permite expresarse con más claridad; puedes elegir colocar el comentario a la derecha o a la izquierda del nodo.
Copiar
Insertar
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.
Concurrencia
Igual que en plantUml, puedes especificar la concurrencia con el símbolo de guion medio --.
Copiar
Insertar
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
}
Establecer la dirección del gráfico
Para el diagrama de estados, puedes usar una sentencia de dirección para establecer la dirección de renderizado del gráfico, como se muestra en este ejemplo.
Copiar
Insertar
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Comentario
Puedes introducir comentarios en el diagrama de estados; el editor los ignorará. El comentario debe empezar con doble signo de porcentaje (%%); todo el texto desde ese marcador hasta el siguiente salto de línea se considerará comentario, incluida cualquier sintaxis del gráfico. Los comentarios pueden ocupar una línea propia o colocarse al final de una sentencia.
Copiar
Insertar
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Establecer estilo con classDefs
Limitaciones actuales de classDef en diagramas de estados:
1. No se puede aplicar a los estados de inicio o fin
2. No se puede aplicar a los estados compuestos ni dentro de ellos
Puedes usar la sintaxis classDef (abreviatura de class definition, donde "class" es similar a una clase en CSS) para definir estilos. Tras classDef va el nombre del estilo, seguido de uno o varios 'propiedad-valor', donde cada 'propiedad-valor' se compone de un nombre de propiedad CSS válido, dos puntos (:) y el valor correspondiente.
A continuación se muestra un ejemplo de classDef con un solo 'propiedad-valor':
Copiar
Insertar
classDef movement font-style:italic;
- El nombre del estilo es movement
- La única propiedad es font-style y su valor es italic
Si quieres tener varios 'propiedad-valor', puedes colocar una coma (,) entre cada 'propiedad-valor'.
A continuación se muestra un ejemplo con tres 'propiedad-valor':
Copiar
Insertar
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- El nombre del estilo es badBadEvent
- La primera propiedad es fill y su valor es #f00
- La segunda propiedad es color y su valor es white
- La tercera propiedad es font-weight y su valor es bold
- La cuarta propiedad es stroke-width y su valor es 2px
- La quinta propiedad es stroke y su valor es yellow
Aplicar un estilo classDef a un estado
Hay dos formas de aplicar un estilo classDef a un estado:
- Aplicar un estilo classDef a uno o varios estados en una sola sentencia con la sintaxis class
- Usar el operador ::: para aplicar un estilo classDef cuando el estado se usa en una sentencia de transición (por ejemplo, con una flecha que apunta hacia/desde otro estado)
1. Sentencia class
La sentencia class indica a Mermaid que aplique el classDef especificado a una o varias clases. Tiene la forma:
Copiar
Insertar
class [one or more state names, separated by commas] [name of a style defined with classDef]
A continuación se muestra un ejemplo que aplica el estilo badBadEvent a un estado llamado Crash:
Copiar
Insertar
class Crash badBadEvent
A continuación se muestra un ejemplo que aplica el estilo movement a los dos estados Moving y Crash:
Copiar
Insertar
class Moving,Crash movement
Aquí hay un ejemplo. Ten en cuenta que al estado Crash se le aplican dos estilos classDef: movement y badBadEvent
Copiar
Insertar
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 un estado con el operador :::
Puedes aplicar un estilo classDef a un estado con el operador :::. La sintaxis es:
Copiar
Insertar
[state]:::[style name]
Puedes aplicarlo en una sentencia que use la clase, lo que incluye los estados de inicio y fin. Por ejemplo:
Copiar
Insertar
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 --> [*]
Espacios en el nombre del estado
Puedes definir primero el estado con un id y luego referenciar ese id para añadir espacios al estado.
En el siguiente ejemplo hay un estado cuyo ID es yswsii, descrito como ''Your state with spaces in it''. Una vez definido, yswsii se usa en la primera transición del gráfico ([*] --> yswsii) y también se usa al transicionar a YetAnotherState (yswsii --> YetAnotherState). Se ha aplicado un estilo a yswsii para que sea distinto de los demás estados.
Copiar
Insertar
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 --> [*]
