Este editor mermaid ao vivo transforma código Mermaid simples em diagramas renderizados enquanto você digita, com a renderização começando no momento em que você cola. Insira um fluxograma, diagrama de sequência, gráfico de gantt, diagrama de classes ou diagrama de estados e veja o SVG aparecer instantaneamente ao lado da sua origem. Foi feito para desenvolvedores, redatores técnicos e arquitetos que mantêm diagramas em documentos, arquivos README ou notas de design e querem uma forma rápida de visualizá-los e exportá-los. O renderizador de diagramas mermaid detecta automaticamente temas claro e escuro para combinar com sua visualização, reporta erros de sintaxe inline para você corrigi-los rapidamente, e permite baixar o resultado como um SVG limpo. Como tudo é processado localmente no seu navegador, a origem do seu diagrama nunca sai do seu dispositivo e nada é enviado para um servidor.
Recursos
Renderização ao vivo de código Mermaid em SVG enquanto você digita
Suporta fluxogramas, diagramas de sequência, gantt, classes, estados e mais tipos de diagrama
Mensagens de erro de sintaxe inline apontam os problemas no seu código
Detecta automaticamente o tema claro e escuro para combinar com sua visualização atual
Baixe o diagrama renderizado como um arquivo SVG limpo
Modo de segurança estrito sanitiza o conteúdo do diagrama durante a renderização
Roda inteiramente no seu navegador, então nada é enviado para um servidor
Como usar Renderizador de diagramas Mermaid
Cole ou digite seu código Mermaid na caixa de entrada.
Veja o diagrama renderizar automaticamente no painel de saída.
Corrija quaisquer mensagens de erro de sintaxe inline, se aparecerem.
Alterne o tema do seu navegador ou aplicativo para visualizar o estilo claro ou escuro.
Clique em baixar para salvar o resultado como diagram.svg.
Exemplo
Entrada
graph TD
A[Início] --> B{Funciona?}
B -->|Sim| C[Publicar]
B -->|Não| D[Corrigir]
D --> B
Saída
Um fluxograma SVG renderizado: uma caixa Início flui para um losango de decisão Funciona?, o ramo Sim aponta para Publicar, o ramo Não aponta para Corrigir, e Corrigir volta para a decisão.
Um fluxograma simples renderizado em SVG que pode ser baixado.
Erros comuns e solução de problemas
Erro de parsing ou "Syntax error in text" exibido em vez de um diagrama. — Verifique se a primeira linha declara um tipo de diagrama válido (ex.: graph TD, sequenceDiagram, gantt) e se as setas e colchetes estão balanceados.
Rótulos de nós com caracteres especiais como parênteses ou aspas quebram a renderização. — Envolva o texto do rótulo em aspas duplas, por exemplo A["Meu (rótulo)"], para que o Mermaid trate os caracteres literalmente.
O diagrama renderiza, mas as cores ficam erradas contra seu fundo. — O renderizador segue seu tema claro ou escuro automaticamente; alterne o tema do seu aplicativo para obter o estilo correspondente.
Indentação ou tabulações causam layout inesperado em fluxogramas. — Use espaços consistentes para a indentação e mantenha cada nó ou ligação em sua própria linha.
Perguntas frequentes
O que é o editor Mermaid ao vivo?
É uma ferramenta no navegador que converte código Mermaid em um diagrama renderizado em tempo real, para você visualizar fluxogramas, diagramas de sequência e mais ao lado da sua origem e exportá-los como SVG.
Quais tipos de diagrama o editor Mermaid ao vivo suporta?
Ele renderiza a sintaxe padrão do Mermaid, incluindo fluxogramas, diagramas de sequência, gráficos de gantt, diagramas de classes e diagramas de estados, a mesma sintaxe usada no GitHub e em muitas ferramentas de documentação.
Como exporto um diagrama Mermaid como imagem?
Assim que seu diagrama renderizar, clique em baixar para salvá-lo como um arquivo SVG que você pode inserir em documentos ou abrir em qualquer editor vetorial.
Por que meu diagrama Mermaid mostra um erro de sintaxe?
O renderizador valida o código Mermaid e mostra a mensagem do parser inline; a maioria dos erros vem de uma declaração de tipo de diagrama faltando ou de colchetes e setas desbalanceados.
O diagrama renderizado combina com meu modo escuro?
Sim. O editor Mermaid ao vivo detecta se você está visualizando em modo claro ou escuro e aplica o tema Mermaid correspondente automaticamente.
O código do meu diagrama Mermaid é mantido privado?
Sim. A origem do seu Mermaid é renderizada localmente no seu navegador e nunca sai do seu dispositivo, então nada é enviado para um servidor.
Ferramentas relacionadas
Formatador de JSON — Embeleze, minifique e valide JSON com a localização dos erros.
YAML ↔ JSON — Converta YAML para JSON e vice-versa.