Editor de diagramas Mermaid
Digite Mermaid de um lado e o diagrama vai se desenhando do outro. Um erro é marcado na própria linha enquanto a última versão boa continua na tela. Tudo roda nesta aba do navegador.
Como funciona
Mermaid é uma forma de escrever um diagrama como texto. Algumas linhas como “A --> B” viram um fluxograma, um diagrama de sequência, um diagrama de classes ou de banco de dados, um gráfico de Gantt ou um mapa mental. GitHub, GitLab, Notion e a maioria das ferramentas de documentação desenham isso no lugar, e é por isso que os diagramas em READMEs e documentação são tantas vezes Mermaid. O que elas não oferecem é um bom lugar para escrever um.
Este editor desenha o diagrama enquanto você digita. Quando uma linha está errada, ela é sublinhada e a mensagem diz o que o Mermaid esperava, enquanto a última versão que funcionou continua na tela, esmaecida, para que a imagem não suma toda vez que você está no meio de digitar uma seta. Diagramas grandes podem ser arrastados e ampliados.
Quando estiver certo, salve como SVG, ou como PNG no tamanho certo para onde ele vai: um documento, um slide ou uma página impressa. Você também pode copiá-lo direto para a área de transferência. Seu rascunho fica guardado neste navegador entre uma visita e outra, e um link de compartilhamento leva o diagrama dentro do próprio link, então nada dele é guardado em um servidor.
Como usar
- 1 Digite ou cole Mermaid, abra um arquivo .mmd ou Markdown, ou comece com um exemplo.
- 2 Acompanhe a prévia. Se uma linha estiver sublinhada, corrija; a mensagem diz o que o Mermaid esperava.
- 3 Escolha uma aparência, e arraste ou dê zoom na prévia para conferir os detalhes.
- 4 Baixe SVG ou PNG, copie a imagem ou copie um link para compartilhar o diagrama.
Bom saber
- Abrir um arquivo Markdown abre o primeiro bloco ```mermaid dele, então o diagrama de um README pode ser editado sozinho.
- Escolher um exemplo substitui o que está no editor, e Ctrl+Z traz seu diagrama de volta.
- SVG continua nítido em qualquer tamanho e é o que usar na web. PNG é o que slides, apps de mensagem e editores de texto aceitam com mais confiabilidade.
- Um tema definido dentro do diagrama com uma linha %%{init}%% tem prioridade sobre a opção Aparência.
- Nada é enviado. O diagrama é desenhado nesta aba, e os links de compartilhamento o guardam na parte do endereço que um navegador nunca envia a um servidor.
Compatibilidade com navegadores
- Chrome 94 ou mais recente
- Firefox 93 ou mais recente · velocidade total a partir de 113
- Safari 16.4 ou mais recente
- Edge 94 ou mais recente
Estas são as versões mais antigas que têm tudo o que a ferramenta usa. Elas saem da própria ferramenta, então mudam quando ela muda.
Números de versão conferidos em 2026-09-04.
Perguntas frequentes
Meu diagrama é enviado para algum lugar?
Não. O Mermaid roda dentro desta aba do navegador, e seu rascunho fica salvo só neste navegador. Você pode conferir nas ferramentas de desenvolvedor do navegador, na aba Rede: digitar não envia nada.
Como os links de compartilhamento funcionam sem servidor?
O diagrama é comprimido e escrito na parte do link depois do #. Os navegadores nunca enviam essa parte ao site, então o link abre o diagrama no aparelho de qualquer pessoa sem que o próprio site o receba. Um diagrama longo gera um link longo.
Quais tipos de diagrama são suportados?
Tudo o que o Mermaid 12 desenha: fluxogramas, diagramas de sequência, de classes, de estados e de entidade relacionamento, gráficos de Gantt, gráficos de pizza, mapas mentais, linhas do tempo, jornadas de usuário, grafos de Git, gráficos de quadrantes, diagramas de Sankey e gráficos XY, além dos mais novos de blocos, pacotes, arquitetura, kanban, radar e treemap.
Por que uma linha está sublinhada?
É onde o Mermaid parou de entender o diagrama. A mensagem ao lado é do próprio Mermaid e diz o que ele esperava encontrar. Muitas vezes o erro de verdade está logo antes, como um colchete ou aspas que nunca foram fechados.
De que tamanho vai ser o PNG?
Depende de para que ele serve. Para um documento, o dobro do tamanho em que o diagrama é desenhado, o que continua nítido em telas de alta densidade. Para slides, o maior que couber em uma tela 4K. Para impressão, o maior que couber em um A4 a 300 dpi. O botão mostra o tamanho exato em pixels antes de você baixar.
Posso editar um diagrama do meu README?
Sim. Abra o arquivo Markdown e o primeiro bloco Mermaid dele abre no editor. Quando terminar, copie o texto de volta para o arquivo.
É seguro abrir um diagrama que outra pessoa me mandou?
Os diagramas são desenhados no modo estrito do Mermaid. Tudo o que poderia executar código é removido, e uma linha dentro do diagrama não consegue desligar esse modo.
Ferramentas relacionadas
Seus arquivos são processados no seu dispositivo e não são enviados. Você pode verificar isso nas ferramentas de desenvolvedor do seu navegador, na aba Rede.