Conversor online gratuito de MERMAID para SVG

O que é o formato MERMAID

No contexto de mapas mentais e fluxogramas, um arquivo MERMAID é um arquivo de código-fonte em texto simples que contém a sintaxe do Mermaid, geralmente salvo com a extensão .mmd ou .mermaid. O código-fonte descreve fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estado, diagramas entidade-relacionamento e mapas mentais, em vez de armazenar uma imagem finalizada.

Os arquivos Mermaid são criados ou editados no Mermaid Live Editor, no Visual Studio Code com uma extensão do Mermaid, no Obsidian e em sistemas de documentação compatíveis com blocos Mermaid. Abrir o arquivo em um editor de texto exibe declarações como flowchart TD ou mindmap; essas declarações precisam ser renderizadas por um mecanismo compatível com Mermaid.

O que é o formato SVG

SVG, ou Scalable Vector Graphics, é um formato de imagem baseado em XML que armazena caminhos, formas e texto. Navegadores, ferramentas de documentação, editores vetoriais e muitos aplicativos de publicação podem exibi-lo sem um runtime do Mermaid.

Um SVG permanece nítido quando ampliado, geralmente escala melhor do que uma captura de tela rasterizada e pode ser estilizado ou editado em aplicativos como o Inkscape. O arquivo exportado é o diagrama renderizado, não o código-fonte original do Mermaid; portanto, alterar a estrutura do diagrama posteriormente é mais fácil a partir do arquivo .mmd.

Como converter MERMAID para SVG

Usando o Mermaid CLI

O Mermaid CLI é o método mais direto para desktop ou linha de comando e requer o Node.js. Instale o renderizador com:

npm install -g @mermaid-js/mermaid-cli

Salve o código-fonte como diagram.mmd e renderize-o com:

mmdc -i diagram.mmd -o diagram.svg

A opção -i especifica o código-fonte do Mermaid e -o especifica a saída SVG. Para um diagrama que usa um tema personalizado ou um arquivo de configuração, passe-o com:

mmdc -i diagram.mmd -o diagram.svg -c mermaid-config.json

Você também pode renderizar diretamente com npx sem uma instalação global:

npx -p @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.svg

Usando o Mermaid Live Editor

Abra o código-fonte no Mermaid Live Editor, verifique a visualização renderizada em busca de erros de sintaxe e use Actions → Export Diagram → SVG ou o controle equivalente de exportação SVG. Salve o arquivo baixado com a extensão .svg. Esse método é adequado quando o Node.js não pode ser instalado, mas depende da versão do Mermaid compatível com o editor e dos recursos de diagrama disponíveis.

Usando o conversor online integrado

Você pode converter o arquivo gratuitamente em 101convert.com sem instalar software: carregue o arquivo .mmd ou .mermaid, escolha SVG como formato de saída, inicie a conversão e baixe o arquivo .svg resultante.

Considerações sobre qualidade e compatibilidade

Os erros de conversão geralmente são causados por sintaxe do Mermaid não compatível, dependências de diagrama ausentes ou recuo inválido em estruturas como mapas mentais. Renderize o código-fonte antes de exportar e inspecione o SVG no tamanho de exibição pretendido.

A saída SVG pode depender das fontes disponíveis, da renderização do navegador, da versão do Mermaid e das configurações do tema. Se a aparência exata for importante, use uma fonte comum ou converta o texto em caminhos em um editor vetorial após a exportação; converter o texto em caminhos torna a edição posterior do texto mais difícil.

Alguns consumidores de SVG restringem estilos incorporados, scripts, hiperlinks ou elementos XML estrangeiros. Para obter a máxima compatibilidade, use um SVG estático simples e remova recursos interativos que dependam de JavaScript. Mantenha o arquivo Mermaid original junto ao SVG para que o diagrama continue editável estruturalmente.