Diagram Design : une compétence d'agent dotée d'un vrai système de design

Tous les diagrammes générés par IA se ressemblent. Vous voyez très bien de quoi il s'agit : des boîtes aux coins arrondis, un dégradé violet-bleu planqué quelque part, des ombres portées partout, des flèches qui s'arrêtent à quelques pixels du bord, et une police qui hurle « valeur par défaut ». C'est l'équivalent visuel d'un communiqué de presse. Techniquement, ça communique. Personne n'a envie de le lire.

Diagram Design, une compétence d'agent signée Cathryn Lavery, attaque ce look de front. Son accroche est d'une franchise rare pour un README : un seul fichier HTML avec SVG intégré, à votre marque, 45 types de diagrammes, pas d'ombres, pas de bricolage Mermaid.

Cette dernière formule, c'est la thèse. Le projet ne cherche pas à rendre la génération de diagrammes plus intelligente. Il cherche à faire ressembler le résultat à quelque chose qu'aurait produit quelqu'un de goût.

Ce que ça produit vraiment

Vous décrivez le diagramme voulu, l'agent écrit un unique fichier HTML avec du SVG en ligne, et vous double-cliquez dessus. Pas d'étape de build, pas de pipeline de rendu, aucune dépendance à un service. Le fichier s'ouvre hors ligne et aura le même aspect dans cinq ans.

La bibliothèque couvre un spectre réellement large : diagrammes d'architecture et d'évolution d'architecture, de déploiement, graphes de dépendances, diagrammes de classes UML, schémas de base de données, organigrammes, diagrammes de séquence, machines à états, couloirs, flux de données, plus toute une panoplie de graphiques (barres, courbes, nuages de points, treemap, radar, polaire, cascade, carte de chaleur, sankey) et de formes structurelles (arbres, organigrammes hiérarchiques, empilements de couches, diagrammes de Venn, pyramides, médaillons). Côté stratégie et planification : matrices de positionnement, cartes de Wardley, Gantt, frises chronologiques, kanban, story maps et parcours utilisateurs. Il y a même une vue axonométrique éclatée pour le travail spatial.

Chaque type existe en trois variantes statiques : minimal clair, minimal sombre, et un traitement éditorial complet. Une petite incohérence à signaler — le titre du dépôt annonce 44 types, le corps du texte 45, et la galerie est numérotée de 01 à 44. Un projet aussi maniaque sur sa propre grille a une coquille. Ça arrive.

Ce qui fait tenir l'ensemble : les règles

C'est dans le système de design que l'effort a été investi, et il s'énonce en chiffres plutôt qu'en adjectifs.

Une seule couleur d'accent par diagramme. L'accent sert à attirer l'attention sur un ou deux éléments. Tout le reste est encre, papier et gris sourd. Cette seule règle élimine l'essentiel du bruit visuel qui fait ressembler un diagramme d'IA à un tableau de bord de 2016.

Trois familles de caractères, chacune avec un rôle. Instrument Serif pour les titres et les annotations en italique. Geist sans pour les noms de nœuds. Geist Mono pour les sous-libellés techniques — ports, URL, types de champs. Réserver le monospace au détail technique, c'est le réflexe d'un designer en exercice et quelque chose qu'un générateur ne fait jamais.

Une grille de 4 pixels. Chaque coordonnée, largeur, espacement et marge interne doit être divisible par quatre. L'autrice en fait la clé pour que le résultat ne sente pas l'IA. Elle a raison, et la raison est subtile : le désalignement est la trahison. Vous ne remarquez pas qu'une boîte fait 137 pixels de large. Vous sentez que quelque chose cloche, sans savoir quoi.

Des filets, pas d'ombres, un rayon plafonné à 10px. Les bordures font le travail que les ombres font d'habitude, sans prétendre que le diagramme est un objet physique posé sur une surface.

Densité d'information cible : 4 sur 10. C'est la règle à laquelle la plupart des équipes résisteront, et dont la plupart des lecteurs leur sauront gré. Le principe énoncé : le geste de meilleure qualité est généralement la suppression.

L'accessibilité n'est pas un ajout de dernière minute non plus. La sortie SVG embarque role="img", aria-labelledby et des éléments title/description ; les préférences de réduction de mouvement sont respectées ; le contraste WCAG AA (4.5:1 pour le texte, 3:1 pour les marques clés) est vérifié en CI. La palette par défaut, c'est du noir de jais et du mandarine sur un papier blanc fumé.

L'intégration de marque, la fonctionnalité discrète

Vous lui donnez l'URL de votre site. Elle en extrait les couleurs et les polices, puis les projette sur des rôles sémantiques : paper, ink, muted, accent, link. Ensuite, elle vous remet un reçu de fidélité indiquant ce qu'elle a déduit et où elle a deviné.

Cette dernière partie compte bien plus que l'extraction. Les outils d'extraction de marque vous tendent une palette et se taisent. Montrer l'inférence, c'est ce qui vous permet de la corriger avant de produire quarante diagrammes dans le mauvais orange.

Il existe aussi un chemin d'import : pointez-le vers un fichier Mermaid, draw.io ou Excalidraw et il redessine le diagramme dans le système de design, avec quatre réglages — format, taille, niveau de détail, audience — et un registre de fidélité. Migrer un wiki entier de graphiques Mermaid, c'est exactement le cas d'usage pour lequel l'outil a été conçu.

Là où ça colle, et là où ça ne colle pas

L'installation est volontairement ennuyeuse. npx skills add cathrynlavery/diagram-design pour tout ce qui lit les Agent Skills ; des commandes de marketplace de plugins pour Claude Code, Codex, GitHub Copilot et Factory Droid ; des liens symboliques ou des imports de sous-répertoire pour Cursor, Cline, Gemini CLI, Windsurf, Amp, Zed, Kiro et OpenCode. Des commandes slash existent pour l'export, l'import, le profilage et un contrôle doctor.

L'autrice est d'une clarté rafraîchissante sur les limites, et ce sont les bonnes limites.

La qualité dépend du modèle. Une même consigne peut produire deux mises en page différentes, parce que vous obtenez de la géométrie générée, pas un gabarit rempli. Il n'y a pas de source éditable : pas de canevas à manipuler, pas de texte à comparer en diff dans une pull request. Pour une documentation qui change chaque semaine, elle recommande Mermaid — ça se diff, GitHub le rend nativement, et ça vaut mieux que la beauté.

Elle pose aussi une question que davantage d'auteurs d'outils devraient poser : un lecteur tirera-t-il plus de ce diagramme que d'un paragraphe ? Si le « diagramme » se résume à une boîte étiquetée, écrivez la phrase. Si vous comparez deux listes, utilisez un tableau. Si vous voulez de l'ASCII art pour un terminal, ce n'est pas le bon outil.

Le résultat est un fichier, pas un service

Il y a ici une décision de conception qui paraîtra plus intelligente chaque année : le livrable est un unique fichier HTML avec du SVG en ligne, et il s'ouvre hors ligne. Pas de compte, pas de script à embarquer, aucune dépendance à un éditeur qui pourrait revoir le tarif de son API au prochain trimestre. Mettez-le dans un dépôt, joignez-le à un ticket, imprimez-le, envoyez-le par mail à un client dont l'ordinateur est verrouillé.

Pour quiconque a vu un SaaS de diagrammes se faire racheter puis se dégrader, ce n'est pas un détail. C'est la différence entre un artefact et un abonnement.

Le compromis, c'est qu'on ne l'édite pas comme un canevas. Pas de glisser-déposer, pas de panneau de calques, pas de pile d'annulation. Si la mise en page est ratée, vous régénérez ou vous retouchez les coordonnées à la main — et comme tout repose sur une grille de 4px, la retouche manuelle reste survivable, ce qu'elle ne serait pas dans un document libre.

Comment juger une compétence de diagrammes en dix minutes

Demandez-lui quelque chose de forme ingrate : un système avec un nœud manifestement important, trois services de support et une base de données que tout le monde oublie. Une bonne sortie utilise l'accent unique pour marquer le nœud important et laisse le reste reculer. Une mauvaise sortie colore tout, parce que colorer tout, c'est ce que font les générateurs quand ils n'ont pas de priorités.

Demandez ensuite deux fois le même diagramme. Une sortie identique signifie que vous regardez un gabarit. Une sortie différente signifie que vous regardez de la génération, ce qui est plus honnête et explique aussi pourquoi le modèle choisi compte.

Enfin, regardez les chiffres. Comptez les espacements. S'ils ne sont pas multiples de quatre, les contraintes sont ignorées, et le reste du système de design l'est probablement aussi.

Le vrai argument

Il y a une version de ce projet qui n'aurait été qu'un prompt de style. « Fais éditorial, sans ombres, minimaliste. » Cette version aurait produit un fouillis incohérent, parce qu'un prompt ne survit pas au contact d'un diagramme d'architecture à quarante nœuds.

Ce qui rend Diagram Design intéressant, c'est qu'il encode le goût sous forme de contraintes qu'une machine peut vérifier : divisible par quatre, un seul accent, trois familles de caractères, ratio de contraste, aucune ombre. L'esthétique n'est pas dans le modèle. Elle est dans la spécification.

C'est une idée plus transférable que la compétence elle-même. Quel que soit l'outil avec lequel vous générez des visuels — diagrammes, slides, couvertures, vignettes — la différence entre une sortie qui semble conçue et une sortie qui semble générée tient généralement à une courte liste de règles que quelqu'un a pris la peine d'écrire.