Sintaxe de fluxograma Mermaid: o guia completo com exemplos

Principais pontos: Um fluxograma Mermaid é um diagrama que você escreve em texto em vez de desenhar à mão. Você digita algo como A --> B, e o Mermaid renderiza duas caixas conectadas. Este guia cobre todas as partes da sintaxe, desde as formas básicas de nós até estilização e eventos de clique, além de mostrar como transformar esse código em um diagrama real e editável na Miro.

Seu fluxograma já está desatualizado

Você já conhece a rotina. Você passa vinte minutos em uma ferramenta de diagramas fazendo as caixas ficarem alinhadas, as setas pararem de se sobrepor e as cores parecerem intencionais. Você exporta, coloca na wiki e segue em frente. Três semanas depois, o processo mudou e ninguém atualizou a imagem. Agora a "fonte da verdade" é um screenshot de algo que não é mais real desde o último sprint.

Esse é o problema de tratar diagramas como imagens em vez de código. Uma imagem não pode ser 'diffed', versionada nem gerada por um agente de IA que acabou de ler sua base de código. Um fluxograma Mermaid pode.

O que é um fluxograma Mermaid?

Um fluxograma Mermaid é um fluxograma que você define usando sintaxe em texto simples em vez de um canvas de arrastar e soltar. Você escreve algumas linhas descrevendo seus nós e como eles se conectam, e o Mermaid renderiza o diagrama automaticamente, com layout, setas e formas.

Faz parte do Mermaid, uma sintaxe de código aberto para diagramas que também cobre diagramas de sequência, diagramas de classe, linhas do tempo e muitos outros tipos de diagrama. Os fluxogramas são os mais comuns, e por um bom motivo: quase todo processo, árvore de decisão ou fluxo de trabalho pode ser mapeado como nós e conexões.

O Mermaid ganhou novo fôlego recentemente por um motivo simples: os modelos de IA escrevem essa sintaxe com fluência. Peça a um agente de IA para diagramar o seu sistema e há uma boa chance de ele devolver a sintaxe Mermaid, porque é esse o formato que mais praticou. Além disso, texto é mais fácil de ser interpretado por um modelo de linguagem do que uma imagem bidimensional, permitindo que o agente faça uma edição precisa no seu diagrama em vez de redesenhar tudo do zero.

Sintaxe básica: direção e declaração

Todo fluxograma Mermaid começa com uma palavra-chave de direção. Essa única linha define se o seu diagrama será lido de cima para baixo ou da esquerda para a direita, e é a primeira coisa que você vai escrever toda vez.

• TD ou TB: de cima para baixo
• BT: de baixo para cima
• LR: esquerda para direita
• RL: da direita para a esquerda

1flowchart TD2    A --> B3    B --> C4  style A fill:#fff6b65  style B fill:#fff6b66  style C fill:#fff6b6

1flowchart LR2    Start --> Medium3    Medium --> End4  style A fill:#fff6b65  style B fill:#fff6b66  style C fill:#fff6b6

Nomes descritivos dos nós (Start, Medium, End) ficam muito mais legíveis do que letras isoladas quando o diagrama ultrapassa alguns passos. Use letras para esboços rápidos e troque por etiquetas reais para qualquer coisa que for compartilhar.

Formas dos nós: a sintaxe de colchetes define a forma

Os colchetes ao redor do texto do nó determinam a forma em que ele será exibido. Você não escolhe a forma em um menu. Basta digitar os símbolos corretos, e o Mermaid cuida do resto.

1flowchart TD2    A[Rectangle]3    B(Rounded)4    C([Stadium])5    D[[Subroutine]]6    E[(Cylindrical)]7    F((Circle))8    G>Asymmetric]

Algumas dessas formas correspondem a casos de uso específicos que vale conhecer. Use um retângulo [Texto] para um passo padrão do processo, uma forma de estádio ([Texto]) para um ponto de início ou fim e uma sub-rotina [[Texto]] quando um nó for, na verdade, uma chamada para um processo separado e definido. Use um cilindro [(Texto)] para representar um banco de dados ou repositório de dados e um círculo ((Texto)) para um ponto único e autocontido no fluxo.

O Mermaid inclui mais algumas formas importantes, como o losango para decisões e o hexágono para etapas de preparação. Caracteres especiais, como barras ou pontos de interrogação, precisam de aspas ao redor da etiqueta:

1flowchart TD2H{Rhombus}3    I{<!-- -->{Hexagon}}4    J["s3/"]5    K["s4!"]6    L(("s5?"))

Links e setas: conectando seus nós

Uma seta indica como um passo leva ao próximo e o Mermaid oferece opções diferentes, dependendo de quão forte ou opcional for essa conexão.

1flowchart td2A --> B          %% solid arrow3A --- B          %% solid line4A -.-> B         %% dotted5A ==> B          %% thick6A -->|label| B   %% with text7A -- text --> B  %% alt label8style A fill:#e7e7e79style B fill:#c6dcff10  linkStyle 5 stroke:#bd0a0a11  linkStyle 4 color:#bd0a0a,stroke:#6631d7

Cada uma sinaliza algo diferente: --> é uma seta sólida padrão, --- é uma linha sólida sem ponta de seta para uma associação mais tênue, -.-> é uma seta pontilhada para caminhos opcionais ou assíncronos, e ==> é uma seta grossa para indicar um caminho crítico. Para rotular uma seta, use -->|etiqueta| ou -- etiqueta -->. Ambas fazem a mesma coisa. E o linkStyle, que mira uma seta pela sua posição no diagrama (0 para a primeira, 1 para a segunda e assim por diante), permite recolorar uma conexão específica em vez de todas as setas do board.

Também é possível conectar vários nós em uma única linha em vez de escrever cada par separadamente:

1flowchart td2A & B --> C & D  %% multi3style A fill:#fff6b64  style B fill:#c6dcff5  style C fill:#edfaf26  style D fill:#ffc6c67​

Essa única linha faz o mesmo que quatro instruções de seta separadas. É um detalhe pequeno, mas ajuda a manter o código de um diagrama carregado legível.

Subgrafos: agrupar e aninhar

Sistemas reais têm seções: um frontend, um backend, uma etapa de pagamento que, na verdade, é composta por três passos fingindo ser um só. Os subgrafos permitem agrupar nós relacionados em uma mesma caixa e até definir uma direção interna de fluxo para essa caixa.

1flowchart TB2    subgraph frontend3        direction LR4        UI --> API5    end6    subgraph backend7        API --> DB8    end9    frontend --> backend

Duas coisas importantes para lembrar. Primeiro, a direção dentro de um subgrafo substitui a direção do fluxograma pai, então o frontend pode ir da esquerda para a direita mesmo com o diagrama geral de cima para baixo. Segundo, um subgrafo pode ser vinculado como qualquer outro nó, e é assim que frontend --> backend funciona acima, mesmo que ambos os lados sejam caixas cheias de outras caixas.

Temas e diretivas init

Se quiser que as cores de um fluxograma combinem com sua marca, com a severidade de um incidente ou apenas com seu gosto, uma diretiva init permite definir isso antes de desenhar um único nó. Ela precisa ficar na primeira linha do seu diagrama.

1%%{init: {2  "theme": "base", 3  "themeVariables": {4    "primaryColor": "#ADF0C7",5    "primaryTextColor": "#067429",6    "edgeLabelBackground": "#FFFEEE",7    "lineColor": "#36352F"8  }9}}%%10flowchart LR11    A[Start] --> B{Choice}12    B -->|yes| C[Done]13    B -->|no| D[Retry]

Mermaid inclui cinco temas integrados: default, dark, forest, neutral e base. Apenas o tema base dá acesso ao objeto themeVariables completo, então, se quiser cores personalizadas em vez de uma paleta predefinida, comece por ele.

Interação: eventos de clique e callbacks

Um fluxograma não precisa ser estático. É possível configurar um nó para abrir um link, executar uma função JavaScript ou exibir um tooltip ao passar o mouse, o que é útil quando o diagrama também funciona como documentação.

1flowchart TD2    A[Visit Miro]3    B[Hover Tooltip]4    C[Open Docs]5​6    click A "https://miro.com" _blank7    click B callback "Tooltip"8    click C href "/docs" "Open docs"9​10​11%% JS callback12%% <script>13%%   const callback = (id) =>14%%     alert('Clicked ' + id);15%% </script>

O nó A abre um link em uma nova guia. O nó B aciona uma função JavaScript chamada callback e exibe o texto "Tooltip" ao passar o mouse. O nó C abre um link relativo na guia atual, com seu próprio texto de dica. Esse padrão aparece com mais frequência na documentação interna, quando um nó do diagrama aponta diretamente para o runbook ou para o ticket que representa.

Estilos: cores, classes e rótulos markdown

Estilos pontuais funcionam bem para um único nó, mas ficam repetitivos rapidamente. classDef permite definir um estilo uma vez e reutilizá-lo em todo o seu diagrama, o que faz diferença quando seu fluxograma tem mais de cinco ou seis nós.

1flowchart LR2    A[Node A]3    B[Node B]4    C[Node C]5    D[Node D] --> E[Node E]6​7    %% Inline style8    style A fill:#f9f,stroke:#333,stroke-width:2px9​10    %% Reusable class definition11    classDef error fill:#fdd,stroke:#c00,color:#90012    classDef success fill:#dfd,stroke:#0a013​14    %% Assign class15    class A,B error16    class C success17​18    %% Shorthand class assignment19    D:::success --> E:::error

É possível atribuir uma classe de duas maneiras: com a instrução class A,B error em sua própria linha, ou inline com a forma abreviada D:::success. Ambos fazem a mesma coisa. Escolha a que deixar seu código mais legível.

Para etiquetas mais ricas, o Mermaid também suporta formatação básica em markdown dentro dos nós e das arestas, desde que as etiquetas HTML estejam desabilitadas:

1---2config:3  htmlLabels: false4---5flowchart LR6subgraph "One"7  a("`The **cat**8  in the hat`") -- "edge label" --> b{<!-- -->{"`The **dog** in the hog`"}}9end10subgraph "`**Two**`"11  c("`The **cat**12  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")13end

Como juntar tudo: exemplo completo

Este fluxo de login usa a maior parte do que foi apresentado acima em um único diagrama: formas, subgrafos, classes de estilo, um loop de tentativa e um evento de clique.

1flowchart TD2    Start((Start)) --> Login[/Enter creds/]3    Login --> Check{Valid?}4    Check -->|yes| Home[Dashboard]:::ok5    Check -->|no| Err[Show error]:::bad6    Err -.retry.-> Login7    Home ==> Logout([Logout])8​9    subgraph auth10        direction LR11        Login --> Check12    end13​14    classDef ok fill:#dfd,stroke:#0a015    classDef bad fill:#fdd,stroke:#c0016    click Home "/dashboard" _self

Repare como há tão pouco de novo aqui. São as mesmas formas, setas, subgrafos e o padrão classDef das seções anteriores, combinados em algo que você usaria no trabalho. A única forma nova aqui é Login[/Enter creds/], um paralelogramo que, pela convenção do Mermaid, costuma representar um passo de entrada. A verdadeira habilidade ao escrever Mermaid não é memorizar cada símbolo. É saber quais poucos padrões cobrem a maior parte dos seus diagramas.

Veja todos os exemplos de sintaxe no nosso Guia rápido de fluxogramas Mermaid.

Onde os fluxogramas Mermaid ficam ainda melhores: Miro

Escrever o código é metade do trabalho. Ainda é preciso que alguém o analise, questione uma decisão e o atualize conforme o processo muda. É aí que o Mermaid costumava emperrar: você renderizava um diagrama, colocava um screenshot em algum lugar e perdia a conexão entre o código e a imagem no momento em que alguém mexia nela.

A Miro fecha essa lacuna com o o Structured Diagrams with Mermaid, atualmente em Beta público. Cole a sintaxe Mermaid em um board da Miro, ou peça a um agente de IA como Claude Code para gerar um diretamente do seu repositório de código, e ele é renderizado como formas reais e editáveis no Miro, não como uma imagem estática. O código Mermaid permanece como fonte da verdade: ao editar o diagrama visualmente, o código subjacente também é atualizado, assim os dois nunca se desencontram.

Isso importa por alguns motivos. Seu time pode trabalhar no diagrama junto, em vez de trabalhar ao redor dele: comentar diretamente em um nó em vez de abrir uma conversa paralela no Slack e todo mundo permanece no contexto da decisão real. Como o diagrama continua sendo Mermaid sob o capô, um agente de IA pode lê-lo, fazer uma edição pontual ou redigir um documento, como um registro de decisão de arquitetura, a partir dos comentários do time, pronto para abrir como pull request. E você não fica preso ao layout de outra pessoa. Altere a direção do fluxo, ajuste o espaçamento ou abra o painel de código e edite a sintaxe manualmente, tudo sem sair do board.

Hoje, os fluxogramas já contam com a experiência completa de edição visual. Diagramas de sequência, de classes e de entidade-relacionamento também são renderizados como formas nativas, mas trate-os como voltados ao código por enquanto, até que a edição visual os alcance.

Como criar um fluxograma Mermaid na Miro

1. Abra a barra de criação, selecione Formatos, depois Diagrama, e clique em Criar com código.
2. Cole a sintaxe Mermaid que você já tem, comece por um template ou peça ao seu agente de IA para gerar um fluxograma diretamente do seu repositório ou de um conjunto de requisitos.
3. Veja-o renderizar como formas nativas da Miro com layout automático, para não precisar ajustar as caixas manualmente e evitar que as linhas se cruzem.
4. Abra o diagrama no modo foco para editar diretamente: clique numa forma para alterar a etiqueta ou o estilo, ajuste a direção do fluxo, ou abra o painel de código e edite a sintaxe Mermaid manualmente.
5. Convide seu time a comentar no próprio diagrama, bem onde a decisão está sendo tomada.
6. Quando terminar, exporte como imagem, copie o código Mermaid de volta para seu repositório, ou permita que seu agente leia o diagrama e os comentários do seu time pelo servidor MCP da Miro.

Se você já conhece o Mermaid, pode começar a digitar diretamente no painel de código. Se não, comece por um template e aprenda a sintaxe editando algo que já funciona.

Mais exemplos de fluxogramas Mermaid para você testar

Você não precisa escrever seu primeiro fluxograma Mermaid do zero. Cada um desses templates é um board real do Mermaid que você pode abrir, ler e editar, assim você aprende a sintaxe mudando algo que já funciona em vez de encarar um canvas vazio.

Introdução aos diagramas Mermaid na Miro

Este é o que você deve abrir primeiro se nunca escreveu uma linha de Mermaid. Ele percorre a sintaxe no mesmo ritmo deste guia: palavras-chave de direção, formas de nós, tipos de setas e alguns exemplos estilizados, cada um acompanhado pelo diagrama renderizado ao lado do código. Como é um board ao vivo e não uma página de referência estática, você pode alterar a etiqueta de um nó ou trocar uma forma e ver a renderização atualizar imediatamente. Esse ciclo de feedback imediato é a forma mais rápida de aprender o que cada símbolo realmente faz, em vez de decorar uma tabela de sintaxe.

Fluxo de autenticação do usuário com código Mermaid

Este template traz um fluxo de login funcional pronto: o usuário insere as credenciais, o aplicativo as verifica, e o diagrama se ramifica em um caminho de sucesso até o painel ou em um caminho de falha que volta para tentar novamente. É semelhante ao exemplo completo mostrado anteriormente neste guia e é um bom template para usar ao documentar qualquer tipo de fluxo de autenticação, criar conta ou aprovação com uma etapa de validação no meio. Substitua as etiquetas dos nós e a lógica de ramificação e terá seu próprio diagrama de autenticação sem mexer no layout.

Arquitetura técnica de microserviços

Este é o template ideal quando seu diagrama ultrapassa um fluxo linear simples. Ele é baseado em subgrafos, a mesma técnica de agrupamento abordada anteriormente neste guia, para que você possa agrupar serviços, APIs e repositórios de dados em seções claramente identificadas, em vez de deixar todos os nós soltos em um único diagrama plano. É um ótimo ponto de partida para documentos de integração, revisões de arquitetura ou qualquer diagrama em que seja necessário mostrar como vários serviços realmente se comunicam entre si, e não apenas o que cada um faz isoladamente.

Fluxo de pedidos de e-commerce

Este template mapeia todo o processo de e-commerce: navegação pelo catálogo, processamento do pagamento, atendimento no backend e envio automático de e-mails transacionais.

Escolha qualquer um destes templates, substitua pelas suas próprias etapas e terá um fluxograma pronto para uso em minutos, em vez de começar com um canvas vazio.

Perguntas frequentes

O que é um fluxograma Mermaid? Um fluxograma Mermaid é um fluxograma definido em texto simples usando a sintaxe do Mermaid em vez de ser desenhado à mão. Você descreve os nós e as setas que os conectam, e o Mermaid renderiza automaticamente o diagrama, incluindo layout e formas.

Como criar um fluxograma com Mermaid? Comece com uma palavra‑chave de direção como flowchart TD, depois adicione nós e setas, por exemplo A[Start] --> B[End]. Adicione formas com colchetes, etiquetas nas setas com -->|label| e agrupe etapas relacionadas com subgraph.

Posso estilizar um fluxograma Mermaid? Sim. Use estilo inline para alterações pontuais, classDef e class para estilos reutilizáveis em vários nós, e a diretiva %%{init}%% no topo do diagrama para definir um tema e cores personalizadas.

Como usar fluxogramas Mermaid na Miro? Abra a barra de criação, escolha Formatos, depois Diagrama e selecione Criar com código. Cole sua sintaxe Mermaid ou peça a um agente de IA para gerá-la, e a Miro transforma a sintaxe em um diagrama nativo editável que você pode estilizar, comentar e compartilhar.

O que a Miro oferece para fluxogramas Mermaid? O Structured Diagrams with Mermaid da Miro renderiza o código Mermaid como formas reais e editáveis, mantém o código e o diagrama sincronizados quando qualquer um deles muda e permite que agentes de IA gerem ou leiam diagramas pelo servidor MCP da Miro.

Tente você mesmo

A maneira mais rápida de aprender a sintaxe de fluxogramas Mermaid é escrever um e observar a renderização. Abra o editor de diagramas Mermaid na Miro, cole um dos exemplos acima e comece a alterá-lo até que fique igual ao seu processo real.