Editor Mermaid Online com Pré-visualização Instantânea
O editor Mermaid ao vivo permite escrever diagramas como texto puro usando a sintaxe do Mermaid.js e vê-los renderizar no instante em que você digita. Um layout dividido coloca seu código de um lado e a pré-visualização ao vivo do outro, levando você da ideia ao diagrama pronto sem precisar sair da página.
Ele foi feito para desenvolvedores, redatores técnicos e qualquer pessoa que prefira descrever um diagrama em código a arrastar caixas na mão. Escolha entre nove tipos de diagrama — fluxogramas, sequência, classes, estados, ER, Gantt, pizza, mapas mentais e grafos Git — e depois exporte o resultado como um SVG nítido ou um PNG.
Como Usar o Editor Mermaid
Escolha um ponto de partida
O editor abre com um fluxograma de exemplo. Continue editando-o ou abra o menu Modelos e escolha um dos nove diagramas prontos para começar.
Escreva seu código
Digite a sintaxe Mermaid no painel esquerdo. Os números de linha acompanham sua estrutura, e Tab / Shift+Tab adicionam ou removem uma indentação de quatro espaços enquanto você escreve.
Acompanhe a pré-visualização ao vivo
A pré-visualização é renderizada de novo automaticamente um instante depois que você para de digitar. Se a sintaxe estiver errada, uma mensagem de erro clara aparece abaixo do editor para você corrigir.
Exporte ou copie
Baixe o diagrama como SVG ou PNG, ou copie a marcação SVG direto para a área de transferência e cole em outro documento ou ferramenta.
Recursos
Pré-visualização ao Vivo
Seu diagrama é renderizado de novo automaticamente enquanto você digita, dando retorno visual instantâneo com o Mermaid.js.
9 Tipos de Diagrama
Crie fluxogramas, diagramas de sequência, classes, estados, ER, Gantt, pizza, mapa mental e grafo Git a partir de texto.
Modelos Prontos
Comece rápido com um exemplo funcional para cada tipo de diagrama suportado e depois ajuste a sintaxe como quiser.
Editor de Código com Números de Linha
Números de linha mais a indentação por Tab e Shift+Tab mantêm o código de diagrama de várias linhas organizado e legível.
Exibição de Erros em Tempo Real
Os problemas de sintaxe são mostrados com clareza abaixo do editor para você saber exatamente o que corrigir.
Exportação em SVG e PNG
Salve um SVG escalável para web e documentos, ou um PNG de alta resolução renderizado em escala 2x.
Copiar SVG para a Área de Transferência
Copie a marcação SVG renderizada com um clique para colar direto em outro aplicativo ou base de código.
Zoom de 25% a 300%
Aproxime a pré-visualização com os botões +/− ou Ctrl + roda do mouse, e volte para 100% quando quiser.
Layout Dividido Redimensionável
Arraste o divisor para reequilibrar o editor e a pré-visualização, com layout empilhado em telas pequenas.
Salvamento Automático
Seu código é salvo automaticamente no navegador e restaurado exatamente de onde você parou.
Modo Escuro
Troque o tema e o tema do diagrama Mermaid acompanha, então os diagramas sempre combinam com a página.
Totalmente no Navegador
Toda a renderização acontece no seu navegador — sem envios, sem contas e sem rastreamento do seu código.
Perguntas Frequentes
O que é um diagrama Mermaid?
Mermaid é uma biblioteca JavaScript de código aberto que transforma definições baseadas em texto em diagramas. Em vez de desenhar formas na mão, você escreve uma descrição curta da estrutura, parecida com Markdown, e o Mermaid a renderiza como um diagrama visual pronto.
Como escrevo a sintaxe Mermaid?
A maneira mais rápida de aprender é abrir o menu Modelos e carregar um exemplo funcional do tipo de diagrama que você quer. Estude como nós, setas e rótulos são escritos, depois edite o código e veja a pré-visualização ao vivo se atualizar. Cada tipo de diagrama — fluxograma, sequência, classes e assim por diante — tem sua própria palavra-chave simples na primeira linha.
Quais tipos de diagrama este editor suporta?
Nove tipos no total: fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estados, diagramas ER (entidade-relacionamento), gráficos de Gantt, gráficos de pizza, mapas mentais e grafos Git. Cada um tem um modelo pronto correspondente para começar.
Como exporto um diagrama Mermaid como PNG ou SVG?
Use os botões da barra de ferramentas. O SVG baixa um arquivo vetorial escalável que permanece nítido em qualquer tamanho — ideal para documentos e a web. O PNG baixa uma imagem rasterizada renderizada em escala 2x para uma exibição nítida em telas de alta resolução. Você também pode usar Copiar SVG para colar a marcação em outro lugar.
Meu código fica salvo se eu fechar a aba?
Sim. Seu código é salvo automaticamente no armazenamento local do navegador e restaurado quando você volta. Lembre-se de que limpar os dados do navegador também removerá o código salvo, já que ele fica apenas no seu dispositivo.
Por que meu diagrama mostra um erro de sintaxe?
Cada tipo de diagrama Mermaid tem suas próprias regras de sintaxe. Deslizes comuns são uma seta faltando (-->), a palavra-chave de abertura errada ou colchetes que não combinam. Leia a mensagem de erro mostrada abaixo do editor — ela aponta a linha ou o token que precisa de atenção.
Posso usar o editor no celular?
Sim. Em telas estreitas o layout se empilha na vertical, com o editor em cima e a pré-visualização embaixo, e você pode arrastar o divisor para ajustar as alturas. Todos os recursos continuam disponíveis.
Ainda não há comentários. Seja o primeiro a comentar!