Que fait Diagramme animé ?
Vous écrivez une petite description JSON (nœuds dans des cellules de grille, étapes numérotées, groupes) ; le moteur de rendu dispose la présentation, vérifie celle-ci et rend 90 images sous forme de <nom>.gif, <nom>.mp4, <nom>.png et <nom>.check.json. Vous n'écrivez jamais de coordonnées.
$SKILL ci-dessous est le dossier contenant ce fichier (${CLAUDE_SKILL_DIR} dans Claude Code). Nécessite Node ≥ 22, Google Chrome et ffmpeg. Une fois par machine : npm install --prefix "$SKILL". Si ANIMATED_DIAGRAM_RENDER_LOCK est défini, chaque rendu attend ce dossier de verrouillage, afin qu'un seul Chrome rende à la fois.
Workflow
1. Thème d'abord
Recherchez diagram-theme.json à côté de l'emplacement où vivra le diagramme (le rendu vérifie d'abord là, puis le dossier de travail). S'il n'y en a pas, configurez-en un avant toute autre chose. Demandez lequel l'utilisateur souhaite :
node "$SKILL/scripts/cli.mjs" theme --preset machine-room-dark # ou 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 mon-theme.json # vérifier un thème modifié à la main
Chacune écrit diagram-theme.json (--out pour le changer) et affiche les couleurs avec leurs taux de contraste. Un thème qui échoue au contraste (4.5:1 pour chaque couleur de texte sur son fond) ou à la règle du mode sombre est refusé, avec la couleur passant la plus proche proposée. Détails : reference/theme-setup.md.
2. Contenu
À partir du sujet ou du texte source de l'utilisateur, rédigez les nœuds et les étapes numérotées, et affichez la liste des étapes dans le chat :
1. Utilisateur → DNS : requête DNS
2. DNS → Utilisateur : IP du edge la plus proche (réponse)
3. Utilisateur → Serveur Edge : GET /logo.png
Attendez que l'utilisateur la confirme. Chaque flèche est une affirmation : vérifiez chacune par rapport à une source avant de rendre.
3. Le JSON
Choisissez le modèle avec reference/templates.md (grille de flux, comparaison, pile ou carte) et écrivez <sujet>.json selon reference/diagram-format.md. Commencez par l'exemple le plus proche : examples/cdn.json (grille de flux), examples/cache-strategies.json (comparaison), examples/web-stack.json (pile) ou examples/anatomy-of-an-ai-app.json (carte). Placez les nœuds uniquement par cellule ; offset est un ajustement de dernier recours de quelques pixels.
Choisissez une carte lorsque l'utilisateur souhaite l'ensemble du système sur une seule page plutôt qu'un seul chemin à travers celui-ci : 12 à 25 nœuds dans jusqu'à 6 zones de couleur, les mots dans une légende à côté de l'image. Sur une carte, le placement décide tout : placez le nœud que la plupart des flèches touchent au centre, avec ce à quoi il parle à côté, et laissez la plupart des étapes relier des voisins. Donnez un titre court et un sous-titre.
4. Icônes
node "$SKILL/scripts/cli.mjs" icons # la bibliothèque : utilisateur, ordinateur portable, téléphone, rack, tour, base de données, cache, …
Si un nœud a besoin d'une icône que la bibliothèque ne possède pas, dessinez-la en suivant reference/icon-rulebook.md dans ./diagram-icons/<nom>.js à côté du diagramme, puis examinez-la en 2× à côté de deux icônes existantes avant utilisation :
node "$SKILL/scripts/cli.mjs" icon-sheet <nom> ordinateur-portable rack --out sheet.png
5. Rendu
node "$SKILL/scripts/cli.mjs" render <sujet>.json --out out/ # --theme <preset|fichier>, --style filled|line|duotone
Codes de sortie : 0 ok · 2 la vérification a échoué (l'image statique et <sujet>.check.json sont écrits, pas de GIF) · 3 pas encore de thème · 1 mauvaise entrée (les erreurs du diagramme ou du thème sont imprimées avec leurs chemins JSON).
En cas de code 2, lisez out/<sujet>.check.json. Chaque échec a un code, les ids impliqués (ids de nœuds, flèches d'étape comme s<index>) et un detail. Corrigez le JSON (déplacez une cellule, raccourcissez une étiquette, divisez une étape, utilisez moins de lignes) et rendez à nouveau — au plus 3 rounds, ou 6 pour une carte, où déplacer un hub peut démêler de nombreuses flèches à la fois. Les corrections par code se trouvent dans reference/templates.md. Ensuite, ouvrez le PNG et regardez-le vous-même : la vérification détecte les collisions, pas un ordre de lecture maladroit.
6. Rapport
Donnez à l'utilisateur les chemins du GIF, du MP4 et du PNG, la taille du GIF (budget d'environ 1 Mo à 1080×1350, 3 Mo pour une affiche) et le résumé de la vérification, y compris les éventuels avertissements.