🔄 Mermaid

Diagrama de estados

Capture cada estado e transição de um sistema

Abrir este exemplo no editor Gerar um com IA

O que é um Diagrama de estados?

Um diagrama de estados mostra os estados em que um objeto pode estar e os eventos que o fazem transitar entre eles: ciclos de vida de encomendas, fluxos documentais, estados de interface, gestão de ligações. Essencial sempre que «em que estado estamos?» importa.

Os diagramas de estados pertencem às especificações, onde «uma encomenda pode voltar de reembolsada a expedida?» tem de ter resposta. São o único diagrama que torna visíveis as transições ilegais: o que não está desenhado não é permitido, o que transforma a imagem num plano de testes. O seu limite é a combinatória — duas máquinas independentes no mesmo diagrama produzem um produto cruzado que ninguém consegue ler. Separe-as, ou aninhe-as em estados compostos.

Exemplo em tempo real

Código Mermaid

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : request changes
    Review --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Exemplo em tempo real

Quando usar

Modelar ciclos de vida de encomendas, tickets ou documentos

Desenhar estados de componentes de UI e de ligações

Especificar regras de negócio em torno das transições de estado

Erros frequentes

Nomes de estado com várias palavras partem-se

Waiting for payment --> Paid cria três estados chamados Waiting, for e payment. Nomeie o estado uma vez com state "Waiting for payment" as waiting e use depois o id curto waiting em todas as transições.

Um [*] aninhado não é o início

Um [*] escrito dentro de um estado composto marca o ponto de entrada desse composto, não o do diagrama. Se todos os [*] que escreveu estiverem aninhados, o diagrama fica sem ponto de entrada e o leitor não sabe por onde começar.

Os rótulos de transição são eventos, não código

O texto a seguir aos dois pontos é texto livre: score > 80 é apresentado mas nunca avaliado, e duas transições podem trazer condições contraditórias sem qualquer queixa. Reveja os rótulos como revê prosa, não como revê lógica.

Sintaxe básica

.mmd

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : stop

stateDiagram-v2 direction LR
Use o renderizador -v2, aquele para o qual a sintaxe atual foi escrita. Acrescentar direction LR serve os ciclos de vida longos e lineares, que de outro modo saem pelo fundo da página.
[*] --> Draft Draft --> Review : submit
[*] é o marcador de início à esquerda de uma seta e o estado final à direita. O texto a seguir aos dois pontos nomeia o evento que desencadeia a transição.
state Payment { [*] --> Pending Pending --> Captured }
Um estado composto esconde uma submáquina atrás de uma única caixa. Uma transição pode ter como destino o próprio composto, entrando nele pelo seu marcador de início.
state gate <<choice>> gate --> Approved : score > 80
Um pseudoestado de escolha ramifica sobre uma condição sem inventar um estado falso para isso. Os marcadores <<fork>> e <<join>> fazem o mesmo para caminhos paralelos.

Perguntas sobre este diagrama

Qual é a diferença em relação a um fluxograma?

Um fluxograma segue um processo do início ao fim. Um diagrama de estados descreve todos os estados possíveis de uma coisa e que eventos provocam as transições — incluindo ciclos e estados de erro.

O Mermaid suporta estados aninhados?

Sim — o stateDiagram-v2 suporta estados compostos (aninhados), forks, joins, escolhas e notas para máquinas de estados realistas.

Um diagrama de estados Mermaid exprime guardas e ações de entrada e de saída?

Formalmente, não. Uma transição tem um único rótulo de texto livre, por isso uma guarda como score > 80 fica ali escrita em prosa e nada a impõe. Também não há sintaxe de ação de entrada ou de saída — ponha isso numa nota ao lado do estado.

Como mostro um estado que volta a si próprio?

Ponha o mesmo estado dos dois lados da seta: Draft --> Draft : edit. O Mermaid desenha-o como um laço sobre a caixa e mantém o rótulo; e várias transições entre os mesmos dois estados conservam cada uma o seu rótulo, em vez de se fundirem.

Posso dar outra cor a um estado?

Sim. classDef bad fill:#fdd define um estilo e class Failed bad aplica-o, para que os estados de erro ou terminais se destaquem. O estilo vive no código, por isso sobrevive à exportação em PNG e SVG.

Como exporto um diagrama de estados para uma apresentação?

Exporte PNG em 2× ou 4× para slides que vão ser projetados, ou SVG quando a ferramenta o aceita, já que o SVG se mantém nítido e conserva o texto selecionável. O código Mermaid continua a ser a versão que edita e volta a exportar.

Diagrama de estados ou outro tipo de diagrama?

Diagrama de estados ou diagrama de sequência?

O diagrama de sequência mostra um caminho através de vários participantes; o diagrama de estados mostra todos os caminhos de um só participante. Se a pergunta interessante é «o que respondeu a API», use um diagrama de sequência. Se é «podemos alguma vez voltar aqui», use estados.

Diagrama de estados ou diagrama de classes?

O diagrama de classes dá campos e relações a uma encomenda; o diagrama de estados dá-lhe uma vida. Escreva o de classes quando perguntam que dados existem, e o de estados quando perguntam que transições o código tem de recusar.

Explorar outros tipos de diagramas

🔀 Fluxograma 💬 Diagrama de sequência 🧩 Diagrama de classes 🗄️ Diagrama entidade-relação 📅 Gráfico de Gantt 🥧 Gráfico circular 🧠 Mapa mental 🌿 Grafo Git 🕰️ Linha do tempo 🚶 Jornada do utilizador 🎯 Gráfico de quadrantes

Crie já o seu Diagrama de estados

Descreva-o em linguagem natural — a IA escreve o código Mermaid por si.

Abrir o Mermaid Studio