Qu’est-ce que Diagram Design ?
Diagram Design est un skill d'agent de Cathryn Lavery, publié sous son entreprise LittleMight, qui transforme une demande en langage simple en un diagramme écrit comme un seul fichier HTML avec SVG en ligne. Il couvre 45 types de diagramme, de l'architecture, des organigrammes, des diagrammes de séquence et d'état aux quadrants, treemaps et dessins axonométriques éclatés, chacun en variantes minimale claire, minimale sombre et pleinement éditoriale. Le style maison est fixe : filets de 1px, pas d'ombres, une seule couleur d'accent pour la ou les deux choses qui comptent, et chaque coordonnée sur une grille de 4px.
Demandez-lui de s'intégrer à un site web et l'agent récupère la page d'accueil, extrait la palette et la pile de polices, vérifie le contraste WCAG AA, et écrit les tokens dans un guide de style que chaque diagramme ultérieur lit ; des profils nommés gardent les marques de plusieurs clients séparées. Il redessine aussi les fichiers draw.io, Mermaid et Excalidraw existants, et exporte du SVG pour Figma ou du PNG pour les diapositives.
Il s'installe avec `npx skills add cathrynlavery/diagram-design` dans n'importe quel hôte d'Agent Skills, ou comme plugin pour Claude Code, Codex, GitHub Copilot, Factory Droid, Qoder, Pi et Claude Cowork.
Diagram Design vaut-il le coup ?
Diagram Design est le skill de diagramme à battre pour tout ce que vous comptez publier, et la raison est visible dans sa galerie plutôt que dans sa liste de fonctions. Le dépôt a été créé en avril 2026 et a environ 62 200 étoiles GitHub ; skills.sh compte 21 200 installations via son CLI, ce qui exclut les marketplaces de plugins. Il ne livre aucune version taguée mais est maintenu quotidiennement : le manifeste de plugin a atteint la version 2.6.136 le 27 octobre 2026.
Les règles de design font le travail. La prémisse de Lavery est que le modèle comprend déjà le contenu et ne manque que de goût, si bien que le skill écrit ce goût : une densité cible de 4 sur 10, une couleur d'accent réservée et une grille de 4px, avec des vérifications CI pour les éléments qui se chevauchent et sont rognés. L'intégration de la marque compte plus qu'il n'y paraît. Chaque diagramme après elle utilise l'arrière-plan, la couleur d'appel à l'action et les polices de votre site, et la vérification de contraste propose une valeur plus sombre quand une couleur de marque échoue à des tailles d'étiquette de 9 à 12px.
Les commandes d'import sont le gain pratique pour les équipes avec de vieux diagrammes. Un fichier draw.io, Mermaid ou Excalidraw est redessiné à l'un de trois niveaux de détail (fidèle jusqu'à 24 nœuds, équilibré jusqu'à 12, simplifié jusqu'à 7), et chaque import se termine par un registre de ce qui a été fusionné ou abandonné. Le README est franc sur le coût : la sortie dépend du modèle, le même prompt peut se disposer différemment deux fois, et il n'y a pas de source éditable à relire dans une pull request. Pour les documents d'architecture qui changent à chaque sprint, Mermaid reste le meilleur outil, comme le dit le README lui-même.
Une certaine friction est intégrée. Une barrière de première exécution se met en pause pour demander l'intégration dans chaque nouveau projet, ce qui convient à une personne mais bloque les exécutions non surveillées (l'issue #262 propose un contournement). L'export PNG a besoin de Playwright et Chromium, et les diagrammes chargent les polices depuis Google Fonts par défaut, la seule requête réseau qu'ils font, sauf si vous demandez les polices système. Face à fireworks-tech-graph, qui vise les diagrammes d'architecture technique, Diagram Design couvre bien plus de types et les marque ; anatomy va plus profond sur une seule forme isométrique et interactive.
Là où il fait la différence
Un fondateur qui écrit un blog d'entreprise hebdomadaire
Ajouter aux billets des diagrammes qui ressemblent au reste du site au lieu de boîtes arrondies génériques
Lancez l'intégration une fois contre l'URL du blog, puis demandez un quadrant ou une pyramide par billet et intégrez le HTML ou le SVG exporté. Ne coûte que des tokens de modèle, et remplace les sessions Figma de 30 minutes que Lavery décrit.
Un architecte de solutions dans un cabinet de conseil servant plusieurs clients
Transformer les vieux diagrammes draw.io de chaque client en diapositives aux couleurs de ce client
Enregistrez un profil par client et mettez un marqueur `.diagram-design` dans chaque projet, puis lancez `/diagram-design:import-drawio file.drawio --size=slide-16x9 --detail=simplified --audience=executive`. Le registre de fidélité liste ce qui a été réduit, ce qui vaut la peine d'être vérifié avant qu'un client ne le voie.
Un chef d'équipe plateforme qui documente un système pour un manuel d'ingénierie
Produire un diagramme d'architecture soigné pour une page de manuel publiée
Demandez un diagramme d'architecture ou de séquence en mots simples et exportez du SVG avec `/export-diagram --svg-only`. Gardez la source Mermaid pour les diagrammes que l'équipe édite à chaque sprint ; régénérer peut changer la disposition, et il n'y a rien à differ.
Avant de vous engager
- Mise en route
- `npx skills add cathrynlavery/diagram-design` pour n'importe quel hôte d'Agent Skills, ou `/plugin marketplace add cathrynlavery/diagram-design` puis `/plugin install diagram-design@diagram-design` dans Claude Code pour les commandes slash et les mises à jour. L'export PNG a besoin de `pip install playwright && playwright install chromium`.
- Intégrations
- Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, Pi, Gemini CLI, Cline, Windsurf, Amp, Kiro, OpenCode et Claude Cowork. Importe draw.io, Mermaid et Excalidraw ; exporte HTML, SVG et PNG aux tailles diapositive, document, social et impression.
- Données et confidentialité
- Pas de serveur, de comptes, d'analytics ni de télémétrie, selon la politique de confidentialité. Les fichiers générés chargent Google Fonts par défaut, ce qui envoie l'adresse IP du lecteur à Google ; l'option polices système supprime toutes les requêtes réseau. L'intégration de marque ne récupère que le site que vous nommez. Licence MIT.
- Coût à grande échelle
- Gratuit pour toute taille d'équipe. Le coût est les tokens de modèle pour chaque diagramme et redessin ; une équipe qui le standardise ne paie rien au-delà des sièges d'agent qu'elle a déjà.
- Limites
- Environ 45 issues et pull requests ouvertes, surtout de nouveaux types de diagramme et des correctifs à l'importateur Mermaid et aux vérificateurs de disposition. La qualité de sortie dépend du modèle, et les éditions du guide de style installé peuvent être remplacées par des mises à jour sauf si vous utilisez des profils enregistrés ou un clone éditable.
Les points forts
- 45 types de diagramme dans un style éditorial cohérent
- Tire la palette et les polices de votre site web, avec vérifications de contraste
- Redessine les fichiers draw.io, Mermaid et Excalidraw
- HTML autonome avec SVG accessible ; licence MIT
Les points faibles
- Pas de source éditable à differ ou glisser
- Le même prompt peut produire des dispositions différentes
- La barrière de style de première exécution interrompt les exécutions non surveillées
- L'export PNG a besoin de Playwright et Chromium
Idéal pour
Les rédacteurs, fondateurs et ingénieurs qui publient des diagrammes dans des billets, des présentations et de la documentation et veulent qu'ils correspondent à leur marque.
Alternatives à Diagram Design
Diagram Design : questions fréquentes
- Diagram Design vaut-il le coup ?
- Diagram Design donne aux agents le goût qui leur manque, et ses diagrammes paraissent publiés plutôt que générés, au prix d'une sortie que vous ne pouvez ni differ ni glisser. Nous lui donnons 4.3 sur 5.
- Combien coûte Diagram Design ?
- Gratuit et open source (MIT). Vous ne payez que l'usage de modèle de votre agent.
- Quels sont les inconvénients de Diagram Design ?
- Pas de source éditable à differ ou glisser; le même prompt peut produire des dispositions différentes; la barrière de style de première exécution interrompt les exécutions non surveillées; l'export PNG a besoin de Playwright et Chromium.
- À qui s’adresse Diagram Design ?
- Les rédacteurs, fondateurs et ingénieurs qui publient des diagrammes dans des billets, des présentations et de la documentation et veulent qu'ils correspondent à leur marque.
- Combien coûte Diagram Design pour une équipe ou en production ?
- Gratuit pour toute taille d'équipe. Le coût est les tokens de modèle pour chaque diagramme et redessin ; une équipe qui le standardise ne paie rien au-delà des sièges d'agent qu'elle a déjà.
- Diagram Design est-il sûr pour les données de l’entreprise ?
- Pas de serveur, de comptes, d'analytics ni de télémétrie, selon la politique de confidentialité. Les fichiers générés chargent Google Fonts par défaut, ce qui envoie l'adresse IP du lecteur à Google ; l'option polices système supprime toutes les requêtes réseau. L'intégration de marque ne récupère que le site que vous nommez. Licence MIT.
- Quelles sont les meilleures alternatives à Diagram Design ?
- Les alternatives les plus proches que nous avons testées sont fireworks-tech-graph, Anatomy et Anthropic Skills.
Réponses vérifiées le 28 oct. 2026.