Editor Mermaid online: desenhe diagramas em Markdown

Com o Mermaid, algumas linhas de texto viram um diagrama. O Markdown Preview Editor funciona como um editor Mermaid com visualização ao vivo: você digita o código do diagrama em um documento Markdown, e a visualização o desenha enquanto você escreve. Diferente de uma ferramenta de diagramas separada, aqui o diagrama fica junto com o texto ao redor, então um documento de design, um README ou um plano de aula continua em um só arquivo.

O que é um diagrama Mermaid?

Um diagrama Mermaid é um gráfico descrito em texto puro. Você não arrasta caixas e setas — escreve linhas como A --> B, e o Mermaid monta o desenho para você. Ele suporta fluxogramas, diagramas de sequência, gráficos de Gantt, diagramas de estado e de classes, gráficos de pizza, mapas mentais e mais.

Por ser texto, o diagrama é fácil de alterar, fica no controle de versão e aparece nos diffs. GitHub, GitLab, Obsidian e muitas ferramentas de documentação renderizam Mermaid, então o mesmo código funciona em todos eles.

Como desenhar um diagrama

1. Abra o editor. Acesse o editor online.
2. Adicione um bloco Mermaid. Digite três crases seguidas de mermaid ou use o botão Diagrama Mermaid na barra do Editor avançado para inserir um modelo.
3. Escreva o diagrama. A visualização à direita redesenha o diagrama enquanto você digita, então uma seta ou um colchete faltando aparece na hora.
4. Salve ou compartilhe. Salve o documento como .md, exporte para HTML ou imprima em PDF — os diagramas vão junto.

Aqui está um primeiro fluxograma:

markdown```mermaid
flowchart LR
  A[Ideia] --> B{Vale a pena?}
  B -- sim --> C[Fazer]
  B -- não --> D[Deixar para depois]
```

Tipos de diagrama que você pode usar

A sintaxe completa de cada tipo, com exemplos prontos para copiar, está no nosso guia de diagramas Mermaid em Markdown.

Por que usar

• Visualização ao vivo. O diagrama é atualizado enquanto você digita; erros de sintaxe aparecem na hora.
• Texto e diagramas juntos. Escreva a explicação, as fórmulas e o fluxograma em um único arquivo Markdown.
• Privado. Os diagramas são desenhados no navegador. Seu código não é enviado para nenhum servidor.
• Gratuito e de código aberto. Sem conta e sem limite de diagramas.

Limitações

• Não há download separado em PNG ou SVG de um diagrama isolado. Os diagramas são exportados como parte do documento — na exportação HTML e no PDF. Para uma imagem avulsa, as ferramentas oficiais do Mermaid permitem exportar.
• Temas personalizados e estilos por nó são limitados: os diagramas usam um visual padrão limpo, que acompanha o tema claro ou escuro.
• Os diagramas são escritos como código; não há edição visual com arrastar e soltar.

Quer ver um arquivo Markdown que já tem diagramas? Use o visualizador Markdown ou volte para a página inicial do editor Markdown.