Connexion
Diagram-design - Des schémas à vos couleurs
Diagram-design , c'est un skill pour Claude Code, Codex et Pi qui vous fabrique un schéma technique sous forme de fichier HTML autonome. Vous double-cliquez, ça s'ouvre dans le navigateur, et le diagramme est là, super clean et sans avoir à faire de build ou importer des images.
27 types de diagrammes sont couverts, du schéma d'architecture au diagramme de séquence en passant par la machine à états, le Gantt et le quadrant, chacun en 3 variantes : claire, sombre et éditoriale. Bref, de quoi illustrer une doc ou un article de blog sans dessiner les boîboîtes vous-même, une par une comme dans un Excalidraw .
Le type Loop, avec son moyeu de mémoire partagée. Les pointillés sont les écritures en retour.
Il sait aussi partir de ce que vous avez déjà. Vous lui pointez un fichier draw.io ou un bloc Mermaid planqué dans un README, et il le reprend. Attention, ce n'est pas une conversion hein, mais un re-dessin (ça se dit ?? j'sais pas mais je m'en fous) complet. Il va même récupérer le diagramme embarqué dans un .drawio.png, vous savez, celui qui ressemble à du charabia quand vous ouvrez le fichier dans un éditeur.
Ce qu'il jette au passage ce sont les coordonnées de la source, sa palette, ses polices, les connecteurs en diagonale de draw.io et la mise en page automatique de Mermaid. Ce qu'il garde par contre, ce sont les composants, les relations, les regroupements et le sens de lecture.
À la fin de l'import, il rend même un genre de relevé de fidélité en vous indiquant les noeuds en entrée, les noeuds qu'il a dessinés et les noeuds orphelins qu'il a supprimé.
Un fichier draw.io de 12 nœuds redessiné en niveau de détail équilibré, pour un billet de blog.
La sortie se règle ensuite sur 4 critères. Le format d'abord, HTML, SVG ou PNG. Puis la taille, qui ne touche pas que le cadre. Une planche 16:9 destinée au vidéoprojecteur reçoit des libellés en 16px, une image de doc en reçoit des 12px.
Le troisième critère élague votre dessin, avec 24 nœuds au maximum en mode fidèle, 12 en équilibré, 7 en simplifié, et la coupe suit toujours le même ordre : les décorations, puis les doublons, puis les grappes de feuilles, puis l'infrastructure.
Le quatrième change le vocabulaire, mais pas le nombre de boîtes pour s'adapter au public à qui est destiné le diagramme. Pratique pour passer d'un diagramme hyper technique à quelque chose qui pourra être compris de la direction ou des commerciaux.
Reste l'allure du diagramme... Vous lui donnez par exemple l'URL de votre site, il lit la page d'accueil, en tire la couleur de fond, celle du texte, celle des boutons et la pile de polices, puis range tout ça dans des rôles, et voilà vous avez le design de vos rêves.
Mais surtout, avant d'écrire quoi que ce soit, il contrôle le contraste en AA. Si une de vos couleurs ne tient pas la route à la taille où vivent les libellés, entre 9 et 12px, il propose une valeur corrigée et explique pourquoi. Vous validez le diff, et le guide de style du skill est mis à jour pour tous les schémas suivants.
Et au premier schéma dans un nouveau projet, il refusera même de partir sur le thème par défaut sans vous demander. Il vous proposera naturellement d'aller consulter votre site, de coller vos couleurs à la main, ou encore d'assumer le défaut en connaissance de cause.
Côté installation, ça passe par les plugins pour Claude Code et Codex, par npx pour Codex, par une ligne pour Pi. C'est sous licence MIT et c'est gratuit. Tout est ensuite produit en local, et l'import Mermaid se contente de lire le texte, sans rendu ni appel réseau. Il n'y a que l'export PNG qui réclame un extra, à savoir Playwright, à installer à côté.
Maintenant, c'est pas le même usage qu'un bloc Mermaid qui lui est destiné à évoluer en permanence. Là c'est vraiment pour faire des rendus sous la forme d'une image finie et jolie. Donc à vous de voir !
