C'est quoi ?
Diagram Design est une skill pour agents de code. On décrit le diagramme en langage courant (« une architecture avec frontend, backend, base de données et cache Redis ») et l'agent écrit un seul fichier .html qui contient le dessin en SVG. Elle s'installe par npx skills add cathrynlavery/diagram-design dans les hôtes qui lisent les Agent Skills, dont Claude Code, Codex, Cursor et GitHub Copilot. Le style est imposé : une seule couleur d'accent, des filets d'un pixel, aucune ombre, chaque coordonnée sur une grille de 4 px.
Pourquoi c'est intéressant ?
- 45 types de diagrammes : architecture, séquence, machine à états, modèle de données, mais aussi Gantt, Sankey, radar ou quadrant, chacun en variante claire, sombre et éditoriale.
- Aux couleurs de son site : à partir d'une URL, la skill relève la palette et les polices, vérifie le contraste WCAG AA et montre le différentiel avant d'écrire ses jetons. Un profil nommé par client garde la charte de chaque projet séparée.
- Le redessin de diagrammes existants : un fichier draw.io, Mermaid ou Excalidraw est repris dans ce style selon quatre réglages (format, taille, niveau de détail, public visé). Un relevé liste ensuite ce qui a été fusionné, regroupé ou supprimé.
- Un fichier qui s'ouvre seul : les variantes statiques n'ont ni étape de build ni JavaScript, et le SVG porte un titre et une description lus par les lecteurs d'écran. Un export SVG ou PNG sert pour Figma ou des slides.
- Des contrôles dans le dépôt : le script
self_check.pyvalide un fichier produit, et la CI vérifie les gabarits (chevauchements, textes rognés, contrastes) sous Linux, Windows et macOS.
À savoir
Un résultat qui dépend du modèle. Le README le reconnaît : la qualité suit le modèle employé, et une même demande peut donner deux mises en page différentes. Le fichier produit n'est pas un format source éditable, sans texte à comparer dans une pull request ni toile où déplacer une boîte. Pour des diagrammes versionnés dans Git qui changent à chaque sprint, le projet renvoie lui-même vers Mermaid. Archify, autre skill de diagrammes, fait écrire à l'agent une source JSON qu'il compile ensuite de façon déterministe.
Google Fonts par défaut. Selon la politique de confidentialité du projet, un diagramme charge Instrument Serif, Geist et Geist Mono depuis Google Fonts à chaque ouverture, ce qui transmet l'adresse IP du lecteur à Google ; les exports PNG et SVG font la même requête. Demander les polices système supprime tout appel réseau. La skill n'a ni serveur ni télémétrie : prompts et fichiers ne passent que par le fournisseur de l'agent.
Python pour l'export PNG. L'export PNG passe par Playwright et Chromium, à installer avec pip install playwright && playwright install chromium, et self_check.py demande Python 3. Le diagramme, lui, s'ouvre dans un navigateur sans rien installer.
Pas de release, un numéro par fusion. Le dépôt, ouvert en avril 2026, ne publie ni release ni tag sur GitHub. Après chaque pull request fusionnée, un workflow relève la version inscrite dans les manifestes de plugin : la série 2.6 est passée de 2.6.0, le 20 août, à 2.6.129, le 26 octobre 2026, avec des numéros sautés. Ce robot signe 120 des 395 commits, et l'autrice du projet 134.