Mermaid para PowerPoint: Quatro Caminhos e o que Cada Um lhe Custa
Resposta curta: não existe nenhum motor de renderização de Mermaid dentro do PowerPoint, por isso todos os caminhos de Mermaid para PowerPoint incluem um passo de conversão. Tem quatro opções realistas — exportar um PNG, exportar um SVG, instalar um add-in de Mermaid, ou reconstruir o diagrama com formas nativas do PowerPoint. Cada uma faz um compromisso diferente entre editabilidade, resolução e tempo de configuração. Existe ainda um quinto caminho, gerar uma versão animada a partir do mesmo código-fonte Mermaid, útil se a razão pela qual está a pôr o diagrama num slide é ter de o explicar a uma audiência.
Este guia é sobre escolher o caminho certo em vez de recorrer por omissão à captura de ecrã.
Porque é que o PowerPoint não consegue renderizar Mermaid diretamente?
Mermaid é uma biblioteca JavaScript. Interpreta uma definição em texto dentro de um browser e desenha SVG. O PowerPoint não é um browser e não inclui nenhum parser de Mermaid, por isso colar `graph TD` numa caixa de texto produz exatamente aquilo que escreveu: as palavras `graph TD`.
É este facto isolado que determina todas as decisões seguintes. Alguma coisa fora do PowerPoint tem de transformar primeiro o seu texto em pixels ou vetores, e é essa coisa que determina o que poderá alterar mais tarde.
O efeito colateral é onde está o verdadeiro custo. O seu código-fonte Mermaid está sob controlo de versões, ao lado do código que descreve. A partir do momento em que se torna uma imagem numa apresentação, a apresentação deixa de acompanhar o repositório. Nada o avisa de que a arquitetura mudou. O diagrama do slide 14 está simplesmente errado na revisão seguinte, e ninguém dá por isso até que alguém na sala conheça o sistema suficientemente bem para levantar objeções.
Quais são as quatro formas de pôr um diagrama Mermaid no PowerPoint?
Caminho 1: Exportar PNG e inserir como imagem
O caminho por omissão. Renderize em mermaid.live ou com a CLI do Mermaid, descarregue o PNG e depois Inserir, Imagens, Este Dispositivo.
PNG é um formato raster, por isso a qualidade fica fixada no momento da exportação. Um diagrama exportado à largura do browser fica bem no seu portátil e desfocado num projetor. Se seguir este caminho, exporte com duas a três vezes o tamanho de que precisa no slide e reduza a escala, nunca ao contrário.
Caminho 2: Exportar SVG e inserir como imagem
O mesmo fluxo de trabalho, melhor resultado. O PowerPoint suporta a inserção de SVG há anos, e SVG é um formato vetorial, pelo que se mantém nítido em qualquer tamanho de projeção.
O SVG desbloqueia ainda um truque que o caminho do PNG não permite: selecione o SVG inserido, clique com o botão direito, Converter em Forma. O PowerPoint decompõe o vetor em formas nativas que pode recolorir, redecorar ou animar individualmente. Perde definitivamente a ligação ao código-fonte Mermaid, mas ganha um diagrama a condizer com a paleta do seu modelo.
Atenção aos tipos de letra. Se a sua renderização Mermaid usou um tipo de letra que a máquina de apresentação não tem, o SVG substitui-o por outro e as caixas que assentavam bem nas etiquetas deixam de assentar.
Caminho 3: Um add-in do PowerPoint
Existem add-ins comunitários que integram um editor de Mermaid dentro do PowerPoint, guardam o código-fonte com o ficheiro e permitem voltar a renderizar depois de uma edição. O add-in da Accion Labs é o mais conhecido deles.
Este é o único caminho que mantém a definição em texto e o slide no mesmo sítio, o que conta se o diagrama for revisto repetidamente dentro da apresentação. O custo é organizacional e não técnico: os add-ins precisam de permissões de instalação e, na maioria das empresas, isso é um pedido de suporte, não um clique. Além disso, obriga a que quem abra a apresentação tenha o mesmo add-in.
Caminho 4: Reconstruir com formas nativas
Leia o diagrama Mermaid e depois desenhe-o outra vez com formas e conetores do PowerPoint.
Toda a gente descarta esta hipótese e toda a gente acaba por fazê-la, porque é o único caminho que produz um diagrama totalmente dentro do sistema de design da apresentação, totalmente animável com o Painel de Animação, e editável por um colega que nunca ouviu falar de Mermaid. É também o mais lento, e a cópia diverge de imediato da fonte da verdade.
Reserve-o para o diagrama, ou os dois, que sustentam o argumento da apresentação.
Que caminho devo escolher?
| Caminho | Configuração | Mantém-se nítido num projetor | Editável no PowerPoint | Mantém o código-fonte Mermaid | Melhor para | |---|---|---|---|---|---| | Exportação PNG | Nenhuma | Não, resolução fixa | Não | Não | Uma apresentação interna rápida | | Exportação SVG | Nenhuma | Sim | Depois de Converter em Forma | Não | A maioria dos casos, a escolha sensata | | Add-in | Requer instalação | Sim | Através do editor do add-in | Sim | Apresentações revistas ao longo de meses | | Reconstruir com formas | Manual, lento | Sim | Totalmente | Não | Os dois slides que contam | | Gerar uma versão animada | Nenhuma | Sim | Incorporado como media | Sim, mantém a definição | Diagramas que tem de narrar |
Se quer uma regra única: exporte SVG. É gratuito, não precisa de autorizações, e Converter em Forma cobre o caso em que mais tarde precise de mudar o estilo.
E se o problema não for o formato mas a explicação?
Há uma categoria de diagrama Mermaid em que nenhum dos quatro caminhos ajuda, e vale a pena nomeá-la porque é provavelmente a razão da sua pesquisa.
Tem um diagrama de sequência com doze mensagens, ou um grafo de arquitetura com vinte nós. Está correto. Renderiza lindamente. E quando aterra no slide, tudo aparece de uma só vez, a audiência lê o canto inferior direito enquanto explica o canto superior esquerdo, e passa o primeiro minuto do seu tempo a dizer "ignorem esta parte por agora".
Isto não é um problema de resolução. Um SVG de melhor qualidade piora a situação, porque agora está tudo legível ao mesmo tempo.
A solução é a sequência: revele o diagrama pela ordem em que o explica. O caminho 4 leva-o lá à mão, uma animação de entrada por forma, e é por isso que há quem o faça apesar do custo. A alternativa é gerar uma versão animada diretamente a partir da definição Mermaid e incorporar o GIF ou MP4 resultante no slide. Descrevemos esse fluxo de trabalho em detalhe em transformar diagramas Mermaid em visuais animados para apresentações, e o argumento mais amplo a favor de construir em vez de revelar em como apresentar a arquitetura de um sistema.
O conversor de Mermaid do FluxDiagram lê uma definição Mermaid ou PlantUML — flowchart, sequência, classes, Gantt ou circular — extrai os nós e as ligações, e devolve-lhe uma descrição a partir da qual pode gerar uma versão animada. Exporte como GIF para um ciclo contínuo ou MP4 para reprodução controlada, e depois insira-o no slide da mesma forma que inseriria uma imagem. O código-fonte Mermaid fica onde vive, no repositório, que é precisamente a propriedade que os caminhos do PNG e do SVG destroem ambos.
Um fluxo de trabalho que sobrevive à próxima revisão
Qualquer que seja o caminho que escolher, há dois hábitos que impedem os diagramas de envelhecer mal nas apresentações.
Guarde a definição nas notas do orador. Cole o código-fonte Mermaid no campo de notas do slide onde ele é apresentado. Não custa nada, viaja com o ficheiro, e a próxima pessoa a editar esse slide pode voltar a gerá-lo em vez de adivinhar.
Volte a exportar em vez de remendar. Quando o sistema mudar, mude o Mermaid e exporte de novo. Editar a imagem, ou ajustar uma caixa reconstruída, é a forma como uma apresentação acaba a descrever uma arquitetura que já não existe.
FAQ
Posso colar código Mermaid diretamente no PowerPoint?
Não. O Office não inclui nenhum motor de renderização de Mermaid, por isso a sintaxe fica como texto literal. Precisa de um passo de exportação ou de um add-in que a renderize por si.
SVG ou PNG, o que é melhor para diagramas Mermaid em slides?
SVG, em quase todos os casos. Escala sem perda de qualidade num projetor e pode ser convertido em formas editáveis do PowerPoint. Use PNG apenas quando a versão do Office de quem o recebe for demasiado antiga para SVG, ou quando quiser especificamente o diagrama congelado.
Posso animar um diagrama Mermaid no PowerPoint?
Não a partir do código-fonte Mermaid. O Mermaid não produz animação. Tem duas opções: converter um SVG inserido em formas e animar cada uma delas no Painel de Animação, ou gerar um GIF animado ou um vídeo a partir da mesma definição e incorporá-lo como media. A segunda mantém a definição em texto intacta; a primeira não.
Experimente com o seu próprio diagrama
Se o diagrama que está prestes a colar num slide é um que vai ter de explicar, converta-o em vez de lhe tirar uma captura de ecrã.
Cole o seu código Mermaid no conversor.
O FluxDiagram gera diagramas animados que incorpora na apresentação que já tem, em PowerPoint, Google Slides ou Keynote.