De Mermaid a PowerPoint: cuatro rutas y lo que cuesta cada una
Respuesta corta: dentro de PowerPoint no hay ningún renderizador nativo de Mermaid, así que toda ruta de Mermaid a PowerPoint pasa por un paso de conversión. Tienes cuatro opciones realistas: exportar un PNG, exportar un SVG, instalar un complemento de Mermaid o rehacer el diagrama con formas nativas de PowerPoint. Cada una sacrifica de forma distinta la editabilidad, la resolución y el tiempo de preparación. Existe una quinta ruta, generar una versión animada a partir del mismo código Mermaid, si el motivo por el que pones el diagrama en una diapositiva es que tienes que guiar a una audiencia a través de él.
Esta guía trata de elegir la ruta adecuada en lugar de recurrir por defecto a la captura de pantalla.
¿Por qué PowerPoint no puede renderizar Mermaid directamente?
Mermaid es una biblioteca de JavaScript. Analiza una definición de texto en un navegador y dibuja SVG. PowerPoint no es un navegador y no incluye ningún analizador de Mermaid, así que pegar `graph TD` en un cuadro de texto produce exactamente lo que escribiste: las palabras `graph TD`.
Ese único hecho condiciona todas las decisiones que siguen. Algo fuera de PowerPoint tiene que convertir tu texto en píxeles o vectores primero, y ese algo determina qué podrás cambiar después.
El efecto colateral es donde está el coste real. Tu código Mermaid está bajo control de versiones junto al código que describe. En el momento en que se convierte en una imagen dentro de una presentación, la presentación deja de seguir el repositorio. Nada te avisa de que la arquitectura ha cambiado. El diagrama de la diapositiva 14 simplemente está mal en la siguiente revisión, y nadie se da cuenta hasta que alguien en la sala conoce el sistema lo bastante bien como para objetar.
¿Cuáles son las cuatro formas de llevar un diagrama Mermaid a PowerPoint?
Ruta 1: exportar un PNG e insertarlo como imagen
La opción por defecto. Renderiza en mermaid.live o con la CLI de Mermaid, descarga el PNG y luego Insertar, Imágenes, Este dispositivo.
PNG es un formato de trama, así que su calidad queda fijada en el momento de exportar. Un diagrama exportado al ancho del navegador se ve bien en tu portátil y borroso en un proyector. Si eliges esta ruta, exporta a dos o tres veces el tamaño que necesitas en la diapositiva y reduce la escala, nunca la amplíes.
Ruta 2: exportar un SVG e insertarlo como imagen
El mismo flujo de trabajo, mejor resultado. PowerPoint admite la inserción de SVG desde hace años, y SVG es un formato vectorial, así que se mantiene nítido a cualquier tamaño de proyección.
El SVG también desbloquea un truco que la ruta del PNG no permite: selecciona el SVG insertado, haz clic derecho, Convertir en forma. PowerPoint descompone el vector en formas nativas que puedes recolorear, reestilizar o animar por separado. Pierdes el vínculo con el código Mermaid de forma permanente, pero ganas un diagrama que encaja con la paleta de tu plantilla.
Vigila las fuentes. Si tu renderizado de Mermaid usó una fuente que la máquina desde la que presentas no tiene, el SVG sustituye por otra y las cajas que se ajustaban a sus etiquetas dejan de ajustarse.
Ruta 3: un complemento de PowerPoint
Existen complementos de la comunidad que integran un editor de Mermaid dentro de PowerPoint, guardan el código fuente con el archivo y permiten volver a renderizar tras una edición. El complemento de Accion Labs es el más conocido.
Es la única ruta que mantiene la definición de texto y la diapositiva en el mismo sitio, lo cual importa si el diagrama se va a revisar repetidamente dentro de la presentación. El coste es organizativo más que técnico: los complementos requieren permiso de instalación, y en la mayoría de las empresas eso es un ticket, no un clic. Además, ata la presentación a que quien la abra tenga el mismo complemento.
Ruta 4: rehacerlo con formas nativas
Lee el diagrama Mermaid y vuelve a dibujarlo con formas y conectores de PowerPoint.
Todo el mundo descarta esta opción y todo el mundo acaba haciéndola, porque es la única que produce un diagrama plenamente sometido al sistema de diseño de la presentación, plenamente animable con el Panel de animación y editable por un compañero que nunca ha oído hablar de Mermaid. También es la más lenta, y la copia diverge de inmediato de la fuente de verdad.
Resérvala para el diagrama o los dos diagramas que sostienen el argumento de la presentación.
¿Qué ruta debería elegir?
| Ruta | Preparación | Se mantiene nítida en un proyector | Editable en PowerPoint | Conserva el código Mermaid | Ideal para | |---|---|---|---|---|---| | Exportar PNG | Ninguna | No, resolución fija | No | No | Una presentación interna rápida | | Exportar SVG | Ninguna | Sí | Tras Convertir en forma | No | La mayoría de los casos, la opción sensata por defecto | | Complemento | Requiere instalación | Sí | Con el editor del complemento | Sí | Presentaciones revisadas durante meses | | Rehacer con formas | Manual, lento | Sí | Totalmente | No | Las dos diapositivas que importan | | Generar una versión animada | Ninguna | Sí | Incrustada como archivo multimedia | Sí, conservas la definición | Diagramas que tienes que narrar |
Si quieres una sola regla: exporta SVG. Es gratis, no necesita permisos, y Convertir en forma cubre el caso en el que más adelante necesites cambiar el estilo.
¿Y si el problema no es el formato, sino el recorrido?
Hay una categoría de diagrama Mermaid para la que ninguna de las cuatro rutas sirve, y vale la pena nombrarla porque probablemente sea el motivo de tu búsqueda.
Tienes un diagrama de secuencia con doce mensajes, o un grafo de arquitectura con veinte nodos. Es correcto. Se renderiza estupendamente. Y cuando aterriza en la diapositiva, todo aparece de golpe, la audiencia lee la esquina inferior derecha mientras tú explicas la superior izquierda, y te pasas el primer minuto de tu turno diciendo «por ahora ignorad esta parte».
Eso no es un problema de resolución. Un SVG de más calidad lo empeora, porque ahora todo es legible a la vez.
La solución es la secuencia: revelar el diagrama en el orden en que lo explicas. La ruta 4 te lleva ahí a mano, con una animación de entrada por forma, que es justo por lo que la gente la hace pese al coste. La alternativa es generar una versión animada directamente desde la definición de Mermaid e incrustar el GIF o el MP4 resultante en la diapositiva. Ese flujo de trabajo lo detallamos en convertir diagramas Mermaid en visuales animados para presentaciones, y el argumento más amplio a favor de construir en lugar de revelar, en cómo presentar la arquitectura de un sistema.
El conversor de Mermaid de FluxDiagram lee una definición de Mermaid o PlantUML —diagrama de flujo, de secuencia, de clases, Gantt o de sectores—, extrae los nodos y las aristas, y te entrega una descripción a partir de la cual puedes generar una versión animada. Expórtala como GIF para un bucle o como MP4 para una reproducción controlada, y luego insértala en la diapositiva igual que insertarías una imagen. El código Mermaid se queda donde vive, en el repositorio, que es justo la propiedad que destruyen tanto la ruta del PNG como la del SVG.
Un flujo de trabajo que sobrevive a la siguiente revisión
Elijas la ruta que elijas, dos hábitos evitan que los diagramas se queden obsoletos dentro de las presentaciones.
Guarda la definición en las notas del orador. Pega el código Mermaid en el campo de notas de la diapositiva donde se renderiza. No cuesta nada, viaja con el archivo, y la siguiente persona que edite esa diapositiva podrá regenerarlo en lugar de adivinar.
Vuelve a exportar en vez de parchear. Cuando el sistema cambie, cambia el Mermaid y vuelve a exportar. Editar la imagen, o mover un poco una caja rehecha, es la forma de acabar con una presentación que describe una arquitectura que ya no existe.
Preguntas frecuentes
¿Puedo pegar código Mermaid directamente en PowerPoint?
No. Office no incluye ningún renderizador de Mermaid, así que la sintaxis se queda como texto literal. Necesitas un paso de exportación o un complemento que la renderice por ti.
¿Es mejor SVG o PNG para los diagramas Mermaid en diapositivas?
SVG, en casi todos los casos. Escala sin pérdida de calidad en un proyector y puede convertirse en formas editables de PowerPoint. Usa PNG solo cuando la versión de Office del destinatario sea demasiado antigua para SVG, o cuando quieras expresamente congelar el diagrama.
¿Puedo hacer que un diagrama Mermaid se anime en PowerPoint?
No desde el código Mermaid. Mermaid no tiene salida animada. Tus dos opciones son convertir un SVG insertado en formas y animar cada una en el Panel de animación, o generar un GIF animado o un vídeo a partir de la misma definición e incrustarlo como archivo multimedia. La segunda mantiene intacta la definición de texto; la primera no.
Pruébalo con tu propio diagrama
Si el diagrama que estás a punto de pegar en una diapositiva es uno que vas a tener que explicar hablando, conviértelo en lugar de capturarlo.
Pega tu código Mermaid en el conversor.
FluxDiagram genera diagramas animados que incrustas en la presentación que ya tienes, en PowerPoint, Google Slides o Keynote.