Guias em português

Veja o preview de diagramas Mermaid no VS Code

O VS Code não tem preview de Mermaid próprio. Instale o Mermaid Viewer, que é grátis, abra um arquivo .mmd ou .mermaid e clique no ícone de preview no canto superior direito do editor. O diagrama acompanha o que você digita, e em um arquivo Markdown o preview lista todos os blocos mermaid. O Mermaid 12.3.0 vem dentro da extensão, então o preview e a exportação em PNG ou SVG são grátis e funcionam offline, sem login. O Zovo Pro (19 USD, pagos uma vez) acrescenta exportação em PDF, exportação de todos os diagramas do workspace e exportação ao salvar, cada uma com 3 usos grátis.

Grátis, licença MIT. ID da extensão zovo.mermaid-viewer, versão 0.3.3.

Este guia também está em English · Deutsch · Español · Français · Italiano · 日本語 · Polski · 简体中文

Passo a passo no VS Code

1. Instale o Mermaid Viewer pelo Marketplace, ou aperte Ctrl+P (Cmd+P no macOS) e rode ext install zovo.mermaid-viewer.
2. Abra um arquivo .mmd ou .mermaid e clique no ícone de preview no título do editor, ou aperte Ctrl+K V (Cmd+K V no macOS). Você também pode rodar "Mermaid Viewer: Open Diagram Editor (Text + Live Preview)" pela Command Palette.
3. Em um arquivo Markdown com blocos ```mermaid, clique no mesmo ícone de preview. O preview lista todos os diagramas, cada um com sua própria linha de erro e seus próprios botões de exportação.
4. Clique em "Edit diagram" acima de um bloco no arquivo Markdown para editá-lo ao lado de um preview ao vivo. Quando você salva, o texto volta para o bloco.
5. Role a roda do mouse para dar zoom no ponteiro e arraste para mover. Fit e 100% ficam na barra de ferramentas.
6. Clique em Export para Save PNG (1x, 2x ou 4x, ou uma largura ou altura exata), Save SVG, Copy PNG ou Copy SVG code.

O que é grátis e o que o Zovo Pro acrescenta

São grátis o preview ao vivo, o editor de diagramas, o Edit diagram para blocos no Markdown, o autocompletar, o sublinhado de erros, os 15 modelos, o outline Mermaid Diagrams e a exportação e a cópia em PNG e SVG. Não há conta, login nem IA.

O Export All Diagrams in Workspace grava todos os diagramas de todos os arquivos .mmd, .mermaid e Markdown da pasta em SVG, PNG ou nos dois, dentro de mermaid-export/, com a mesma estrutura de pastas dos originais. Os diagramas que não podem ser desenhados aparecem em uma lista no final. Você não precisa abrir e exportar cada diagrama à mão quando a documentação muda.

Como usar Export All Diagrams in Workspace (Zovo Pro)

7. Abra a pasta no VS Code. Rode "Mermaid Viewer: Export All Diagrams in Workspace (SVG/PNG) (Pro)" pela Command Palette, ou clique em "Export All Diagrams in Workspace" na linha "Pro tools" abaixo da barra de ferramentas do preview.
8. Escolha SVG, PNG ou SVG e PNG.
9. Mantenha a pasta padrão mermaid-export (configuração mermaidViewer.exportFolder) ou escolha "Choose a folder…". Um uso só conta quando os arquivos são gravados. Se você apertar Escape, o uso não é gasto.

Export All Diagrams in Workspace funciona 3 vezes no seu computador antes de pedir uma licença. Não há janela pop-up nem contagem regressiva.

O Zovo Pro custa 19 USD, pagos uma vez só. Não é assinatura, e a licença libera as ferramentas Pro em todas as extensões Zovo, não só no Mermaid Viewer. Depois do pagamento com cartão (Stripe), a chave de licença aparece na página seguinte. No VS Code, rode "Zovo Pro: Enter Zovo Pro license key" pela Command Palette e cole a chave. A chave é conferida no seu computador, sem acesso à rede. Pelo GitHub Sponsors, escolha o nível "$19 one time" e depois rode "Zovo Pro: I already paid: unlock with GitHub Sponsors".

Uma equipe de 5 pessoas paga 59 USD uma vez só (com cartão). Todas as regras e ferramentas Pro estão na página do Zovo Pro (em inglês).

Passo a passo no Cursor, Windsurf ou VSCodium

1. Abra a visão Extensions com Ctrl+Shift+X (Cmd+Shift+X no macOS).
2. Busque zovo.mermaid-viewer e clique em Install. Cursor, Windsurf e VSCodium instalam extensões do Open VSX, onde esta se chama zovo/mermaid-viewer.
3. Se o seu editor não tiver galeria, baixe o arquivo .vsix na página do Open VSX e rode "Extensions: Install from VSIX...".
4. Depois disso, tudo funciona como no VS Code.

O que o Mermaid Viewer faz

• Fluxograma, sequência, classe, estado, ER, Gantt, pizza, gitGraph, mindmap, timeline, sankey, XY chart, block, C4, architecture e os outros tipos que o Mermaid 12.3.0 conhece.
• Erros sublinhados na própria linha e listados no painel Problems. O último diagrama válido continua na tela, e um bloco com erro em um Markdown não esconde os outros.
• Zoom de 1% a 3.200% no ponteiro, com movimento e pinça no trackpad.
• Exportação em SVG com rótulos em texto puro para wikis do Azure DevOps e do GitHub.
• Fundo na cor do editor, branco, transparente ou em uma cor à sua escolha, usado também nas exportações.

O que ele não faz

• Ele não acrescenta diagramas ao preview de Markdown do próprio VS Code. Ele abre um painel de preview próprio.
• Fórmulas nos rótulos ($$...$$) podem não ficar certas, porque as fontes do KaTeX não vêm na extensão.
• Pacotes de ícones que o Mermaid carrega da internet não são carregados. Os ícones embutidos funcionam.
• Diagramas com mais de 500.000 caracteres ou 2.000 ligações não são desenhados até você aumentar o limite (configurações mermaidViewer.maxTextSize e mermaidViewer.maxEdges).
• Um desenho que leva mais de 10 segundos é interrompido (configuração mermaidViewer.renderTimeoutSeconds).

Perguntas frequentes

Saiba mais

O guia em inglês traz mais detalhes e outras opções. Cada recurso e configuração está na página do Mermaid Viewer (em inglês).

Informações conferidas em 12 de novembro de 2026 na versão atual do Marketplace.