Diagramas Mermaid em PDF: vetor e texto selecionável

Fonte · .md Arraste para cá um arquivo .md ou imagens

Prova A4 · a paginação final é a do PDF Ao vivo

Diagramas Mermaid em PDF

O Mermaid transforma poucas linhas de texto em fluxogramas, diagramas de sequência, gráficos de Gantt e muito mais. O problema costuma aparecer na hora de levar esses diagramas para um PDF: muitos conversores de Markdown online nem renderizam Mermaid e imprimem só o código, alguns transformam a página inteira em uma única imagem, e a exportação de alguns editores corta diagramas largos ou depende das fontes instaladas no seu computador.

Aqui, cada bloco ```mermaid é renderizado em SVG no seu navegador e incorporado ao PDF como gráfico vetorial nativo. O diagrama continua nítido em qualquer zoom, os rótulos podem ser selecionados, copiados e encontrados pela busca, e as cores definidas com classDef ou style saem como você escreveu.

Como converter diagramas Mermaid para PDF

Adicione seus diagramas. Cole seu Markdown ou escreva um bloco de código cercado com a linguagem mermaid.

Confira a pré-visualização. Cada diagrama aparece na pré-visualização enquanto você digita; erros de sintaxe são mostrados no lugar do diagrama.

Baixe o PDF. Clique em Baixar PDF. Os diagramas entram como gráficos vetoriais junto com o resto do documento.

Vetor e texto selecionável, nunca captura de tela

Como os diagramas entram como traçados vetoriais e texto, e não como pixels, eles saem nítidos em qualquer tamanho de impressão e deixam o arquivo leve. A busca do seu leitor de PDF encontra palavras dentro dos diagramas, e você pode copiar um rótulo direto de um fluxograma.

Do tamanho da página

Os diagramas mantêm o tamanho natural quando cabem; os largos são reduzidos até a largura do texto em vez de passarem da margem, e um mais alto que a página é reduzido para caber em uma página. Os rótulos são desenhados como texto SVG, e não como HTML incorporado, que é o que faz algumas outras exportações mostrarem caixas vazias no lugar dos rótulos.

Todos os tipos de diagrama mais comuns

Fluxogramas, diagramas de sequência, de classes, de estados e de entidade-relacionamento, gráficos de Gantt, gráficos de pizza, mapas mentais, linhas do tempo e os outros tipos que o Mermaid suporta são renderizados pelo próprio Mermaid, então a sintaxe é exatamente a que você já usa no GitHub, no GitLab, no Obsidian ou no Notion.

Perguntas frequentes

Por que meu diagrama Mermaid aparece como código no PDF?

O conversor que você usou não renderiza Mermaid e trata o bloco como código comum. Aqui, todo bloco cercado marcado como mermaid vira diagrama. Se a sintaxe tiver erro, a pré-visualização e o PDF mostram um quadro com a mensagem de erro do Mermaid, o número da linha e a linha com problema, e o resto do documento sai normalmente.

O diagrama vira imagem no PDF?

Ele vira um gráfico vetorial, não uma imagem em pixels. Continua nítido ao ampliar, e o texto dentro dele é texto de verdade, que pode ser selecionado e pesquisado.

As cores e os estilos personalizados ficam?

Ficam. Preenchimentos, cores de contorno e espessuras de linha definidos com classDef, class ou style são mantidos no PDF.

Dá para exportar só o diagrama, sem o resto do documento?

Dá: deixe apenas o bloco ```mermaid no editor e baixe. O PDF terá só o diagrama, no tamanho natural ou reduzido para caber na página. Para usar o diagrama em outro lugar, passe o mouse sobre ele na pré-visualização para copiar o SVG ou baixá-lo em SVG ou PNG.

Meu diagrama é enviado para algum servidor de renderização?

Não. O Mermaid roda no seu navegador, assim como o motor de PDF. A página não tem permissão para enviar seu documento para lugar nenhum.

Guias e casos de uso

Converter diagramas Mermaid para PDF: diagramado no seu navegador.