Editor de diagramas Mermaid

Escreva código Mermaid e veja fluxogramas, diagramas de sequência e mais; exporte SVG ou PNG
  • Os arquivos não saem do seu dispositivo
  • Roda no navegador
  • Grátis, sem cadastro, sem marca d’água
PreviewLoading Mermaid…

Como usar Editor de diagramas Mermaid

Escreva código Mermaid e veja o diagrama enquanto digita: fluxogramas, sequência, classe, estado, ER, Gantt, pizza, mapa mental, linha do tempo e grafos Git. Amplie e mova a prévia e exporte SVG ou PNG em até 4×. A renderização acontece no seu navegador.

  1. 1

    Digite código Mermaid no editor, ou escolha um diagrama em Exemplo para começar.

  2. 2

    Escolha um Tema: Padrão, Neutro, Escuro ou Floresta.

  3. 3

    Confira a prévia. Role ou belisque para ampliar, arraste para mover e use Ajustar à vista ou Tela cheia.

  4. 4

    Defina Fundo e tamanho do PNG e clique em SVG ou PNG para baixar, ou em Copiar SVG / Copiar PNG para a área de transferência.

Perguntas frequentes

O código do meu diagrama é enviado a um servidor?

Não. O Mermaid roda dentro da página, então seu código e seus diagramas ficam no navegador. O código é salvo localmente para continuar lá na próxima vez.

O que acontece quando meu código tem um erro de sintaxe?

O erro aparece abaixo do editor com o número da linha, e a prévia continua mostrando o último diagrama que renderizou.

Posso exportar com fundo transparente?

Sim. Defina Fundo como Transparente antes de exportar SVG ou PNG.

Como obtenho um PNG mais nítido?

Escolha um tamanho de PNG de 2×, 3× ou 4×. As dimensões exatas em pixels aparecem ao lado da configuração.

Há um atalho de teclado para salvar?

Ctrl/⌘ + S no editor baixa o SVG. Na prévia, + e − ampliam, as setas movem, 0 volta a 100% e F ajusta o diagrama.