Grátis · Sem cadastro · Funciona com arquivos .mmd

Editor de diagrama de sequência Mermaid

Um diagrama de sequência mostra quem fala com quem e em que ordem. Use quando o interessante for a troca de mensagens entre várias partes — uma autenticação, um pagamento, uma integração entre serviços. Se há um único ator e o que importa são as ramificações, um fluxograma diz o mesmo com menos ruído.

Abrir isto no editor →Ler o guia

Um pagamento por Pix com confirmação assíncrona

O que este diagrama torna visível é o retorno assíncrono: a loja responde ao cliente antes de o banco confirmar, e a confirmação chega depois por webhook. Um fluxograma esconderia essa inversão; aqui ela fica evidente na altura das linhas de vida.

sequenceDiagram
    autonumber
    participant C as Cliente
    participant L as Loja
    participant P as PSP
    participant B as Banco

    C->>L: Finalizar o pedido
    L->>P: Solicitar cobrança Pix
    P-->>L: QR Code e chave copia e cola
    L-->>C: Exibir o QR Code

    C->>B: Pagar pelo app do banco
    B->>P: Liquidar a transação

    par Confirmar para a loja
        P-)L: Webhook de pagamento aprovado
        L-->>C: Pedido confirmado
    and Registrar internamente
        L->>L: Baixar o estoque
    end

Abrir isto no editor

Exemplos resolvidos

1. Dois participantes e uma mensagem

`->>` é uma seta de ponta cheia, para uma chamada. `-->>` é pontilhada, para a resposta. Esse par cobre a maioria dos diagramas.

sequenceDiagram
    Cliente->>API: Criar o pedido
    API-->>Cliente: 201 Created

Abrir no editor

2. Apelidos para nomes longos

`participant X as Nome longo` dá um identificador curto para escrever e um nome legível para ler. Declarar os participantes no começo também fixa a ordem deles no desenho; sem declaração, quem decide é a ordem de aparição.

sequenceDiagram
    participant N as Navegador
    participant A as API de pedidos
    participant E as Serviço de estoque

    N->>A: POST /pedidos
    A->>E: Reservar as unidades
    E-->>A: Reserva confirmada
    A-->>N: 201 Created

Abrir no editor

3. Ativações e chamadas a si mesmo

`activate` e `deactivate` desenham a barra que indica que um participante está trabalhando. Os sufixos `+` e `-` na seta fazem o mesmo escrevendo menos. Uma seta de um participante para ele mesmo representa trabalho interno.

sequenceDiagram
    participant A as API
    participant D as Banco de dados

    Cliente->>+A: GET /nota/42
    A->>+D: SELECT nota
    D-->>-A: Linha encontrada
    A->>A: Calcular os impostos
    A-->>-Cliente: 200 OK

Abrir no editor

4. Alternativas, opcionais e laços

`alt`/`else` são caminhos excludentes, `opt` é um bloco que pode não acontecer e `loop` é uma repetição. Os três fecham com `end`, e esquecer isso é o erro mais comum do tipo.

sequenceDiagram
    participant C as Cliente
    participant A as API
    participant M as Serviço de e-mail

    C->>A: Pedir o cadastro
    alt E-mail já cadastrado
        A-->>C: 409 Conflict
    else E-mail livre
        A-->>C: 201 Created
        A->>M: Enviar a verificação
        loop Até 3 tentativas
            M->>M: Repetir se o envio falhar
        end
    end
    opt O cliente aceita a newsletter
        A->>M: Inscrever na lista
    end

Abrir no editor

5. Notas e execução em paralelo

`par` mostra ramos que acontecem ao mesmo tempo, algo que um fluxograma insinua mas nunca afirma. As notas são o lugar certo para o detalhe que não cabe num rótulo de mensagem.

sequenceDiagram
    participant A as API de pedidos
    participant F as Faturamento
    participant L as Logística

    Note over A: O pedido já está pago

    par Avisar o faturamento
        A->>F: Emitir a nota fiscal
        F-->>A: Nota 2026/0431
    and Avisar a logística
        A->>L: Preparar a expedição
        L-->>A: Etiqueta gerada
    end

    Note over F,L: Cada uma segue o próprio ritmo

Abrir no editor

Referência de sintaxe do diagrama de sequência

As setas são o que vale memorizar, e são próprias deste tipo: o `-->` de um fluxograma significa outra coisa aqui, e o `->>` daqui é um erro num diagrama de classes.

Sintaxe	Significado
sequenceDiagram	Abre o diagrama. Diferencia maiúsculas: `sequencediagram` não vale.
participant A	Declara um participante e fixa a posição dele.
participant A as Nome	Identificador curto com nome legível.
actor A	Igual a participant, mas desenha um boneco.
A->>B: texto	Mensagem de ponta cheia — uma chamada.
A-->>B: texto	Linha pontilhada — uma resposta.
A-)B: texto	Ponta aberta — mensagem assíncrona.
A->>A: texto	Um participante chama a si mesmo.
activate A / deactivate A	Marca o período em que A está trabalhando.
A->>+B: / B-->>-A:	O mesmo de forma abreviada, na própria seta.
alt cond ... else ... end	Caminhos excludentes.
opt cond ... end	Bloco que pode não acontecer.
loop texto ... end	Repetição.
par ... and ... end	Ramos simultâneos.
Note over A,B: texto	Nota sobre um ou mais participantes. Também `Note left of` e `Note right of`.
autonumber	Numera as mensagens automaticamente.

Seis erros que quebram um diagrama de sequência

Reproduzidos no Mermaid 11.12.2. O mais comum de longe é o primeiro, e a mensagem dele é das que pior indicam onde está o problema.

O que você vê

Parse error apontando para a última linha do diagrama

Por quê

Um bloco aberto e nunca fechado. `alt`, `opt`, `loop` e `par` exigem o `end` deles. O Mermaid informa a falha no ponto em que a entrada acaba, então o número da linha aponta para o fim do arquivo e não para o bloco que ficou aberto. Com dois blocos aninhados, isso fica genuinamente difícil de enxergar.

Solução

Conte os blocos que abriu e os `end` que escreveu. Se o erro aponta para a última linha, quase sempre é isso.

Quebrado

sequenceDiagram
    Cliente->>API: Requisição
    alt Tudo certo
        API-->>Cliente: 200 OK

Corrigido

sequenceDiagram
    Cliente->>API: Requisição
    alt Tudo certo
        API-->>Cliente: 200 OK
    end

O que você vê

No diagram type detected matching given configuration

Por quê

A palavra-chave está com as maiúsculas erradas. `sequenceDiagram` funciona; `sequencediagram` e `SequenceDiagram` não. O Mermaid diferencia maiúsculas em todas as palavras-chave.

Solução

D maiúsculo, o resto minúsculo.

Quebrado

sequencediagram
    Cliente->>API: Olá

Corrigido

sequenceDiagram
    Cliente->>API: Olá

O que você vê

Desenha, mas a mensagem sai sem texto

Por quê

Falta o texto depois dos dois-pontos. Medido: o Mermaid não rejeita — desenha a mensagem com um rótulo vazio, e a seta fica sem explicação. O que realmente falha é omitir os dois-pontos por completo: `Cliente->>API` sozinho dá `Expecting 'TXT', got 'NEWLINE'`. Os dois-pontos são portanto obrigatórios e o texto não é, exatamente o contrário do que se suporia.

Solução

Escreva algo depois dos dois-pontos, nem que seja uma palavra. Uma seta sem rótulo quase nunca é o que você queria.

Quebrado

sequenceDiagram
    Cliente->>API:
    API-->>Cliente: 200

Corrigido

sequenceDiagram
    Cliente->>API: Criar o pedido
    API-->>Cliente: 200

O que você vê

Parse error depois de um `alt` com condição longa

Por quê

Uma quebra de linha dentro da condição do bloco. A condição de `alt`, `opt` ou `loop` precisa caber numa linha só; ao quebrá-la, a segunda metade é interpretada como mensagem e não encaixa em lugar nenhum.

Solução

Deixe a condição numa linha. Se ficar longa demais, encurte e ponha o detalhe numa nota.

Quebrado

sequenceDiagram
    alt O cliente tem saldo
    suficiente na conta
        A-->>B: OK
    end

Corrigido

sequenceDiagram
    alt O cliente tem saldo suficiente
        A-->>B: OK
    end
    Note over A,B: Saldo conferido contra o limite diário

O que você vê

Desenha, mas aparece um participante que você não declarou

Por quê

Um erro de digitação no nome de um participante. O Mermaid cria o participante na primeira vez que o vê, então `Faturamento` e `Faturmento` viram duas colunas distintas, sem aviso nenhum. Em português os acentos são a fonte mais comum disso: `Logística` escrito uma vez sem acento já gera uma coluna extra.

Solução

Declare os participantes com `participant` no começo. Não evita o erro de digitação, mas deixa à vista quais são os nomes válidos e faz a coluna sobrando saltar aos olhos.

Quebrado

sequenceDiagram
    Cliente->>Logística: Enviar o pedido
    Logistica-->>Cliente: Pedido despachado

Corrigido

sequenceDiagram
    participant C as Cliente
    participant L as Logística
    C->>L: Enviar o pedido
    L-->>C: Pedido despachado

O que você vê

Desenha, mas a ordem das colunas não é a que você queria

Por quê

Você não declarou os participantes. Sem declarações, a ordem é fixada pela primeira aparição de cada nome, então uma mensagem acrescentada no início do diagrama pode reposicionar todas as colunas e cruzar as setas. O diagrama continua correto, mas fica bem pior de ler.

Solução

Declare todos os participantes no cabeçalho, na ordem em que quer vê-los.

Quebrado

sequenceDiagram
    Banco-->>PSP: Liquidado
    Cliente->>Loja: Finalizar o pedido
    Loja->>PSP: Cobrar

Corrigido

sequenceDiagram
    participant Cliente
    participant Loja
    participant PSP
    participant Banco
    Cliente->>Loja: Finalizar o pedido
    Loja->>PSP: Cobrar
    PSP->>Banco: Liquidar
    Banco-->>PSP: Liquidado

Notas sobre a renderização

Medido no Mermaid 11.12.2 que este site usa. O diagrama de sequência se comporta diferente dos outros em dois pontos concretos.

A largura é ditada pelos participantes, não pelas mensagens

Medido: dois participantes dão um viewBox de 450 pixels de largura e seis dão 1250, cerca de 200 pixels por coluna acrescentada, seja qual for o texto das mensagens. As mensagens só somam altura, uns 46 pixels cada. Com uma ressalva útil: se o rótulo de uma mensagem for mais largo que a largura mínima da coluna, ele de fato alarga o diagrama — o mesmo par de participantes passou de 450 para 603 pixels só por alongar o texto de uma mensagem. Em português, onde os rótulos já são longos, isso acontece antes que em inglês.

É o único tipo com a origem do viewBox negativa

Diagramas de sequência saem com um viewBox que começa em `-50 -10` em vez de `0 0`. Não é defeito: o Mermaid reserva essa margem para as caixas dos participantes. Só importa se você processa o SVG com ferramentas próprias, porque qualquer cálculo que suponha origem zero vai cortar a primeira coluna.

Aqui a exportação para PNG é exata

Ao contrário do fluxograma e dos diagramas de classes, de estados e ER, o de sequência desenha os rótulos como texto SVG simples e não dentro de um `<foreignObject>`. Por isso pode ser rasterizado direto: o PNG exportado corresponde à tela, sem redesenho intermediário e sem deslocamento tipográfico.

Um participante declarado e nunca usado é desenhado mesmo assim

Um `participant` que não envia nem recebe nenhuma mensagem aparece no diagrama com a coluna vazia. Pode ser útil de propósito, para mostrar que alguém existe e não participa deste fluxo, mas também é o que sobra quando se apaga a última mensagem de um participante e se esquece de apagar a declaração dele.

O tema muda a cor, nunca a geometria

O mesmo diagrama no tema claro e no escuro dá um viewBox idêntico, então as colunas não se deslocam nem os blocos mudam de tamanho quando o tema muda.

Quando usar outro diagrama

Se há um único participante, não há sequência para mostrar. Um diagrama com uma coluna só e setas para si mesmo é um fluxograma escrito de forma desconfortável.

Se o que você quer descrever são os estados pelos quais uma coisa passa, e não a conversa entre várias, use um diagrama de estados. O sinal é claro: se você acaba escrevendo a mesma mensagem várias vezes com condições diferentes, o que você tem é uma máquina de estados.

E se a troca passa de uma dúzia de mensagens, divida. Um diagrama de sequência com sessenta mensagens é tecnicamente correto e humanamente inútil; quase sempre se lê muito melhor como três diagramas, um por fase, ligados por uma nota.

Outros tipos de diagrama

Escrito por Dominik Malsch · Última atualização: 8 de setembro de 2026

Abrir o editor →