Editor de Diagramas Mermaid
Escreva sintaxe Mermaid à esquerda e veja seu fluxograma, sequência ou diagrama de Gantt renderizar ao vivo à direita.
Tudo o que você precisa para criar diagramas como código
Pré-visualização ao vivo instantânea
Veja seu diagrama renderizar no momento em que você digita — sem etapa de build, sem apertar botões, sem espera.
Todos os tipos de diagrama Mermaid
Fluxogramas, diagramas de sequência, diagramas de classe, diagramas de estado, gráficos de Gantt, mapas mentais e muito mais — a sintaxe completa do Mermaid 11.
Alternador de temas
Alterne entre os temas padrão, neutro e escuro para combinar com seus documentos, slides ou painéis sem mudar uma linha de código.
Exporte SVG e PNG
Baixe um SVG vetorial nítido ou um PNG de alta resolução, ou copie o markup SVG direto para sua área de transferência.
Privado, nada é enviado
Toda a renderização acontece localmente no seu navegador — seu diagrama nunca sai do seu dispositivo, sem limites de tamanho e sem conta.
Erros de sintaxe claros
Diagramas inválidos são detectados instantaneamente e mostrados com um erro legível, para que você corrija a sintaxe rapidamente.
Sobre o Editor de Diagramas Mermaid
O Editor de Diagramas Mermaid é uma ferramenta gratuita no navegador para escrever e visualizar diagramas Mermaid. Digite a sintaxe Mermaid à esquerda e veja o diagrama renderizado atualizar ao vivo à direita, com três temas integrados — padrão, neutro e escuro. Quando seu diagrama estiver correto, copie o código ou o SVG, ou baixe-o como um SVG vetorial ou PNG de alta resolução. Como tudo é executado localmente com a biblioteca Mermaid de código aberto, não há uploads, não há limites de tamanho e nenhuma conta é necessária.
Como criar um diagrama Mermaid
Três passos da ideia a um diagrama compartilhável.
Escreva seu diagrama como texto
Comece pela amostra integrada ou digite a sintaxe Mermaid diretamente — fluxogramas, diagramas de sequência, diagramas de classe e muito mais.
Veja renderizar ao vivo
O diagrama é atualizado automaticamente enquanto você edita. Alterne os temas com o menu suspenso para encontrar o visual que você quer.
Exporte ou compartilhe
Copie o código Mermaid ou o SVG, ou baixe o diagrama como um arquivo SVG ou PNG para documentos, slides e READMEs.
Coisas para saber
Os diagramas são renderizados com o Mermaid 11 em modo de segurança estrito, que sanitiza rótulos para que nenhum HTML ou script seja executado — manipuladores de clique interativos são desativados na pré-visualização. PNGs exportados são renderizados em resolução 2x para impressões nítidas, e tudo é executado localmente, então não há limite de tamanho de arquivo.