Ce que j'ai appris en créant des diapositives de diagrammes pour un pipeline vidéo CI

J'ai récemment ajouté des diagrammes et des graphiques à mon pipeline automatisé de vidéos YouTube.

La principale leçon est simple : pré-rendez tout d'abord dans un fichier PNG.

N'essayez pas de générer des visuels à l'intérieur de votre moteur vidéo ou via ffmpeg. Utilisez plutôt un transfert de fichiers PNG partagé. Cela rend chaque partie de votre pipeline testable et facile à remplacer.

Voici comment je l'ai construit et ce que j'en ai appris.

L'architecture

Mon pipeline utilise un système à deux hôtes. Un hôte gère les visuels et l'audio. L'autre hôte utilise ffmpeg pour tout combiner en une vidéo.

Comme ffmpeg ne peut pas exécuter de JavaScript ni appeler un navigateur, j'ai dû combler l'écart entre les différents outils :

• Mermaid (pour les organigrammes) s'exécute via Puppeteer et Chromium. • Matplotlib (pour les graphiques) s'exécute via Python. • Pillow (pour les diapositives) dessine directement sur les images.

Comme ces outils ne peuvent pas communiquer directement entre eux, j'utilise un modèle unique : le rendu dans un PNG, puis le collage de ce PNG sur un canevas Pillow. Un seul chemin de code vaut mieux que deux.

Leçons techniques clés

  1. Configuration de Chromium Lors de l'exécution dans GitHub Actions, Chromium échouera si vous n'utilisez pas des flags spécifiques. Vous devez inclure --no-sandbox et --disable-setuid-sandbox. Sans cela, le conteneur bloquera le processus.

  2. Thèmes Mermaid Si vous souhaitez des couleurs personnalisées, n'utilisez pas les thèmes intégrés « dark » ou « forest ». Ces thèmes écrasent vos paramètres. Utilisez le thème « base ». C'est la seule façon de garantir que votre palette personnalisée fonctionne de manière fiable.

  3. Arrière-plans Matplotlib Faire correspondre les graphiques à l'arrière-plan de votre diapositive est délicat. Vous devez faire trois choses :

  • Appeler matplotlib.use("Agg") avant d'importer pyplot.
  • Définir la facecolor pour la figure et les axes.
  • Utiliser bbox_inches="tight" lors de l'enregistrement du fichier pour supprimer les bordures blanches.
  1. Fiabilité et sécurité (failsafes) Un diagramme manquant ne doit pas interrompre la construction de votre vidéo. J'ai construit une structure qui intercepte les erreurs. Si un rendu échoue, le pipeline affiche simplement un espace réservé « visuel indisponible ». La vidéo est tout de même terminée. Cela vous permet de réviser le contenu même si une partie échoue.

Le compromis

Le pré-rendu ajoute du temps. Chaque diagramme Mermaid prend environ 2 à 4 secondes à être rendu. Pour une vidéo de 20 segments, cela ajoute environ 20 secondes au temps de construction total. Pour mes besoins, c'est un compromis acceptable pour obtenir un système stable.

Source : https://dev.to/morinaga/what-i-learned-adding-diagram-and-chart-slides-to-a-ci-rendered-youtube-pipeline-3bnl