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

Editor de fluxograma Mermaid

Um fluxograma mostra como um processo avança: quais são as etapas, onde ele se ramifica e onde os caminhos voltam a se juntar. Use quando o assunto for a ordem das decisões — um deploy, o trajeto de uma requisição, um fluxo de aprovação. Se o assunto for quem fala com quem e quando, use um diagrama de sequência.

Abrir isto no editor →Ler o guia

Um pipeline de deploy com dois caminhos de falha

Quase todos os fluxogramas deste site começam com esse formato: um caminho feliz reto do qual se desprendem losangos de decisão. Repare nas aspas do penúltimo nó. Parênteses dentro de um rótulo precisam de aspas, e esquecer disso é o erro mais comum de todos.

flowchart TD
    Push[Push na main] --> Lint[Análise estática e tipos]
    Lint --> Teste{Os testes passaram?}
    Teste -->|Não| Aviso[Avisar quem fez o commit]
    Teste -->|Sim| Build[Construir a imagem]
    Build --> Scan{Scan sem vulnerabilidades?}
    Scan -->|Não| Bloqueio["Bloquear a release (revisão manual)"]
    Scan -->|Sim| Deploy[Publicar em produção]
    Deploy --> Fumaca[Testes de fumaça]
    Fumaca --> Fim[Release concluída]

Abrir isto no editor

Exemplos resolvidos

1. O fluxograma mínimo

Dois nós e uma seta. `TD` vai de cima para baixo e `LR` da esquerda para a direita; um diagrama mais largo do que alto quase sempre fica melhor em `LR`.

flowchart TD
    Receber[Receber a requisição] --> Responder[Enviar a resposta]

Abrir no editor

2. Uma ramificação com rótulos

As chaves desenham um losango. O que fica entre barras verticais rotula a aresta, não o nó. Essa distinção volta a aparecer mais adiante, na seção de erros.

flowchart TD
    Inicio[Receber a requisição] --> Auth{O token é válido?}
    Auth -->|Sim| Processar[Executar o handler]
    Auth -->|Não| Recusar[Devolver 401]
    Processar --> Ok[Devolver 200]

Abrir no editor

3. Fazer a forma significar algo

As formas são o jeito mais barato de acrescentar informação a um fluxograma. Pontas arredondadas marcam início e fim, o losango uma decisão e o cilindro um armazenamento de dados.

flowchart LR
    Inicio([Disparar a rotina]) --> Ler[(Ler do Postgres)]
    Ler --> Tem{Há linhas novas?}
    Tem -->|Não| Fim([Encerrar sem alterações])
    Tem -->|Sim| Transformar[/Transformar os dados/]
    Transformar --> Gravar[(Gravar no S3)]
    Gravar --> Fim

Abrir no editor

4. Subgrafos para agrupar por responsável

Um subgrafo cerca nós relacionados com uma moldura. Onde ele mais rende não é agrupando por etapa, e sim por responsável: assim que fica claro qual time ou qual serviço é dono de cada parte, as passagens de bastão aparecem.

flowchart TD
    subgraph cliente [Navegador]
        UI[Enviar o formulário]
    end
    subgraph api [Serviço de pedidos]
        Validar[Validar os dados]
        Salvar[Salvar o pedido]
    end
    subgraph async [Processos em segundo plano]
        Email[Enviar a confirmação]
        Nota[Emitir a nota fiscal]
    end
    UI --> Validar
    Validar --> Salvar
    Salvar --> Email
    Salvar --> Nota

Abrir no editor

5. Um laço de retentativa com limite

Fluxogramas lidam bem com ciclos. Um laço de retentativa é onde eles realmente valem a pena, porque o desenho mostra de relance se o laço tem mesmo uma saída.

flowchart TD
    Enviar[Enviar o webhook] --> Resposta{Voltou 2xx?}
    Resposta -->|Sim| Ok[Marcar como entregue]
    Resposta -->|Não| Tentativas{Menos de 5 tentativas?}
    Tentativas -->|Sim| Espera[Espera exponencial]
    Espera --> Enviar
    Tentativas -->|Não| Fila[Para a fila de falhas]

Abrir no editor

Referência de sintaxe do fluxograma

Tudo aqui é exclusivo do fluxograma. As setas principalmente: elas não se transferem para os outros tipos. O `->>` de um diagrama de sequência aqui é erro de sintaxe.

Sintaxe	Significado
flowchart TD	De cima para baixo. `TB` é a mesma coisa. O sentido habitual de leitura de um processo.
flowchart LR	Da esquerda para a direita. Também existe `RL`. Para fluxos largos e rasos.
A[Texto]	Retângulo — uma etapa comum.
A(Texto)	Retângulo de cantos arredondados.
A([Texto])	Formato de estádio — por convenção, início ou fim.
A[(Texto)]	Cilindro — um armazenamento de dados.
A{Texto}	Losango — uma decisão.
A[/Texto/]	Paralelogramo — entrada ou saída.
A --> B	Seta.
A --- B	Linha sem ponta.
A -.-> B	Seta pontilhada — por convenção, assíncrono ou opcional.
A ==> B	Seta grossa — por convenção, o caminho principal.
A -->\|texto\| B	Aresta rotulada. Com parênteses, precisa de aspas.
A["Texto (com parênteses)"]	Rótulo entre aspas — necessário para parênteses, aspas e qualquer caractere lido como sintaxe de forma.
subgraph nome [Título] ... end	Agrupa nós numa moldura. Fecha com `end`.
%% comentário	Linha de comentário. Não é desenhada.

Seis erros que realmente quebram um fluxograma

Todos reproduzidos no motor que o site usa (Mermaid 11.12.2). Cole a versão quebrada no editor e você verá exatamente o erro descrito; a corrigida desenha. O atalho para ler um erro do Mermaid é olhar o final dele: depois de `got` vem o token em que o analisador tropeçou.

O que você vê

Parse error, terminando em: got 'PS'

Por quê

Há um parêntese de abertura dentro de um rótulo entre colchetes. Parênteses são sintaxe de forma — `A(texto)` é um nó arredondado —, então um parêntese solto dentro dos colchetes é lido como o início de uma forma.

Solução

Coloque o rótulo inteiro entre aspas duplas. Dentro das aspas tudo vira texto.

Quebrado

flowchart TD
    A[Tentar de novo (no máximo 5 vezes)] --> B[Pronto]

Corrigido

flowchart TD
    A["Tentar de novo (no máximo 5 vezes)"] --> B[Pronto]

O que você vê

Parse error, terminando em: got 'STR'

Por quê

Há aspas duplas no meio do rótulo. O analisador as toma como início de uma string e então encontra o colchete de fechamento onde esperava a aspa que fecha.

Solução

Coloque o rótulo inteiro entre aspas duplas e use aspas simples por dentro, ou escreva o caractere como `#quot;`.

Quebrado

flowchart TD
    A[O status é "pendente"] --> B[Pronto]

Corrigido

flowchart TD
    A["O status é 'pendente'"] --> B[Pronto]

O que você vê

Parse error na linha em que você nomeou um nó

Por quê

O identificador do nó tem espaços. Em português é difícil evitar, porque os nomes naturais são locuções: «serviço de autenticação», «base de usuários». O identificador é o token antes da seta, e o espaço o encerra, deixando uma palavra solta que não tem onde encaixar.

Solução

Identificador de uma palavra só, texto legível no rótulo. Acentos, til e cedilha funcionam dentro do identificador: só o espaço quebra.

Quebrado

flowchart TD
    serviço de autenticação --> base de dados

Corrigido

flowchart TD
    auth[Serviço de autenticação] --> db[(Base de dados)]

O que você vê

Parse error, terminando em: got 'end'

Por quê

Você usou `end` como identificador de nó. Em minúsculas, `end` fecha um subgrafo, então o analisador vê um fim de bloco onde esperava um nó. Acontece mais do que parece: seguindo exemplos em inglês, o último nó acaba se chamando `end` mesmo com o resto do diagrama em português.

Solução

Use maiúscula ou dê outro identificador ao nó e leve a palavra para o rótulo. `Fim` não causa problema nenhum.

Quebrado

flowchart TD
    Inicio[Começar] --> end

Corrigido

flowchart TD
    Inicio[Começar] --> Fim[Concluído]

O que você vê

Parse error num rótulo de aresta entre barras

Por quê

Há parênteses dentro do rótulo da aresta. O que fica entre `|…|` tem a mesma restrição do rótulo de um nó: ali parênteses também são sintaxe, não texto.

Solução

Coloque o rótulo da aresta entre aspas também.

Quebrado

flowchart TD
    A -->|sim (sempre)| B

Corrigido

flowchart TD
    A -->|"sim (sempre)"| B

O que você vê

Lexical error on line 1. Unrecognized text.

Por quê

A direção não é válida. Um fluxograma aceita apenas TB, TD, BT, LR e RL; qualquer outra coisa falha na análise léxica, antes de ler um único nó. Por isso o erro aponta para a linha 1 e não para o lugar do engano.

Solução

Use uma das cinco. TD e LR cobrem quase tudo.

Quebrado

flowchart CIMABAIXO
    A --> B

Corrigido

flowchart TD
    A --> B

Notas sobre a renderização

Nada disso foi copiado da documentação: tudo foi medido no Mermaid 11.12.2 que este site usa. São os comportamentos que passam a importar quando o diagrama deixa de ser um brinquedo.

Os rótulos só quebram nos espaços, e isso pesa no português

Medido: um rótulo de nó cresce em largura até um teto de 276 pixels de viewBox e, a partir daí, quebra em várias linhas e cresce em altura, cerca de 24 pixels por linha. Isso importa em português porque nossos rótulos são mais longos que os ingleses: o mesmo par de nós que em inglês ocupa 204 pixels de largura passa a 224 em português. A consequência prática é que um diagrama traduzido do inglês ganha altura sem ganhar nenhum nó. O detalhe que surpreende é que a quebra só acontece nos espaços: uma única palavra de 40 caracteres nunca quebra e estica o nó até 432 pixels, deformando o diagrama inteiro.

A altura cresce cerca de 105 pixels por nó e a largura quase não muda

Num fluxograma de cima para baixo, três nós dão um viewBox de aproximadamente 126×278. Com quarenta, vai para 135×4126: a largura subiu 9 pixels e a altura multiplicou por quinze. Um fluxograma longo é uma tira estreita que não cabe em tela nenhuma. É para isso que serve o botão de centralizar da pré-visualização. Quando estica demais, mudar para `flowchart LR` costuma cortar a proporção quase pela metade.

Acentos, til e cedilha funcionam até nos identificadores

Verificado: `Validação`, `Endereço`, `Cartão` e `Ação` valem como identificadores de nó, não só como rótulos. Não é preciso escrever o diagrama sem acentos para que ele desenhe. A única coisa que realmente quebra um identificador é o espaço.

Os rótulos são HTML, e por isso a exportação para PNG estava quebrada

Os rótulos de um fluxograma são desenhados como HTML de verdade dentro de um `<foreignObject>` do SVG. É por isso que aceitam `<br>` e um pouco de Markdown. E é por isso também que o navegador se recusa a pintar esse SVG num canvas: a exportação para PNG deste site devolveu, por muito tempo, um arquivo SVG em silêncio. Agora o diagrama é redesenhado com rótulos em texto SVG antes de exportar, e o PNG sai correto. O preço é que a tipografia do PNG difere muito levemente da tela.

O tema muda a cor, nunca a geometria

O mesmo fluxograma renderizado no tema claro e no escuro dá um viewBox idêntico. Trocar de tema não recompõe nada nem faz rótulo vazar da caixa. O que parece estranho no escuro parece igualmente estranho no claro.

Quando usar outro diagrama

Se o que importa é quem envia o quê para quem, e a ordem no tempo pesa mais que as ramificações, um diagrama de sequência se entende melhor e continua se entendendo conforme cresce. Um fluxograma com seis participantes escritos como nomes de nós é um diagrama de sequência que ainda não admitiu isso.

Se você não está descrevendo um procedimento, mas os estados pelos quais uma coisa passa, use um diagrama de estados. O sinal é simples: se os rótulos dos nós são estados — «pedido pendente», «pedido enviado» —, é uma máquina de estados; se são ações — «validar os dados», «enviar o e-mail» —, é um fluxograma.

E passando de uns quarenta nós, sendo honesto, nenhum diagrama salva. Ou você o divide em vários com uma entrada em comum, ou aceita que o que está tentando explicar é complexo demais para um desenho só. Essa conclusão também é informação útil.

Outros tipos de diagrama

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

Abrir o editor →