Leitor Mermaid
Renderiza e exporta diagramas Mermaid em SVG ou PNG.
O gráfico renderizado aparecerá aqui.
O que faz esta ferramenta?
Atualizado em junho de 2026
O editor Mermaid online permite escrever diagramas como código (flowchart, sequence, class, state, Gantt e outros suportados pela sintaxe) e ver o preview renderizado em tempo real no navegador. Ideal para documentação de arquitetura, RFCs internas, README de repositório e alinhamento rápido em reuniões sem abrir IDE pesado. Após validar visualmente, exporte para SVG ou PNG e incorpore em slides, Confluence ou pull requests. A renderização e o export ocorrem no cliente sempre que a implementação permitir — seu diagrama não precisa ser publicado em servidor terceiro para você obter uma prévia. Combine com os formatadores se estiver embutindo o bloco ```mermaid em JSON ou YAML de configuração, e use Base64 apenas se estiver transportando o SVG codificado em algum payload legado.
Como usar?
- Escreva ou cole a sintaxe Mermaid no editor à esquerda (ou painel principal).
- Aguarde o preview atualizar conforme você digita ou ao disparar render explícito.
- Corrija erros de sintaxe indicados (setas, IDs duplicados, palavras reservadas).
- Ajuste tema ou zoom do preview, se a interface oferecer controles.
- Exporte para SVG (vetorial, escalável) ou PNG (compartilhamento rápido) e baixe o arquivo.
Exemplos
Exemplo prático
Selecione o fluxograma de exemplo, revise o código e exporte o diagrama.
Quais são as regras e limitações?
- IDs de nós devem ser únicos; caracteres especiais podem exigir aspas na sintaxe Mermaid.
- Diagramas muito grandes podem degradar performance do preview — divida em subgraphs ou arquivos menores.
- Export PNG reflete o viewport; para impressão ampla prefira SVG.
- Conteúdo do editor permanece local; não há repositório central de diagramas no Tools4.Dev.Br.
Perguntas frequentes
Preciso instalar Mermaid CLI?
Não para preview e export básico nesta página. Para CI que gera diagramas em build, o CLI oficial continua sendo opção no pipeline.
Meus diagramas são salvos no site?
Não há conta nem nuvem obrigatória: o texto fica na sessão do navegador até você recarregar ou limpar. Faça download do export para guardar.
Por que o preview está em branco?
Sintaxe inválida, tipo de diagrama não suportado na versão embutida ou erro de indentação no bloco. Confira a documentação Mermaid para o tipo escolhido.
SVG ou PNG: qual escolher?
SVG para documentação técnica e escalabilidade; PNG para e-mail, chat ou ferramentas que não embutem SVG com segurança.
Funciona offline?
Após carregar a página, parte do trabalho pode continuar sem rede, mas o primeiro acesso exige internet para baixar os assets da aplicação.