HelloPixDig

Annuaire › Design & web › Diagram Design

Diagram Design
Image : dépôt officiel du projet

> PÉPITE DESIGN & WEB · SKILLS POUR AGENTS · AGENTS & AUTOMATISATION

Diagram Design

par Cathryn Lavery

Une skill pour ton agent de code qui dessine des diagrammes soignés : un seul fichier HTML avec SVG, aux couleurs de ta marque.

MIT GratuitOpen source
Voir sur GitHub →

Ce que ça fait

  • 44 types de diagrammes : architecture, flux, frise, matrice, Sankey, Gantt, carte de Wardley, parcours utilisateur…
  • Sortie en un fichier HTML + SVG autonome, exportable en SVG ou PNG
  • Compatible Claude Code, Codex, Cursor, GitHub Copilot, Factory Droid et Pi

! Le rendu peut varier d'un essai à l'autre et le résultat n'est pas un format éditable (pas de texte à versionner, pas de canevas à déplacer). Pour une doc versionnée dans Git, Mermaid reste plus adapté ; ici, c'est pour le diagramme que tu publies. Chiffres et fonctions tirés du dépôt, non testés par PixDig.

L'installer

Prérequis : Un agent de code compatible, par exemple Claude Code.

Dans Claude Code, ajoute le dépôt de plugins
/plugin marketplace add cathrynlavery/diagram-design
Installe la skill
/plugin install diagram-design@diagram-design

Le prompt pour ton agent

Colle-le dans ton agent de code : il vérifie les prérequis et installe pour toi.

Claude CodeCodexCursorGemini CLIopencode
Prompt
Installe Diagram Design (https://github.com/cathrynlavery/diagram-design) sur ma machine.
1. Vérifie les prérequis : Un agent de code compatible, par exemple Claude Code. S'il manque quelque chose, dis-le-moi avant d'installer quoi que ce soit.
2. Suis la méthode officielle :
- Dans Claude Code, ajoute le dépôt de plugins : /plugin marketplace add cathrynlavery/diagram-design
- Installe la skill : /plugin install diagram-design@diagram-design
3. Vérifie que ça fonctionne, puis explique-moi comment le lancer et par quoi commencer.

Relis toujours ce que ton agent s'apprête à exécuter, surtout les commandes d'installation.