Visualizador de diagramas Mermaid
O visualizador de Mermaid transforma o texto do diagrama em desenho. Você escreve ou cola o código de um lado, o diagrama aparece do outro e atualiza enquanto você digita, com zoom, arraste, tela cheia e exportação em SVG ou PNG.
Diagrama que é texto
Mermaid é uma linguagem para descrever diagramas escrevendo. Em vez de arrastar retângulo e puxar seta com o mouse, você declara os nós e as ligações, e o layout é calculado para você. Trocar a ordem de dois passos é mover uma linha, não redesenhar metade da tela.
A consequência prática é que o diagrama passa a morar no repositório, ao lado do código que ele explica. Ele entra no diff, aparece no pull request e é revisado como qualquer outro arquivo. Diagrama feito em ferramenta de desenho vira um binário que ninguém revisa e que desatualiza em silêncio na primeira mudança de arquitetura.
O GitHub e o GitLab renderizam Mermaid direto no README e nas issues, dentro de um bloco de código marcado com a linguagem mermaid. Esta ferramenta é onde você confere o desenho antes de commitar.
A dupla que funciona: peça o diagrama para a IA e veja aqui
Como Mermaid é texto, e modelo de linguagem gera texto muito bem, pedir o diagrama pronto para uma IA funciona melhor do que pedir uma imagem. Cole o trecho de código, o schema do banco ou só a descrição do processo no chat e peça: gere um diagrama Mermaid disso. A resposta vem em um bloco de código que você cola aqui e vê desenhado na hora.
O ciclo completo tem quatro passos e leva menos de um minuto. Um, descreva ou cole o material no chat e peça o Mermaid, dizendo o tipo de diagrama que você quer. Dois, cole a resposta aqui. Três, olhe o desenho e conserte o que ficou errado editando o texto, com o diagrama atualizando enquanto você digita. Quatro, exporte em PNG para colar em apresentação, ou em SVG para versionar junto da documentação.
O passo três não é opcional. Modelo acerta a estrutura geral e erra detalhe: um nó a mais, uma seta invertida, um rótulo trocado, um estado que ficou órfão. Ver o desenho é de longe a forma mais rápida de encontrar esse tipo de erro, muito mais rápida do que reler o código do diagrama. E corrigir costuma ser mudar uma linha.
O caminho inverso também vale. Cole um diagrama que já existe, peça para a IA explicar o que ele descreve, adicionar um caminho de erro ou converter de fluxograma para diagrama de sequência. Como a entrada e a saída são texto, a conversa flui nos dois sentidos.
Os tipos que dão mais retorno
Fluxograma, escrito como flowchart, é o mais usado: decisão, pipeline de deploy, caminho de um pedido. Diagrama de sequência, o sequenceDiagram, mostra quem chama quem e em que ordem no tempo, e é imbatível para explicar integração, autenticação e handshake de webhook.
Diagrama de entidade e relacionamento, o erDiagram, descreve o modelo de dados com cardinalidade e vale como documentação viva do banco. Diagrama de estados, o stateDiagram-v2, descreve ciclo de vida, o clássico sendo o de um pedido que vai de criado a pago, cancelado ou estornado.
Além desses existem diagrama de classes, gráfico de Gantt para cronograma, gráfico de pizza, mapa de jornada do usuário e outros. A documentação oficial lista todos com exemplo copiável de cada um.
O que a ferramenta faz além de desenhar
O diagrama é renderizado enquanto você digita, e dá para desligar isso e renderizar só quando quiser, o que ajuda em diagrama grande. Quando a sintaxe quebra, o erro aparece com o número da linha e o desenho anterior continua na tela, então você não perde a referência do que estava vendo.
Na área do desenho: zoom com as teclas mais e menos, tecla 1 para voltar a cem por cento, tecla 0 para ajustar o diagrama à tela, tecla f para tela cheia e arraste com o mouse para mover. O painel de código abre e fecha com ctrl+b, para quando você quer só olhar.
Para levar embora: copiar o SVG para a área de transferência, baixar o SVG, que é vetorial e escala sem borrar, ou baixar um PNG em duas vezes a resolução, que é o que costuma servir para slide e documento. Cinco temas de cor mudam a aparência do diagrama, incluindo o tema da casa.
Tudo isso roda no seu navegador. A biblioteca do Mermaid é carregada na página e o diagrama nunca é enviado para servidor, o que importa quando ele descreve a arquitetura interna de um sistema.
Perguntas frequentes
O que é Mermaid?
É uma linguagem de texto para descrever diagramas. Você escreve as caixas e as setas em algumas linhas e uma biblioteca calcula o layout e desenha. Como é texto, o diagrama pode viver no repositório e ser revisado junto com o código.
Posso pedir para uma IA gerar o diagrama e colar aqui?
Pode, e é o uso mais comum hoje. Peça no chat um diagrama Mermaid do fluxo, do modelo de dados ou da sequência de chamadas, cole a resposta aqui e confira o desenho. Erros de detalhe ficam evidentes na imagem e se corrigem editando uma linha do texto.
O GitHub renderiza Mermaid?
Renderiza, dentro de um bloco de código marcado com a linguagem mermaid, tanto em README quanto em issue e pull request. O GitLab também. Esta ferramenta serve para você ver o resultado antes de commitar.
Meu diagrama não renderiza, e agora?
A mensagem de erro traz o número da linha em que o interpretador parou. As causas mais comuns são a primeira linha não declarar o tipo do diagrama, um identificador de nó com espaço ou acento fora de aspas, e uma seta escrita com a sintaxe de outro tipo de diagrama.
Dá para exportar a imagem?
Dá. SVG, que é vetorial e não perde qualidade em nenhum tamanho, ou PNG em duas vezes a resolução, que já sai nítido em tela de alta densidade e em projetor.
Preciso instalar o Mermaid?
Não. A biblioteca roda no navegador, dentro desta página. Nada é instalado e nada é enviado para servidor.
Referências
- Documentação oficial do MermaidSintaxe de todos os tipos de diagrama, com exemplo copiável de cada um.
- Mermaid: diagramas no GitHubComo colocar o diagrama dentro do README para o GitHub renderizar sozinho.
- Mermaid Live EditorO editor oficial do projeto, útil como referência de comportamento e para gerar link compartilhável.