À propos du projet

Diagram Design est une collection de 39 types de diagrammes de qualité éditoriale fournis sous forme de fichiers HTML et SVG autonomes, conçus comme une compétence ou un plugin pour les assistants de codage IA, notamment Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro et OpenCode. La philosophie centrale du projet est que les diagrammes doivent correspondre à la qualité visuelle du contenu environnant plutôt que de ressembler à des modèles génériques de boîtes arrondies. Chaque type de diagramme est livré en trois variantes statiques : minimal clair, minimal sombre et full-éditorial. Toutes les sorties sont autonomes, sans étape de build, sans JavaScript ni dépendances à des images externes. Les 39 types couvrent un large éventail de cas d'usage, notamment les diagrammes d'architecture, les organigrammes, les diagrammes de séquence, les machines à états, les modèles ER/données, les chronologies, les couloirs (swimlanes), les quadrants, les graphiques radar, les boucles/volants d'inertie, les hiérarchies imbriquées, les arbres, les organigrammes d'entreprise, les piles de couches, les diagrammes de Venn, les pyramides/entonnoirs, les diagrammes à barres, les treemaps, les graphiques en courbes, les diagrammes de Gantt, les nuages de points, les piles de haut niveau, les processus, les architectures médaillon, les flux de données, les intégrations de plateformes de données, les matrices de sécurité, les diagrammes de Sankey, les diagrammes en arête de poisson, les cartes de Wardley, les tableaux Kanban, les parcours utilisateur, les diagrammes de déploiement, les graphes de dépendances, les diagrammes de classes UML, les story maps, les schémas de base de données, les graphiques polaires et les diagrammes en cascade. Un différenciateur clé est le flux d'intégration avec correspondance de marque. La compétence peut récupérer la page d'accueil d'un site web, extraire la palette de couleurs dominante et la pile de polices, mapper les valeurs détectées vers des rôles sémantiques (papier, encre, atténué, accent, lien), et les appliquer à chaque diagramme. Elle effectue automatiquement des vérifications de contraste WCAG AA et émet un reçu de fidélité documentant les URL échantillonnées, les rôles de couleurs exacts, les familles de polices et les éventuels replis. Les profils peuvent être enregistrés et partagés entre plusieurs projets clients à l'aide d'un fichier marqueur `.diagram-design`. L'outil prend également en charge l'importation de diagrammes existants depuis draw.io, Mermaid ou Excalidraw et leur redessin dans le système Diagram Design au format, à la taille et au niveau de détail choisis. Les motifs sémantiques décrivent le comportement séparément de la mise en page, de sorte que des concepts comme les files d'attente, les traces de politique ou les limites de confiance peuvent utiliser le type existant le plus proche sans augmenter le nombre de types. Un mouvement accessible optionnel est disponible pour les explications ordonnées, avec prise en charge du mouvement réduit et une valeur statique par défaut. L'accessibilité est intégrée par défaut : chaque SVG inclut role="img", aria-labelledby et des éléments title/desc avec des préfixes d'ID par diagramme pour éviter les conflits lorsque plusieurs diagrammes sont intégrés sur une même page. L'installation est disponible via la place de marché de plugins native de chaque hôte ou via un clone Git direct pour les installations modifiables. La compétence partagée se trouve dans `skills/diagram-design/` et est compatible avec tous les hôtes Agent Skills pris en charge.