diagram-design : 44 types de schémas éditoriaux, dessinés par votre agent aux couleurs de votre marque
diagram-design est une compétence d'agent qui dessine des schémas en un seul fichier HTML et SVG autonome, aux couleurs de votre marque. Elle offre 44 types, importe draw.io et Excalidraw, exporte en PNG et SVG, et suit la licence MIT.
Lorsqu'un développeur demande à son agent de coder « un schéma d'architecture », le résultat habituel est un bloc de code Mermaid, rendu en boîtes grises, avec des ombres et des polices aléatoires. Le dépôt cathrynlavery/diagram-design vise précisément ce petit désagrément bien réel. C'est une compétence d'agent (Agent Skill) : elle apprend à l'agent à dessiner chaque schéma sous la forme d'un seul fichier HTML et SVG autonome, qui s'ouvre d'un double clic et respecte votre propre marque. Le projet annonce 44 types de schémas, et son slogan est direct : pas d'ombres, pas de bouillie Mermaid. Le README affiche aussi un badge Trendshift, signe que les développeurs y prêtent attention.
Le fonctionnement est volontairement léger. L'utilisateur demande en langage courant, par exemple un schéma d'architecture avec un frontend, un backend, une base de données et un cache Redis, ou un quadrant des projets du deuxième trimestre selon l'impact et l'effort. L'agent choisit le type de schéma, expose son plan et écrit un fichier .html. L'installation tient en une commande, npx skills add cathrynlavery/diagram-design. La compétence cible tout hôte qui lit les Agent Skills, et le README cite Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf et Amp. Cette conception multi-hôtes évite de lier la compétence à un seul éditeur, et c'est la première raison de s'y intéresser.
La seconde raison est l'intégration de la marque. Un utilisateur peut demander à l'agent d'intégrer diagram-design à son site web, et la compétence récupère la palette et les polices de ce site, de sorte que chaque schéma ultérieur lui ressemble. Le style des schémas cesse d'être une consigne jetable à chaque conversation et devient un réglage durable. Pour les équipes de contenu et de design, c'est bien plus fiable que de décrire les couleurs dans une consigne, encore et encore. Le README décrit aussi des voies d'import depuis draw.io, Mermaid et Excalidraw, et d'export vers PNG et SVG. Les anciens actifs ne sont pas perdus, et les schémas finis peuvent rejoindre documents et présentations.
La distribution mérite aussi un examen attentif. Dans Claude Code, la voie par la place de marché de plugins apporte les mises à jour et des commandes slash comme /export-diagram, /import-mermaid, /profile et /doctor. L'installation autonome par le CLI skills n'installe que l'Agent Skill. Elle ne suit pas les mises à jour de la place de marché : il faut lancer à la main npx skills update diagram-design. Lorsque les racines d'hôtes choisies pointent vers plusieurs répertoires, le CLI recommande les liens symboliques : une copie de référence liée à chaque racine, donc une seule mise à jour les atteint toutes. L'option --copy produit des copies indépendantes. Là où les liens symboliques sont indisponibles, comme sous Windows sans mode développeur, le CLI se replie sur la copie et indique les racines concernées. Ces détails montrent que l'auteur a pensé à la dérive de version, panne la plus courante des environnements multi-hôtes.
Sur la confiance et la provenance, le README reste sobre. Les versions officielles viennent uniquement de ce dépôt. LittleMight, la société de l'auteure Cathryn Lavery, publie les entrées des annuaires de plugins, et une entrée sous un autre nom est une copie non officielle. Un fichier PRIVACY.md liste ce que la compétence envoie sur le réseau. Le projet suit la licence MIT et affiche des badges d'intégration continue et de version. Pour une compétence qu'un agent exécute dans votre base de code, une déclaration claire d'origine et une divulgation du comportement réseau sont le minimum qu'une entreprise doit vérifier avant l'adoption.
Notre analyse : la valeur de diagram-design n'est pas d'ajouter un outil de dessin de plus. Elle tient au fait qu'il emballe des contraintes de design dans une compétence que l'agent peut appeler. Le résultat est un seul fichier HTML et SVG : il s'intègre au contrôle de version, permet de relire les différences et ne dépend d'aucun service de rendu externe. Les risques sont tout aussi nets. La qualité réelle des 44 types doit être jugée par l'utilisateur dans la galerie du projet. L'intégration de la marque dépend de la propreté des styles du site cible. L'écosystème des compétences évolue vite, et le comportement peut différer d'un hôte à l'autre. Nous suggérons à une équipe de dessiner d'abord ses deux ou trois types les plus courants, comme l'architecture et la séquence, de les comparer au flux Mermaid actuel, puis seulement de décider d'un déploiement plus large.
Sources
FAQ
Qu'est-ce que diagram-design et en quoi diffère-t-il de Mermaid ?
C'est une compétence d'agent, pas un logiciel de dessin autonome. Une fois la compétence lue, l'agent écrit un seul fichier HTML et SVG autonome, que l'on ouvre d'un double clic. Le projet insiste sur l'absence d'ombres et sur l'adéquation à la marque, et considère la sortie par défaut de type Mermaid comme à éviter. Un chemin d'import depuis Mermaid existe.
Quels hôtes d'agent sont pris en charge, et comment l'installer ?
Le README indique qu'elle fonctionne avec tout hôte lisant les Agent Skills, et cite Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf et Amp. La commande générale est npx skills add cathrynlavery/diagram-design. Dans Claude Code, la place de marché de plugins apporte mises à jour et commandes slash.
Que vérifier avant qu'une équipe l'adopte ?
Vérifiez d'abord l'origine et la confidentialité : les versions officielles viennent uniquement du dépôt, et PRIVACY.md liste ce que la compétence envoie sur le réseau. Testez ensuite deux ou trois types courants, comme l'architecture et la séquence, face à votre flux actuel. Jugez vous-même la qualité des 44 types dans la galerie.