Como criar um diagrama Mermaid e exportar em PNG, SVG ou Excalidraw

Como criar um diagrama Mermaid no navegador

Escreva o diagrama como texto no campo "Código do diagrama (Mermaid)", acompanhe a "Prévia ao vivo" e clique em "Baixar PNG", "Baixar SVG" ou "Converter para Excalidraw (editável)". Tudo roda no seu navegador, sem cadastro. A conversão para Excalidraw editável, com formas soltas, vale para fluxograma, sequência, classes, entidade-relacionamento e estados; os outros tipos vão para o arquivo Excalidraw como uma imagem única.

1. Abra o editor de Mermaid: o campo "Código do diagrama (Mermaid)" já vem com um fluxograma de exemplo, que você pode apagar ou editar.
2. Escreva o diagrama em texto: por exemplo, "flowchart TD" na primeira linha e "A --> B" na seguinte. A "Prévia ao vivo" redesenha a cada pausa na digitação; se a sintaxe estiver errada, aparece no lugar do desenho a mensagem de erro do próprio Mermaid, em inglês, que indica a linha do problema (por exemplo, "Parse error on line 2"). Os três botões só ficam ativos quando a prévia está correta.
3. Clique em "Baixar PNG" para uma imagem com fundo branco em alta resolução (arquivo diagrama.png) ou em "Baixar SVG" para o desenho vetorial (diagrama.svg), que não perde nitidez em nenhum tamanho.
4. Se o diagrama for um fluxograma, uma sequência, um diagrama de classes, de entidade-relacionamento ou de estados, clique em "Converter para Excalidraw (editável)" e baixe o arquivo diagrama.excalidraw.
5. Abra o arquivo em excalidraw.com ou no app do Excalidraw para continuar editando à mão: mover caixas, trocar cores, acrescentar anotações.

O que é Mermaid e por que escrever diagramas em texto

Mermaid é uma forma de descrever um diagrama com texto, em vez de arrastar formas com o mouse. Você escreve "A --> B" e o desenho aparece: A vira uma caixa, B vira outra e a seta liga as duas. A primeira linha diz o tipo do diagrama ("flowchart", "sequenceDiagram", "classDiagram"...), e as seguintes descrevem os elementos. Como o diagrama é só texto, ele pode ser guardado junto com o código do projeto, revisado pela equipe e ajustado em segundos sem reposicionar cada forma. A sintaxe completa está na documentação oficial do Mermaid.

Quais tipos de diagrama viram Excalidraw editável (e quais não)

A prévia e os downloads em PNG e SVG funcionam com qualquer tipo que o Mermaid desenhe. Já a conversão para um arquivo Excalidraw editável (em que cada caixa, seta e texto vira uma forma que você pode mover) só existe para alguns tipos. Para os demais, o arquivo .excalidraw leva o diagrama como uma imagem única: dá para mover e redimensionar, mas não editar caixa por caixa. Se o objetivo é só ter a figura, PNG ou SVG resolvem do mesmo jeito.

• Viram formas editáveis no Excalidraw: fluxograma (flowchart), diagrama de sequência (sequenceDiagram), diagrama de classes (classDiagram), diagrama de entidade-relacionamento (erDiagram) e diagrama de estados (stateDiagram).
• Não viram formas soltas: gráfico de Gantt (gantt), gráfico de pizza (pie), mapa mental (mindmap), gitGraph, jornada do usuário (journey) e os outros tipos. Para esses, o arquivo Excalidraw sai com uma imagem única; se quiser só a figura, clique em "Baixar PNG" ou "Baixar SVG".

A dica dentro do editor cita gantt, pie e mindmap como pontos de partida. Eles funcionam na prévia e nos downloads em PNG e SVG; na conversão para Excalidraw, entram no arquivo como uma imagem única, não como formas editáveis. O próprio editor avisa isso na nota abaixo dos botões.

Do Excalidraw para o draw.io (e de volta)

Se a sua equipe trabalha no draw.io (diagrams.net), o caminho continua: converta o arquivo .excalidraw que você baixou em um diagrama .drawio editável com a ferramenta Excalidraw → draw.io, que também roda no navegador. As formas, as setas e os textos são preservados, e os ícones da AWS reconhecidos voltam como formas nativas do draw.io. O que é preservado nessa troca, e os erros comuns, estão em diagrama de arquitetura AWS: converter draw.io e Excalidraw.

O sentido contrário também existe: um diagrama .drawio ou .xml do draw.io vira uma cena .excalidraw editável, com os ícones da AWS embutidos. É útil quando alguém manda um desenho de arquitetura no draw.io e você prefere retocar no Excalidraw.

PNG ou SVG: qual baixar

• PNG: imagem comum, com fundo branco, gerada em alta resolução (até 4 vezes o tamanho da prévia, com teto de 2.400 pixels no lado maior). Serve para colar num documento do Word, num chamado, num e-mail ou numa apresentação.
• SVG: desenho vetorial, que fica nítido em qualquer tamanho e pesa pouco. É a melhor escolha para sites, documentação e impressão em tamanho grande.
• Excalidraw: não é imagem, é o diagrama em si, aberto para edição. Escolha quando quiser continuar desenhando à mão livre.

Erros comuns ao escrever Mermaid

• Esquecer a primeira linha com o tipo do diagrama: sem "flowchart TD" (de cima para baixo) ou "flowchart LR" (da esquerda para a direita), o Mermaid não sabe o que desenhar.
• Usar parênteses, aspas ou dois-pontos dentro de um rótulo sem proteger: escreva o texto entre aspas dentro dos colchetes, como A["Enviar (por e-mail)"].
• Trocar o tipo de seta: "-->" é seta cheia, "---" é linha sem ponta e "-.->" é seta tracejada. Um traço a menos e a linha some.
• Digitar tudo de uma vez e só depois olhar a prévia: como ela atualiza a cada pausa, vale conferir linha a linha; a mensagem de erro costuma apontar a linha do trecho que acabou de ser digitado.

Tudo acontece no seu navegador: o diagrama é desenhado no seu próprio aparelho e nenhum texto ou arquivo é enviado a servidor algum. Dá para usar com diagramas de sistemas internos sem preocupação.