Mermaid a GIF: cómo convertir un diagrama en algo que se mueve
Respuesta corta: Mermaid no exporta a GIF y no anima. Ir de Mermaid a GIF significa renderizar el diagrama fuera de Mermaid y montar los fotogramas por tu cuenta, ejecutar alguno de los scripts de la comunidad que automatizan ese proceso, o generar una versión animada a partir de la misma definición con una herramienta pensada para ello. La elección depende por completo de si quieres una imagen en movimiento o un diagrama que se construye en el orden en que lo explicas.
No son la misma petición, y la mayoría de las herramientas las confunde.
¿Por qué Mermaid no exporta un GIF?
Mermaid renderiza a SVG en un navegador. Ese es todo su cometido. La salida renderizada no tiene línea de tiempo, ni fotogramas clave, ni noción de que un paso ocurra después de otro: las flechas de un diagrama de secuencia se dibujan en el orden del código, todas a la vez, en un único pintado.
La petición de animación es antigua y está bien documentada. El repositorio de Mermaid arrastra desde hace años incidencias abiertas que piden diagramas animados y exportación a PowerPoint y Google Slides, y las soluciones de la comunidad han cubierto el hueco: scripts que vuelven a renderizar un diagrama repetidamente con más nodos cada vez, apaños de CSS artesanales contra el SVG renderizado y pequeñas herramientas de línea de comandos que unen los PNG resultantes en un GIF.
Todas funcionan. Todas comparten la misma forma: renderizar N veces, recopilar N imágenes, codificar. Entender esa forma es lo que te permite juzgar las opciones.
¿Cuáles son las formas de pasar de Mermaid a un GIF animado?
El enfoque de unir fotogramas
Coge tu definición de Mermaid. Produce varias versiones de ella, cada una revelando un nodo o un mensaje más que la anterior. Renderiza cada una a PNG con la CLI de Mermaid. Pasa los PNG a un codificador como ImageMagick o ffmpeg con un retardo entre fotogramas.
Esto es lo que automatizan los scripts de la comunidad, y es sin duda la ruta más controlable: tú decides exactamente qué contiene cada fotograma.
Hay dos cosas que muerden. Primera: Mermaid recalcula la disposición del grafo en cada renderizado, así que un diagrama que gana un nodo entre fotogramas puede desplazar toda su disposición, y la "animación" se convierte en un temblor. Lo evitas renderizando el diagrama completo cada vez y ocultando los elementos aún no revelados en lugar de omitirlos. Segunda: GIF está limitado a 256 colores, y el texto de un diagrama a tamaños pequeños se degrada mucho con el tramado. Exporta a mayor tamaño del que necesitas.
Animación CSS sobre el SVG renderizado
Mermaid emite SVG con nombres de clase razonablemente predecibles, así que puedes aplicar animaciones CSS a nodos y aristas después de renderizar. Es la ruta que hay detrás de la mayoría de los artículos sobre "apaños horribles", y produce resultados realmente buenos en un navegador.
Lo que no produce es un archivo. Un SVG animado con CSS se reproduce donde lo reproduce un navegador, lo que deja fuera PowerPoint, Keynote y la mayoría de los sitios donde la gente necesita el diagrama de verdad. Vuelves a grabar la pantalla, que es la ruta de unir fotogramas con pasos de más.
Una herramienta que genera la animación
La tercera ruta se salta los fotogramas por completo: lee la definición de Mermaid, entiende la estructura y produce una animación a partir de ella. El conversor de Mermaid de FluxDiagram toma una definición de Mermaid o PlantUML —diagrama de flujo, secuencia, clases, Gantt o tarta—, extrae los nodos y las aristas, y genera una versión animada que construye el diagrama en la dirección de flujo que tu código ya declara. Expórtalo como GIF para un bucle, o como MP4 y WebM cuando quieras una reproducción controlada.
El compromiso es honesto: tienes menos control fotograma a fotograma del que te da un script, y tienes un resultado en segundos en lugar de en una tarde.
¿Qué enfoque encaja con cada trabajo?
| Enfoque | Coste de preparación | Salida | Estabilidad de la disposición | Se integra en diapositivas | Ideal para | |---|---|---|---|---|---| | Unir fotogramas con la CLI + ffmpeg | Alto, con scripts | GIF o MP4 | Mala salvo que ocultes en vez de omitir | Sí | Procesos repetibles en CI | | CSS sobre el SVG renderizado | Medio | Solo navegador | Buena | No | Sitios de documentación y páginas web | | Grabar la pantalla en un editor en vivo | Bajo | GIF o MP4 | Buena | Sí | Algo puntual, con el cursor a la vista | | Generar a partir de la definición | Bajo | GIF, MP4, WebM | Buena | Sí | Diapositivas que tienes que narrar |
GIF, MP4 o WebM: ¿qué deberías exportar en realidad?
Pides un GIF y normalmente obtendrás uno, pero rara vez es el contenedor adecuado.
GIF se repite en bucle automáticamente, se reproduce en todas partes y no necesita controles. Está limitado a 256 colores y el tamaño del archivo sube rápido, así que la construcción de un diagrama de 20 segundos es un archivo pesado que se ve peor que uno de 3 segundos. Va bien para una insignia en un README o para un bucle que corre detrás de ti mientras hablas.
MP4 te da color completo, archivos pequeños y control de la reproducción. En una diapositiva, el control importa más de lo que la gente espera: quieres que la construcción empiece cuando pulsas la tecla, no cuando aparece la diapositiva, y quieres que se quede en el último fotograma en vez de volver a empezar detrás de tu explicación.
WebM es el equivalente para la web, útil para un sitio de documentación o una página de destino donde quieras transparencia o menos peso.
La regla práctica: GIF para un bucle, MP4 para una presentación, WebM para la web.
¿De verdad ayuda un GIF animado?
No siempre, y conviene decirlo sin rodeos, porque "animar el diagrama" suele ser la solución equivocada.
Un GIF en bucle de un diagrama de flujo dibujándose una y otra vez, detrás de un ponente, es decoración. Atrae la mirada una y otra vez y no le dice nada nuevo al público en la segunda vuelta.
Lo que ayuda es la secuencia ligada a la narración: el diagrama aparece en el orden en que lo explicas, de modo que en cada momento lo único visible es aquello de lo que estás hablando. Por eso existen los scripts que unen fotogramas, y es la verdadera razón para querer animación a partir de un diagrama de Mermaid. Tratamos el caso de fondo con detalle en convertir diagramas de Mermaid en visuales animados para presentaciones, y las decisiones sobre el formato en Mermaid a PowerPoint.
Si el diagrama es lo bastante pequeño como para leerlo de un vistazo, sáltate la animación. Exporta un SVG y sigue adelante.
Preguntas frecuentes
¿Puede la CLI de Mermaid exportar un GIF directamente?
No. `mmdc` genera SVG, PNG y PDF. Cualquier cosa animada exige renderizar varias imágenes fijas y codificarlas tú mismo, o una herramienta aparte.
¿Cómo evito que el diagrama salte entre fotogramas?
Renderiza el diagrama completo en cada fotograma y oculta los elementos que aún no has revelado, en vez de borrarlos de la definición. Mermaid recalcula la disposición a partir de los nodos que existan, así que quitar un nodo mueve todo lo demás.
¿Se reproducirá un GIF animado dentro de PowerPoint y Google Slides?
Sí. Ambos tratan un GIF como una imagen y lo repiten en bucle automáticamente en modo presentación, aunque no siempre en la vista de edición. Para una construcción que quieras activar y mantener, inserta un MP4 como medio: te da un control de reproducción y evita el bucle.
Pruébalo con tu propia definición
Si tienes un diagrama de Mermaid que necesita moverse, empieza por el código fuente en lugar de por la captura de pantalla.
Pega tu código Mermaid en el conversor.
FluxDiagram genera diagramas animados que integras en la presentación que ya tienes, en PowerPoint, Google Slides o Keynote.