💬 Mermaid

Diagrama de sequência

Mostre como sistemas e pessoas dialogam

Abrir este exemplo no editor Gerar um com IA

O que é um Diagrama de sequência?

Um diagrama de sequência mostra as mensagens trocadas entre participantes ao longo do tempo: chamadas à API, fluxos de autenticação, comunicação entre microsserviços. É o padrão para documentar interações em arquitetura de software.

Os diagramas de sequência ganham o seu lugar nas revisões de arquitetura e nos relatórios de incidente, onde a pergunta é sempre a mesma: quem chamou quem, por que ordem, e o que voltou. Nada revela mais depressa um erro de ordenação ou um timeout em falta. O que não conseguem mostrar é o estado — uma linha de vida diz que um participante está ocupado, nunca em que estado interno se encontra nem o que guarda entre duas execuções.

Exemplo em tempo real

Código Mermaid

sequenceDiagram
    autonumber
    participant U as User
    participant A as API
    participant D as Database
    U->>A: POST /login
    A->>D: SELECT user
    D-->>A: user row
    A-->>U: 200 + JWT token
    U->>A: GET /profile (Bearer)
    A-->>U: 200 profile

Exemplo em tempo real

Quando usar

Documentar fluxos de API, autenticação e protocolos de pagamento

Desenhar as interações entre microsserviços antes da implementação

Depurar incidentes de produção mapeando a cadeia real de chamadas

Erros frequentes

Ativações deixadas em aberto

Cada + precisa de um - correspondente, e cada activate de um deactivate. Um par desequilibrado ou desenha uma barra que desce até ao fundo do diagrama, ou falha com «Trying to inactivate an inactive participant».

A ordem dos participantes é a de declaração

O Mermaid coloca os participantes da esquerda para a direita pela ordem em que os encontra, por isso um que só é mencionado num ramo de erro vai parar à direita. Declare todos com uma linha participant no início, pela ordem pretendida.

Uma seta simples não é uma chamada

A->B desenha uma linha contínua sem ponta de seta, que se lê como se nada tivesse acontecido. As chamadas síncronas são ->>, as respostas -->> e as mensagens sem resposta -). Os traços definem apenas o estilo da linha; é a ponta que transporta o sentido.

Sintaxe básica

.mmd

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Sync request
    B-->>A: Async response

sequenceDiagram autonumber
O autonumber prefixa cada mensagem com um número, para que quem revê possa falar do «passo 4» num comentário em vez de descrever a seta em causa.
U->>+API: POST /orders API-->>-U: 201 Created
Um + numa seta abre uma barra de ativação no destinatário e um - fecha-a, mostrando exatamente durante quanto tempo cada participante fica ocupado com a chamada.
note over API,DB: single transaction
As notas transportam o detalhe que as setas não conseguem: fronteiras de transação, política de repetição, timeouts. Use note left of ou note right of para prender uma nota a um único participante.
box Payment domain participant PSP end
Um box desenha uma moldura com rótulo à volta dos participantes do mesmo sistema ou da mesma equipa. Ponha um nome de cor antes do rótulo para tingir a moldura.

Perguntas sobre este diagrama

O que significam os tipos de seta num diagrama de sequência Mermaid?

As setas contínuas (->>) são chamadas síncronas; as setas tracejadas (-->>) são respostas ou mensagens assíncronas. As ativações mostram quando um participante está ocupado a processar.

Posso representar ciclos e condições?

Sim — o Mermaid suporta os blocos loop, alt (if/else), opt (opcional) e par (paralelo) para exprimir a lógica de protocolos reais.

Posso pôr um diagrama de sequência na descrição de um pull request no GitHub?

Sim — cole o código num bloco delimitado com a etiqueta mermaid e o GitHub renderiza-o dentro de pull requests, issues e comentários. Ao contrário de uma captura de ecrã, o diagrama passa a aparecer como texto no diff da alteração seguinte.

Um diagrama de sequência Mermaid mostra o tempo decorrido ou a latência?

Não. O eixo vertical é apenas ordem — não há escala de tempo, por isso duas setas separadas por um milissegundo são indistinguíveis de duas separadas por uma hora. Ponha o número numa nota, ou use um gráfico de Gantt quando a duração é o essencial.

Como mostro um participante que só existe durante parte do fluxo?

Declare-o onde aparece com create participant Worker e termine-o com destroy Worker. A linha de vida passa a começar na mensagem que o cria e a acabar numa cruz, que é como se desenha um job, uma sessão ou um processo temporário.

Como destaco um grupo de mensagens?

Envolva-as em rect rgb(240,240,255) … end para sombrear o fundo, útil para assinalar um bloco de repetições ou uma transação. Os blocos rect aninham-se, por isso uma repetição dentro de uma transação continua legível. Os blocos loop, alt e opt desenham a sua própria moldura com rótulo.

Diagrama de sequência ou outro tipo de diagrama?

Diagrama de sequência ou fluxograma?

Conte os sistemas. Um processo que corre dentro de um único componente é um fluxograma; dois ou mais participantes a trocar mensagens são um diagrama de sequência. Se der por si a escrever «o serviço B recebe…» dentro de uma caixa de fluxograma, mude — as linhas de vida fazem esse trabalho por si.

Diagrama de sequência ou diagrama de estados?

Ambos descrevem comportamento ao longo do tempo. O diagrama de sequência segue uma execução através do sistema e mostra o tráfego entre participantes; o diagrama de estados cobre todas as execuções de um participante e mostra o que ele guarda. Depure com o primeiro, especifique com o segundo.

Explorar outros tipos de diagramas

🔀 Fluxograma 🧩 Diagrama de classes 🗄️ Diagrama entidade-relação 🔄 Diagrama de estados 📅 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 sequência

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

Abrir o Mermaid Studio