Lo que aprendí al crear diapositivas de diagramas para un pipeline de video de CI
Recientemente añadí diagramas y gráficos a mi pipeline automatizado de videos para YouTube.
La conclusión principal es sencilla: primero, pre-renderiza todo a un archivo PNG.
No intentes generar elementos visuales dentro de tu motor de video o mediante ffmpeg. En su lugar, utiliza una transferencia de archivos PNG compartidos. Esto hace que cada parte de tu pipeline sea testeable y fácil de reemplazar.
Aquí te cuento cómo lo construí y qué aprendí.
La arquitectura
Mi pipeline utiliza un sistema de dos hosts. Un host se encarga de lo visual y el audio. El otro host utiliza ffmpeg para combinar todo en un video.
Dado que ffmpeg no puede ejecutar JavaScript ni llamar a un navegador, tuve que resolver la brecha entre las diferentes herramientas:
• Mermaid (para diagramas de flujo) se ejecuta a través de Puppeteer y Chromium. • Matplotlib (para gráficos) se ejecuta mediante Python. • Pillow (para las diapositivas) dibuja directamente sobre las imágenes.
Como estas herramientas no pueden comunicarse entre sí directamente, utilizo un único patrón: renderizar a un PNG y luego pegar ese PNG en un lienzo de Pillow. Un único camino de código es mejor que dos.
Lecciones técnicas clave
Configuración de Chromium Al ejecutarse en GitHub Actions, Chromium fallará si no utilizas flags específicos. Debes incluir --no-sandbox y --disable-setuid-sandbox. Sin ellos, el contenedor bloqueará el proceso.
Temas de Mermaid Si quieres colores personalizados, no utilices los temas integrados "dark" o "forest". Esos temas sobrescriben tu configuración. Utiliza el tema "base". Esta es la única forma de asegurar que tu paleta personalizada funcione de manera fiable.
Fondos de Matplotlib Lograr que los gráficos coincidan con el fondo de tu diapositiva es complicado. Debes hacer tres cosas:
- Llamar a matplotlib.use("Agg") antes de importar pyplot.
- Establecer el facecolor tanto para la figura como para los ejes.
- Usar bbox_inches="tight" al guardar el archivo para eliminar los bordes blancos.
- Fiabilidad y mecanismos de seguridad La ausencia de un diagrama no debería romper toda la construcción de tu video. Construí una estructura de soporte que captura errores. Si un renderizado falla, el pipeline simplemente muestra un marcador de posición de "visual no disponible". El video se completa de todos modos. Esto te permite revisar el contenido incluso si una parte falla.
La compensación
El pre-renderizado añade tiempo. Cada diagrama de Mermaid tarda entre 2 y 4 segundos en renderizarse. Para un video de 20 segmentos, esto añade unos 20 segundos al tiempo total de construcción. Para mis necesidades, es un intercambio justo a cambio de un sistema estable.