Wie erstellt man vier Infografiken aus jedem Youtube Video?

Nach dem letzten Newsletter kam die Frage, wie habe ich das Bild erstellt? Deshalb hier mein Lieblingsworkflow. Wer mehr wissen möchte, das System zeige ich am Freitag auf dem Barcamp

Warum nicht Notebook LM?

Mit Notebook LM kann ich nicht so einfach Templates steuern und auch mal eine Liste von 10 Video mitgeben und dann 40 Bilder - automatisch erstellt - mir bauen lassen.

Hier ein Workflow (ich habe mehrere davon) zu dem Thema Youtube

Das Problem: Wissen bleibt in Videos gefangen

Kennen Sie das? Sie schauen ein fantastisches YouTube-Video über ein komplexes Thema – sei es Softwarearchitektur, Change Management oder ein neuer Workflow – und denken sich: "Das muss ich mir merken!"

Doch was passiert dann?

• Sie machen sich vielleicht ein paar Notizen

• Sie speichern das Video in einer Playlist "Später ansehen"

• Sie vergessen 80% des Inhalts innerhalb einer Woche

Das eigentliche Problem: Video-Inhalte sind linear und flüchtig. Unser Gehirn verarbeitet visuelle Strukturen jedoch viel besser als gesprochene Worte. Was wir brauchen, sind Diagramme – visuelle Zusammenfassungen, die das Wesentliche auf einen Blick zeigen.

Aber wer hat schon Zeit, nach jedem Video ein professionelles Diagramm zu erstellen?

Die Lösung: Ein automatisiertes System, das YouTube-Videos in professionelle technische Diagramme verwandelt. In diesem Artikel zeige ich Ihnen Schritt für Schritt, wie das funktioniert.

Was ist das YouTube-to-Diagram System?

Die Grundidee

Das YouTube-to-Diagram System ist ein automatisierter Workflow, der:

1. Ein YouTube-Video nimmt (nur die URL oder Video-ID)

2. Das Transkript herunterlädt (automatisch in Deutsch oder Englisch)

3. Den Inhalt mit KI analysiert (Kernkonzepte, Beziehungen, Prozesse)

4. 4 professionelle Diagramme generiert (im Whiteboard-Stil)

Das Ergebnis? In wenigen Minuten haben Sie vier druckfertige Diagramme, die Sie in Präsentationen, Dokumentationen oder Social Media verwenden können.

Warum 4 Diagramme?

Jedes komplexe Thema hat verschiedene Perspektiven. Das System erstellt daher vier unterschiedliche Sichten:

So bekommen Sie nicht nur ein Diagramm, sondern eine vollständige visuelle Dokumentation des Video-Inhalts.

Für wen ist dieses System gedacht?

Ideale Anwender

• Trainer und Coaches: Visualisieren Sie Lernmaterialien aus Videos

• Consultants: Erstellen Sie schnell Präsentationsunterlagen

• Content Creator: Verwandeln Sie Videos in Blog-Grafiken

• Studenten: Visualisieren Sie Vorlesungen und Tutorials

• Wissensarbeiter: Dokumentieren Sie Erkenntnisse aus Webinaren

Voraussetzungen

Um das System zu nutzen, benötigen Sie:

• Grundlegende Terminal-Kenntnisse (Befehle eingeben)

• Claude Code oder ein ähnliches KI-Tool

• Python 3 (für das Transkript-Tool)

• Bun (JavaScript-Runtime für die Bildgenerierung)

Keine Sorge – im nächsten Abschnitt erkläre ich alles Schritt für Schritt.

Das Grundsystem ist von Daniel Miessler in diesem Repo

Die Komponenten verstehen

Bevor wir loslegen, schauen wir uns an, aus welchen Teilen das System besteht. Das hilft Ihnen zu verstehen, was im Hintergrund passiert.

1. Der Hauptbefehl: youtube-to-diagram.md

Dies ist die "Kommandozentrale". Eine Markdown-Datei, die den gesamten Workflow definiert:

.claude/commands/youtube-to-diagram.md

Was sie macht:

• Koordiniert alle anderen Tools

• Definiert die 6 Schritte des Workflows

• Enthält die Qualitätsstandards für Diagramme

2. Das Transkript-Tool: transcript-downloader.py

Ein Python-Skript, das YouTube-Untertitel herunterlädt:

.claude/skills/video/tools/transcript-downloader.py

Was es macht:

• Verbindet sich mit YouTube

• Lädt das Transkript in der gewünschten Sprache

• Speichert es als Textdatei

Wichtig für Anfänger: Nicht jedes YouTube-Video hat Untertitel. Das Tool versucht automatisch verschiedene Sprachen (erst Deutsch, dann Englisch).

3. Das Bild-Tool: generate-ulart-image.ts

Ein TypeScript-Skript für die Bildgenerierung:

.claude/skills/art/tools/generate-ulart-image.ts

Was es macht:

• Nimmt den konstruierten Prompt entgegen

• Verbindet sich mit der KI-Bildgenerierung (Replicate/fal.ai) mit Nano Banana Pro

• Erstellt hochauflösende PNG-Dateien (2k)

4. Der Workflow: TechnicalDiagrams.md

Die "Anleitung" für die Diagramm-Erstellung:

.claude/skills/art/workflows/TechnicalDiagrams.md

Was es definiert:

• Den visuellen Stil (Excalidraw/Whiteboard)

• Das Farbschema (UL-Farben)

• Die Typografie-Hierarchie

• Die Validierungs-Checkliste

5. Das Template: technical-diagram-templates.md

Fertige Prompt-Vorlagen für verschiedene Diagramm-Typen:

.claude/skills/art/templates/technical-diagram-templates.md

Was es enthält:

• Das Basis-Template mit 3-Spalten-Layout

• Beispiel-Prompts für verschiedene Anwendungsfälle

• Best Practices und Formatierungsregeln

Hier kann ich auch verschiedene Templates mitgeben

Der 6-Schritte Workflow im Detail

Jetzt wird es praktisch! Hier ist der komplette Workflow, den das System durchläuft:

Schritt 1: Projekt-Verzeichnis erstellen

Was passiert: Das System erstellt einen Ordner für alle Output-Dateien.

Das Namensformat:

Projects/YouTube/HHMM_DD-MM-YYYY_thema/

Beispiel:

Projects/YouTube/1430_16-12-2025_ki-automatisierung/

Warum das wichtig ist:

• Eindeutige Namen durch Zeitstempel

• Alle Dateien an einem Ort

• Leicht wiederzufinden

Schritt 2: Transkript herunterladen

Der Befehl:

python3 transcript-downloader.py VIDEO_ID --lang de --output transcript.txt

Was passiert:

1. Das Tool verbindet sich mit YouTube

2. Sucht nach deutschen Untertiteln

3. Falls nicht vorhanden: Fallback auf Englisch

4. Speichert als transcript.txt

Mögliche Probleme:

• Kein Transkript verfügbar → Manueller Text-Input nötig

• Nur Auto-generierte Untertitel → Qualität kann variieren

Schritt 3: Transkript analysieren

Was passiert: Die KI liest das Transkript und extrahiert:

Für jedes der 4 Diagramme:

DIAGRAMM X - [FOKUS]:

TITEL: [Aussagekräftiger Titel]

KOMPONENTEN:
- Komponente 1: Rolle und Funktion
- Komponente 2: Rolle und Funktion
- ...

VERBINDUNGEN:
- A → B: Was fließt/passiert
- B → C: Was fließt/passiert
- ...

EMPHASIS (Purple):
- Die 1-3 wichtigsten Elemente

KEY INSIGHTS:
- *Warum das wichtig ist*
- *Wo Probleme entstehen*
- *Best Practice Hinweis*

Das Ergebnis: Strukturierte Informationen für 4 verschiedene Diagramm-Perspektiven.

Schritt 4: Prompts konstruieren und Bilder generieren

Das 3-Spalten-Layout:

Jedes Diagramm folgt derselben Grundstruktur:

┌─────────────┬─────────────┬─────────────┐
│   LINKS     │   MITTE     │   RECHTS    │
│   Problem   │   Lösung    │  Ergebnis   │
│  Kontext    │   Prozess   │   Outcome   │
└─────────────┴─────────────┴─────────────┘

Die Prompt-Struktur:

COMPLEX TECHNICAL WHITEBOARD DIAGRAM

=== HEADER ===
Titel in Großbuchstaben
Untertitel mit Kernaussage

=== VISUAL STYLE ===
- Excalidraw/Whiteboard Ästhetik
- Hand-gezeichnete, imperfekte Linien
- Schwarz 80%, Lila 10%, Türkis 5%
- Weißer Hintergrund
- Mindestens 50+ Text-Labels

=== LEFT SECTION: [PROBLEM] ===
[Details zum Ausgangszustand]

=== CENTER SECTION: [LÖSUNG] ===
[Details zum Prozess/Methode]

=== RIGHT SECTION: [ERGEBNIS] ===
[Details zum Outcome]

=== MARGIN NOTES ===
- Anti-Pattern: Was man vermeiden sollte
- Pro-Pattern: Was man tun sollte

Der Generierungs-Befehl:

bun run generate-ulart-image.ts \
  --model nano-banana-pro \
  --prompt '[KONSTRUIERTER PROMPT]' \
  --size 2K \
  --aspect-ratio 16:9 \
  --output diagram-1-overview.png

Schritt 5: Validieren

Die Qualitäts-Checkliste:

Nach jeder Generierung prüft das System:

Basis-Anforderungen:

• [ ] Excalidraw-Qualität (wackelige Linien, nicht perfekt)

• [ ] Weißer Hintergrund (#FFFFFF)

• [ ] Text lesbar

Detail-Dichte (KRITISCH!):

• [ ] Mindestens 50+ Text-Labels sichtbar

• [ ] 3-Spalten-Layout eingehalten

• [ ] Nested Components in Sub-Boxen

• [ ] Kein leerer Raum

Annotations:

• [ ] Mindestens 5 kursive Annotations

• [ ] Margin Notes mit Anti-Pattern + Pro-Pattern

• [ ] Timeline/Beispiel am unteren Rand

Bei Fehlern: Das System verstärkt den Prompt und generiert neu.

Schritt 6: README erstellen und Ausgabe

Was erstellt wird:

Projects/YouTube/HHMM_DD-MM-YYYY_thema/
├── README.md                    # Projekt-Übersicht
├── transcript.txt               # Vollständiges Transkript
├── diagram-1-overview.png       # Systemübersicht
├── diagram-2-process.png        # Prozess-Flow
├── diagram-3-components.png     # Komponenten-Beziehungen
└── diagram-4-detail.png         # Detail-Fokus

Die README enthält:

• Link zum Original-Video

• Kurzbeschreibung jedes Diagramms

• Zusammenfassung des Video-Inhalts

Der visuelle Stil: Warum Excalidraw?

Das Problem mit "perfekten" Diagrammen

Kennen Sie diese Diagramme aus PowerPoint oder Visio? Perfekt gerade Linien, saubere Boxen, geometrisch exakt?

Das Problem: Sie wirken steril und unpersönlich. Unser Gehirn stuft sie als "fertiges Dokument" ein – nicht als "Idee in Entwicklung".

Die Excalidraw-Ästhetik

Excalidraw ist ein beliebtes Tool für Whiteboard-Diagramme. Der Stil ist charakteristisch:

• Wackelige Linien: Nicht perfekt gerade, wie von Hand gezeichnet

• Imperfekte Boxen: Ecken leicht ungleich, menschlich

• Variable Strichstärke: Dünnere Linien für Details

• Handschrift-Look: Text wie auf einem echten Whiteboard

Warum das besser funktioniert:

• Wirkt authentisch und einladend

• Signalisiert: "Das ist eine Idee, die wir gemeinsam entwickeln"

• Höhere Engagement-Rate bei Präsentationen

• Besser merkbar

Das Farbschema: UL-Farben

Das System verwendet ein minimalistisches Farbschema:

Das Prinzip: Weniger ist mehr. Farbe wird nur für Betonung verwendet, nicht für Dekoration.

Die Typografie-Hierarchie

Ein oft übersehener, aber kritischer Aspekt: Die richtige Schriftgrößen-Hierarchie.

Das 3-Tier System

Tier 1: Diagramm-Titel (Advocate Block)

• Funktion: WAS zeigt das Diagramm?

• Stil: GROSSBUCHSTABEN, fett, massiv

• Größe: 10-15% der Diagramm-Höhe

• Beispiel: "MICROSERVICES ARCHITEKTUR"

Tier 2: Komponenten-Labels (Concourse Sans)

• Funktion: WIE funktioniert das System?

• Stil: Normal, sauber, professionell

• Größe: Standard-Textgröße

• Beispiel: "API Gateway", "Datenbank", "Cache Layer"

Tier 3: Annotations (Advocate Italic)

• Funktion: WARUM ist das wichtig?

• Stil: Kursiv, kleiner, farbig (lila/türkis)

• Größe: 60-70% von Tier 2

• Beispiel: "hier entsteht der Bottleneck"

Warum diese Hierarchie wichtig ist

Ohne klare Hierarchie wird ein Diagramm schnell unlesbar:

Schlecht: Alles gleich groß → Keine Orientierung → Überforderung

Gut: Klare Hierarchie → Blick wird geführt → Schnelle Erfassung

Praktisches Beispiel: Ein Video analysieren

Lassen Sie uns das System an einem konkreten Beispiel durchspielen.

Das Szenario

Sie haben ein YouTube-Video über "Agile Transformation in Unternehmen" gefunden und möchten die Kernkonzepte visualisieren.

Schritt 1: Befehl eingeben

/youtube-to-diagram https://www.youtube.com/watch?v=BEISPIEL123

Schritt 2: System läuft automatisch

Das System:

1. Erstellt: Projects/YouTube/1430_16-12-2025_agile-transformation/

2. Lädt das Transkript herunter

3. Analysiert den Inhalt

Schritt 3: Extraktion der 4 Perspektiven

Diagramm 1 - Übersicht:

• Titel: AGILE TRANSFORMATION FRAMEWORK

• Links: Wasserfall-Probleme (lange Zyklen, spätes Feedback)

• Mitte: Agile Prinzipien (Sprints, Daily Standups, Retrospektiven)

• Rechts: Outcomes (schnellere Lieferung, höhere Qualität)

Diagramm 2 - Prozess:

• Titel: DER TRANSFORMATIONS-PROZESS

• 6 Phasen: Assessment → Pilot → Skalierung → Optimierung

Diagramm 3 - Komponenten:

• Titel: ROLLEN UND BEZIEHUNGEN

• Product Owner, Scrum Master, Dev Team, Stakeholder

Diagramm 4 - Detail:

• Titel: SPRINT PLANNING IM DETAIL

• Tiefenblick auf einen spezifischen Aspekt

Schritt 4: Generierung

4 Bilder werden erstellt, jedes mit:

• 50+ Text-Labels

• 3-Spalten-Layout

• Margin Notes

• Validierter Qualität

Das Ergebnis

Sie haben in 5 Minuten 4 professionelle Diagramme, die Sie:

• In Ihre nächste Präsentation einbauen können

• Als Lernmaterial verwenden können

• In einem Blogpost veröffentlichen können

• An Kollegen weitergeben können

Häufige Fragen (FAQ)

"Funktioniert das mit jedem YouTube-Video?"

Grundsätzlich ja, aber mit Einschränkungen:

• Das Video muss Untertitel haben (automatisch oder manuell)

• Der Inhalt sollte strukturiert sein (nicht nur Unterhaltung)

• Idealerweise Erklär-Videos, Tutorials, Vorträge

"Kann ich die Diagramme anpassen?"

Ja! Die generierten Prompts können modifiziert werden:

• Andere Farben verwenden

• Andere Sprache (Englisch statt Deutsch)

• Andere Fokus-Bereiche

• Andere Layout-Struktur

"Was kostet das?"

Die Tools selbst sind kostenlos. Kosten entstehen für:

• KI-Bildgenerierung (wenige Cent pro Bild)

• Optional: Claude Pro für bessere Analyse

"Wie lange dauert es?"

Ca. 5-10 Minuten für den kompletten Workflow:

• Transkript: 30 Sekunden

• Analyse: 1-2 Minuten

• 4 Bilder generieren: 3-4 Minuten

• Validierung: 1-2 Minuten

"Was, wenn die Qualität nicht stimmt?"

Das System hat eine eingebaute Validierung. Bei Problemen:

1. Automatische Neu-Generierung mit verstärktem Prompt

2. Manuelle Anpassung des Prompts möglich

3. Typische Fixes sind dokumentiert

Tipps für Anfänger

Do's (Das sollten Sie tun)

1. Mit einfachen Videos starten

   • Kurze Tutorial-Videos (10-15 Minuten)

   • Klare Struktur (Einleitung, Hauptteil, Fazit)

   • Technische Themen funktionieren besonders gut

2. Das Transkript prüfen

   • Vor der Analyse kurz überfliegen

   • Qualität der Untertitel einschätzen

   • Bei schlechter Qualität: Manuell nachbessern

3. Die Validierung ernst nehmen

   • Jedes Diagramm einzeln prüfen

   • 50+ Labels wirklich zählen

   • Bei Zweifeln: Neu generieren

4. Iterativ verbessern

   • Erste Version ist selten perfekt

   • Prompts anpassen und lernen

   • Eigene Vorlagen entwickeln

Don'ts (Das sollten Sie vermeiden)

1. Zu lange Videos

   • Videos über 1 Stunde werden unübersichtlich

   • Besser: In Kapitel aufteilen

2. Entertainment-Content

   • Vlogs, Unterhaltung → wenig Struktur

   • Interviews ohne klaren Faden

3. Validierung überspringen

   • "Sieht schon okay aus" → Oft suboptimal

   • Qualitäts-Standards einhalten

4. Alles auf einmal wollen

   • Erst das System verstehen

   • Dann optimieren

   • Dann skalieren

Nächste Schritte

Für Anfänger

1. Installation prüfen

   • Python 3 installiert? (python3 --version)

   • Bun installiert? (bun --version)

   • Claude Code eingerichtet?

2. Erstes Video testen

   • Kurzes Tutorial-Video wählen

   • Kompletten Workflow durchlaufen

   • Ergebnisse evaluieren

3. Dokumentation lesen

   • TechnicalDiagrams.md Workflow studieren

   • Template-Struktur verstehen

   • Validierungs-Checkliste verinnerlichen

Für Fortgeschrittene

1. Eigene Templates entwickeln

   • Für wiederkehrende Diagramm-Typen

   • Branchenspezifische Anpassungen

   • Eigenes Farbschema

2. Workflow automatisieren

   • Batch-Verarbeitung mehrerer Videos

   • Integration in Content-Pipeline

   • Automatische Veröffentlichung

3. Zur Community beitragen

   • Eigene Templates teilen

   • Verbesserungen vorschlagen

   • Best Practices dokumentieren

Fazit: Wissen sichtbar machen

Das YouTube-to-Diagram System löst ein reales Problem: Video-Wissen bleibt nicht mehr in Videos gefangen.

Statt stundenlang manuell Diagramme zu erstellen, können Sie jetzt:

• In 5 Minuten 4 professionelle Diagramme generieren

• Konsistente Qualität durch Templates sicherstellen

• Ihr Wissen visuell aufbereiten und teilen

Der wahre Wert: Nicht die Diagramme selbst, sondern die Transformation von flüchtigem Video-Wissen in dauerhafte visuelle Assets.

Probieren Sie es aus. Starten Sie mit einem Video, das Sie kürzlich hilfreich fanden. In 10 Minuten haben Sie vier Diagramme, die Sie sofort verwenden können.

Ressourcen

Dateien und Pfade

Weiterführende Diagramme

Die 4 technischen Diagramme zu diesem System, die Templates kann man sicher noch verfeinern, für meine Ziele reicht das vollkommen.

1. System-Übersicht

2. Workflow-Prozess

3. Komponenten-Architektur

4. Template-Struktur

Autor: Holger Erstellt: 16.12.2025 Kategorie: Tutorial, Automation, KI-Tools Tags: YouTube, Diagramme, Automation, Claude, Excalidraw, Whiteboard