Animiertes Diagramm
Du schreibst eine kleine JSON-Beschreibung (Knoten in Rasterzellen, nummerierte Schritte, Gruppen); der Renderer legt das Layout fest, prüft es und rendert 90 Frames in <name>.gif, <name>.mp4, <name>.png und <name>.check.json. Du schreibst niemals Koordinaten.
$SKILL ist das Verzeichnis, das diese Datei enthält (${CLAUDE_SKILL_DIR} in Claude Code). Erfordert Node ≥ 22, Google Chrome und ffmpeg. Einmal pro Maschine: npm install --prefix "$SKILL". Wenn ANIMATED_DIAGRAM_RENDER_LOCK gesetzt ist, wartet jeder Render-Vorgang auf dieses Sperrverzeichnis, sodass jeweils nur ein Chrome rendert.
Arbeitsablauf
1. Design zuerst
Suche nach diagram-theme.json im Verzeichnis, in dem das Diagramm abgelegt wird (render prüft dort, dann das Arbeitsverzeichnis). Wenn es keine gibt, erstelle eine, bevor du etwas anderes tust. Frage den Benutzer, welches Design er möchte:
node "$SKILL/scripts/cli.mjs" theme --preset machine-room-dark # oder light, dark
node "$SKILL/scripts/cli.mjs" theme --brand "#E4572E,#17BEBB" --mode light
node "$SKILL/scripts/cli.mjs" theme --from-image logo.png --mode dark
node "$SKILL/scripts/cli.mjs" theme --check my-theme.json # überprüft ein manuell bearbeitetes Design
Jeder Befehl schreibt diagram-theme.json (--out zum Ändern) und gibt die Farben mit ihren Kontrastverhältnissen aus. Ein Design, das den Kontrast (4,5:1 für jede Textfarbe auf ihrem Hintergrund) oder die Dunkel-Regel nicht einhält, wird abgelehnt, wobei die nächstgelegene bestandene Farbe vorgeschlagen wird. Details: reference/theme-setup.md.
2. Inhalt
Aus dem Thema des Benutzers oder dem Quelltext entwirfst du die Knoten und die nummerierten Schritte und zeigst die Schrittliste im Chat an:
1. Benutzer → DNS: DNS-Abfrage
2. DNS → Benutzer: nächste Edge-IP (Antwort)
3. Benutzer → Edge-Server: GET /logo.png
Warte auf die Bestätigung des Benutzers. Jeder Pfeil ist eine Behauptung: Überprüfe jeden anhand einer Quelle, bevor du renderst.
3. Das JSON
Wähle die Vorlage mit reference/templates.md (flow-grid, comparison, stack oder map) und schreibe <topic>.json gemäß reference/diagram-format.md. Beginne mit dem nächstliegenden Beispiel: examples/cdn.json (flow-grid), examples/cache-strategies.json (comparison), examples/web-stack.json (stack) oder examples/anatomy-of-an-ai-app.json (map). Platziere Knoten nur per Zelle; offset ist ein letzter Ausweg für eine minimale Verschiebung von wenigen Pixeln.
Wähle eine Karte, wenn der Benutzer das gesamte System auf einer Seite sehen möchte, anstatt einen einzelnen Pfad durch es: 12 bis 25 Knoten in bis zu 6 Farbzonen, die Wörter in einer Legende neben dem Bild. Auf einer Karte entscheidet die Positionierung alles: Setze den Knoten, den die meisten Pfeile berühren, in die Mitte, mit dem, was er verbindet, daneben, und lass die meisten Schritte benachbarte Knoten verbinden. Gib einen kurzen title und einen subtitle.
4. Icons
node "$SKILL/scripts/cli.mjs" icons # die Bibliothek: Benutzer, Laptop, Telefon, Rack, Turm, Datenbank, Cache, …
Wenn ein Knoten ein Icon benötigt, das die Bibliothek nicht enthält, zeichne es gemäß reference/icon-rulebook.md in ./diagram-icons/<name>.js neben dem Diagramm und überprüfe es dann bei 2× Vergrößerung neben zwei vorhandenen Icons, bevor du es verwendest:
node "$SKILL/scripts/cli.mjs" icon-sheet <name> laptop rack --out sheet.png
5. Rendern
node "$SKILL/scripts/cli.mjs" render <topic>.json --out out/ # --theme <preset|file>, --style filled|line|duotone
Exit-Codes: 0 erfolgreich · 2 die Prüfung ist fehlgeschlagen (das Standbild und <topic>.check.json werden geschrieben, kein GIF) · 3 noch kein Design · 1 fehlerhafte Eingabe (die Fehler des Diagramms oder Designs werden mit ihren JSON-Pfaden ausgegeben).
Bei Exit-Code 2 lies out/<topic>.check.json. Jeder Fehler hat einen code, die betroffenen ids (Knoten-IDs, Schrittpfeile als s<index>) und ein detail. Korrigiere das JSON (verschiebe eine Zelle, kürze ein Label, teile einen Schritt, verwende weniger Zeilen) und rendere erneut — maximal 3 Runden, oder 6 für eine Karte, wo das Verschieben eines Knotens viele Pfeile auf einmal entwirren kann. Die Korrekturen pro Code sind in reference/templates.md. Öffne dann das PNG und sieh es dir selbst an: Die Prüfung erfasst Kollisionen, nicht die Lesereihenfolge.
6. Bericht
Gib dem Benutzer die Pfade des GIF, MP4 und PNG, die Größe des GIF (Budget etwa 1 MB bei 1080×1350, 3 MB für ein Poster) und die Zusammenfassung der Prüfung, einschließlich aller Warnungen.