🔄 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.

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

Sintaxe básica

.mmd

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

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.

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