Diagram Design : des schémas prêts à publier sans batailler dans Figma
Demandez un schéma à un agent et vous obtenez souvent des boîtes arrondies génériques qui jurent avec votre site. Diagram Design traduit le goût en règles : une seule couleur d'accent pour un ou deux nœuds clés, des traits de 1 px, aucune ombre, chaque coordonnée sur une grille de 4 px. Le résultat tient dans un fichier HTML avec SVG intégré, ouvert d'un double clic.
45 types, dont architecture, logigramme, séquence, modèle ER, frise, couloirs, quadrant, Sankey, carte de Wardley et Gantt
Chaque type en trois variantes statiques : minimal clair, minimal sombre et éditorial complet, sans build ni image externe
Mise aux couleurs de la marque : à partir de l'URL du site, il reprend palette et polices ; les profils clients vont dans ~/.diagram-design/profiles/
Importe des fichiers draw.io, Mermaid et Excalidraw et exporte le résultat en SVG ou PNG
Avant le premier schéma d'un projet, il demande s'il faut personnaliser le style pour ne pas publier les couleurs par défaut
Quand s’en servir
Il vous faut un schéma d'architecture pour un billet de blog qui s'intègre au site au lieu d'une capture d'éditeur
Vous préparez une présentation pour la direction et voulez un quadrant des projets par impact et effort
Vos anciens schémas Mermaid ou draw.io doivent être redessinés dans un style maison cohérent
Demandez à l’agent
Fais le schéma d'architecture de mon app : frontend, backend, base de données et cache Redis
Il me faut un quadrant des projets du deuxième trimestre selon l'impact et l'effort
Adapte diagram-design à notre site et redessine ce diagramme Mermaid
Questions
Comment installer Diagram Design ?
Avec npx skills add cathrynlavery/diagram-design. Dans Claude Code, préférez le plugin : /plugin marketplace add cathrynlavery/diagram-design puis /plugin install diagram-design@diagram-design, qui apporte mises à jour et commandes.
Diagram Design fonctionne-t-il dans Codex et Cursor ?
Oui. Le README propose un plugin Codex via codex plugin marketplace add, Cursor passe par npx skills, et Copilot, Gemini CLI, Windsurf et d'autres sont aussi pris en charge.
Quelle différence entre Diagram Design et Mermaid ?
Mermaid est du texte qu'on garde dans Git et qu'on compare. Diagram Design livre une image prête à publier et à vos couleurs, mais sans source modifiable, et l'autrice conseille Mermaid pour une doc qui change souvent.
