Communitygithub.com

ihebEllouz/project-class-architect

Rétro-ingénierie d'un dépôt logiciel en un diagramme de classes UML interactif et précis (un seul fichier HTML autonome) — classes, interfaces, énumérations, attributs, méthodes, visibilité, héritage, associations, agrégation, composition, dépendances, multiplicités et relations ORM/base de données, chaque élément tracé jusqu'à son fichier et sa ligne source — avec recherche, filtres, loupe, édition dans le diagramme, détection de changements et export SVG/PNG/JSON/HTML.

Qu'est-ce que project-class-architect ?

Cette compétence analyse un dépôt de code source pour générer un diagramme de classes UML interactif sous forme d'un seul fichier HTML. Elle prend en charge de nombreux langages et frameworks (Java/Spring/JPA, Kotlin, TypeScript/JavaScript Angular/NestJS/TypeORM, Python Django/SQLAlchemy/dataclasses, C# EF Core, Go GORM, PHP Doctrine/Laravel, SQL DDL, Prisma) et produit un diagramme que le développeur peut explorer sans lire des centaines de fichiers. Chaque classe, attribut, méthode et relation dans le diagramme est lié au fichier et à la ligne d'origine, et les conclusions heuristiques sont clairement étiquetées comme "inférées". L'outil fournit des vues multiples (classes, paquets, base de données ER, vue d'ensemble), la recherche, le filtrage, une loupe, l'édition dans le diagramme, la détection des changements après modification du code, et des exports SVG/PNG/JSON/HTML. En cas d'indisponibilité de Node.js, un mode de repli manuel est prévu pour écrire le modèle à la main et l'intégrer dans le visualiseur fourni.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/ihebEllouz/project-class-architect/tree/HEAD
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Project Class Architect

Transforme un dépôt en un diagramme de classes UML interactif qu'un développeur peut explorer au lieu de lire des centaines de fichiers. L'analyse est basée sur des preuves : chaque classe, attribut, méthode et relation dans le diagramme pointe vers le fichier et la ligne d'où il provient. Rien n'est inventé ; les conclusions heuristiques sont étiquetées inféré.

Tous les chemins dans ce fichier sont relatifs au répertoire de la compétence (le dossier contenant ce SKILL.md).

Prérequis

  • Node.js 18+ (node --version). Les scripts n'ont aucune dépendance : n'exécutez jamais npm install pour cette compétence.
  • Accès en lecture au dépôt. L'analyse ne modifie jamais les fichiers source ; elle écrit seulement dans son dossier de sortie.
  • Si Node.js n'est pas disponible, utilisez le repli décrit à la fin.

Flux de travail

1. Identifier le dépôt

Utilisez le chemin absolu du projet dont parle l'utilisateur (généralement l'espace de travail actuel). Les commandes ci-dessous s'exécutent depuis le répertoire de la compétence, donc un chemin relatif comme . pointerait vers la compétence elle-même.

2. Générer le diagramme

node scripts/class-architect.js generate "/chemin/absolu/vers/le/depot"

Options utiles (voir la référence CLI pour toutes) :

BesoinOption
Auteur dans le pied de page--author "Nom" --author-role "Ingénieur Logiciel"
Titre du diagramme--title "Service de Facturation"
Seulement une partie d'un grand dépôt--include "src/main/java/com/acme/facturation/**" (répétable)
Ignorer des dossiers--exclude "legacy/**" (répétable)
Restreindre les langages--languages java,sql
Analyser aussi les tests--include-tests
Vue / disposition initiale--view classes|er|overview|packages --layout grouped|layered|hierarchical|grid
Dossier de sortie personnalisé--out "/chemin/vers/sortie" (par défaut <depot>/.class-architect)
Garder les chemins locaux hors du HTML--hide-root (désactive les liens "ouvrir dans l'éditeur")

La commande affiche un résumé JSON sur stdout (la progression va sur stderr). Codes de sortie : 0 succès, 1 erreur d'utilisation, 2 aucun fichier source analysable, 3 échec de validation du modèle (rien n'est écrit), 4 erreur interne.

3. Vérifier le résultat

Lisez le résumé JSON (status, outputs, summary.counts, summary.insights, summary.edits, validation). Sorties écrites dans le dossier de sortie :

  • diagram.html - le diagramme interactif (ouvrez-le dans un navigateur ; il fonctionne hors ligne).
  • report.md / report.json - fichiers scannés, classes, interfaces, énumérations, relations, relations inférées, références non résolues, fichiers exclus avec raisons, avertissements, informations.
  • model.json - le modèle UML (source unique de vérité) ; overlay.json - modifications utilisateur, le cas échéant.

Si le code de sortie est 2, ajustez --include / --languages et dites quels dossiers ont été exclus et pourquoi (depuis les details JSON). Si le code de sortie est 3, rapportez les erreurs de validation ; ne modifiez pas manuellement le modèle pour les cacher.

Pour les dépôts avec des centaines de classes, le diagramme s'ouvre sur la Vue d'ensemble (modules) et permet à l'utilisateur de descendre dans les modules et paquets ; vous pouvez aussi générer des diagrammes ciblés avec --include pour un contexte délimité.

4. Présenter le diagramme à l'utilisateur

  • Donnez le chemin de diagram.html (et son URL file:// depuis outputs.diagramUrl). N'essayez pas de lancer un navigateur sauf si l'utilisateur le demande et que votre environnement le permet.
  • Résumez uniquement ce que dit le rapport : nombre de classes / interfaces / énumérations / relations, frameworks détectés, cycles de dépendances, constats architecturaux, références non résolues et avertissements. Citez les noms de classe exactement.
  • Mentionnez que les relations marquées inférées (conventions de nommage, typage structurel Go) doivent être vérifiées, et que les noms de tables/colonnes dérivés sont marqués comme dérivés.
  • Signalez les interactions principales : cliquer sur une classe ou une ligne pour l'inspecter (avec fichier et ligne source), recherche (/), filtres, vues (Vue d'ensemble, Paquets, Classes, ER Base de données), la loupe (L), le mode édition (E), Informations, Export. Détails : le guide du diagramme interactif.

5. Rafraîchir après des changements de code

Exécutez la même commande à nouveau. Elle :

  • ré-analyse uniquement les fichiers modifiés (cache incrémental),
  • conserve toutes les modifications utilisateur (depuis overlay.json et depuis les modifications enregistrées par l'utilisateur dans diagram.html avec le bouton Enregistrer),
  • signale les modifications dont la cible a disparu du code comme orphelines (conservées, jamais supprimées silencieusement) et les modifications qui entrent en conflit avec un changement source,
  • met en évidence les classes ajoutées / supprimées / modifiées par rapport à l'exécution précédente,
  • conserve une sauvegarde du diagramme précédent (diagram.prev.html).

Si l'utilisateur a téléchargé une copie du diagramme ailleurs, passez-la avec --edits "/chemin/vers/diagramme-sauvegarde.html".

6. Optionnel : sections de documentation

Le diagramme peut afficher une documentation supplémentaire en dessous (tableaux, flux, étapes, grilles d'énumérations, notes bannières) en utilisant les composants du modèle original. N'ajoutez que des faits vérifiés dans le code, et citez le fichier source. Écrivez un fichier JSON suivant le guide de configuration et passez --notes notes.json.

Règles

  • Ne jamais modifier, formater ou "corriger" le code source analysé dans le cadre de cette compétence.
  • Ne jamais inventer de classes, membres ou relations, et ne jamais présenter une relation inférée comme certaine.
  • Ne jamais supprimer ou écraser overlay.json ou un diagram.html sauvegardé par l'utilisateur : la CLI les fusionne pour vous.
  • Le dossier de sortie .class-architect/ est généré ; suggérez de l'ajouter à .gitignore sauf si l'utilisateur souhaite versionner le diagramme.
  • Ne téléchargez le diagramme ou le modèle nulle part : ils peuvent contenir une structure de code propriétaire.

Repli lorsque les scripts ne peuvent pas s'exécuter

Si Node.js 18+ n'est pas disponible ou que l'exécution de commandes n'est pas autorisée :

  1. Lisez les fichiers source pertinents et écrivez un modèle JSON à la main en suivant la référence du modèle UML. N'incluez que les éléments que vous avez vus dans le code, avec source.file et source.line ; définissez confidence: "inferred" pour tout ce qui n'est pas explicite.
  2. Copiez templates/viewer.html à l'emplacement où l'utilisateur souhaite le diagramme (par exemple class-diagram.html).
  3. Dans la copie, remplacez le texte null à l'intérieur de <script type="application/json" id="pca-data">null</script> par {"model": <votre modèle>, "overlay": null, "meta": {"title": "<nom du projet>"}}, en écrivant < comme &lt; dans le JSON.
  4. Alternativement, dites à l'utilisateur d'ouvrir templates/viewer.html et de glisser-déposer le fichier model.json sur la page.

La disposition, les interactions et les exportations fonctionnent alors dans le navigateur exactement comme pour un diagramme généré ; seuls l'extraction automatique, la détection des changements et le rapport de validation sont manquants. Dites clairement que le modèle a été écrit à la main.

Autres commandes

node scripts/class-architect.js analyze "/abs/repo"                       # modèle + rapport, pas de HTML
node scripts/class-architect.js render --model model.json --out diagram.html
node scripts/class-architect.js validate --model model.json --html diagram.html
node scripts/class-architect.js diff --base old-model.json --head model.json
node scripts/class-architect.js edits --from saved-diagram.html --out overlay.json
node scripts/class-architect.js viewer --out viewer.html
node scripts/class-architect.js doctor

Fichiers de référence (lire uniquement si nécessaire)

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community