Was ich beim Erstellen von Diagramm-Folien für eine CI-Video-Pipeline gelernt habe
Ich habe vor Kurzem Diagramme und Grafiken in meine automatisierte YouTube-Video-Pipeline integriert.
Die wichtigste Erkenntnis ist simpel: Rendern Sie zuerst alles vorab als PNG-Datei.
Versuchen Sie nicht, Visualisierungen innerhalb Ihrer Video-Engine oder über ffmpeg zu generieren. Nutzen Sie stattdessen eine gemeinsame PNG-Übergabe. Das macht jeden Teil Ihrer Pipeline testbar und leicht austauschbar.
Hier ist, wie ich es aufgebaut habe und was ich dabei gelernt habe.
Die Architektur
Meine Pipeline nutzt ein Zwei-Host-System. Ein Host kümmert sich um die Visualisierungen und den Ton. Der andere Host verwendet ffmpeg, um alles zu einem Video zusammenzufügen.
Da ffmpeg kein JavaScript ausführen oder einen Browser aufrufen kann, musste ich die Lücke zwischen den verschiedenen Tools schließen:
• Mermaid (für Flussdiagramme) läuft über Puppeteer und Chromium. • Matplotlib (für Diagramme) läuft über Python. • Pillow (für die Folien) zeichnet direkt auf Bilder.
Da diese Tools nicht direkt miteinander kommunizieren können, verwende ich ein einheitliches Muster: Rendern in ein PNG und dann dieses PNG auf eine Pillow-Leinwand kleben. Ein Code-Pfad ist besser als zwei.
Wichtige technische Erkenntnisse
Konfiguration von Chromium Wenn Chromium in GitHub Actions ausgeführt wird, schlägt der Vorgang fehl, wenn Sie keine spezifischen Flags verwenden. Sie müssen --no-sandbox und --disable-setuid-sandbox einbinden. Ohne diese wird der Container den Prozess blockieren.
Mermaid-Theming Wenn Sie benutzerdefinierte Farben verwenden möchten, nutzen Sie nicht die integrierten Dark- oder Forest-Themes. Diese Themes überschreiben Ihre Einstellungen. Verwenden Sie das „base“-Theme. Dies ist der einzige Weg, um sicherzustellen, dass Ihre benutzerdefinierte Farbpalette zuverlässig funktioniert.
Matplotlib-Hintergründe Es ist knifflig, Diagramme so anzupassen, dass sie zum Hintergrund Ihrer Folie passen. Sie müssen drei Dinge tun:
- Rufen Sie matplotlib.use("Agg") auf, bevor Sie pyplot importieren.
- Legen Sie die facecolor sowohl für die figure als auch für die axes fest.
- Verwenden Sie bbox_inches="tight" beim Speichern der Datei, um weiße Ränder zu entfernen.
- Zuverlässigkeit und Ausfallsicherheit Ein fehlendes Diagramm sollte nicht den gesamten Video-Build unterbrechen. Ich habe ein Gerüst gebaut, das Fehler abfängt. Wenn ein Rendering fehlschlägt, zeigt die Pipeline einfach einen „visual unavailable“-Platzhalter an. Das Video wird trotzdem fertiggestellt. So können Sie den Inhalt überprüfen, selbst wenn ein Teil fehlschlägt.
Der Kompromiss
Das Vorab-Rendern kostet Zeit. Jedes Mermaid-Diagramm benötigt etwa 2 bis 4 Sekunden für das Rendering. Bei einem Video mit 20 Segmenten erhöht dies die gesamte Build-Zeit um etwa 20 Sekunden. Für meine Anforderungen ist dies ein fairer Kompromiss für ein stabiles System.