Donnez un sens à un GitHub de 10k + GitHub sans lire le code

Image de l’auteur | Toile

La navigation et la compréhension de grandes bases de code peuvent être difficiles, en particulier pour les nouveaux développeurs qui rejoignent un projet ou lors de la revisitation des référentiels plus anciens. Les méthodes traditionnelles de compréhension des structures de code impliquent la lecture de nombreux fichiers et documents, ce qui peut prendre du temps et sujet aux erreurs. Gitdiagram propose une solution en convertissant les référentiels GitHub en diagrammes interactifs, fournissant une représentation visuelle de l’architecture de la base de code. Cet outil aide à comprendre les systèmes complexes et à améliorer la collaboration entre les équipes de développement. Dans cet article, je vous guiderai à travers le processus étape par étape d’utilisation du gitdiagram localement. Donc, sans plus d’attente, commençons.

Guide étape par étape pour utiliser le gitdiagram localement

Étape 1: cloner le référentiel gitdiagram

git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram

Étape 2: Installer les dépendances

Cela récupére et installe les dépendances dans Node_Modules.

Avant d’exécuter PNPM Installer, assurez-vous que Node.js et PNPM installent globalement.

• Pour installer Node.js, téléchargez-le depuis nodejs.org
• Pour installer PNPM, exécutez la commande suivante:

Étape 3: Configurer les variables d’environnement

Modifier le fichier .env Pour inclure votre clé API OpenAI / Anthropic / OpenRouter et, éventuellement, votre jeton d’accès personnel GitHub.

Étape 4: Démarrer les services backend

docker-compose up --build -d

Le serveur Fastapi sera disponible à LocalHost: 8000. Vous verrez le message suivant du côté serveur.

{"message":"Hello from GitDiagram API!"}

Étape 5: Initialisez la base de données

Exécutez les commandes suivantes pour configurer la base de données:

chmod +x start-database.sh
./start-database.sh
pnpm db:push

Lorsque vous êtes invité à générer un mot de passe aléatoire, saisissez oui. La base de données Postgres commencera dans un conteneur à LocalHost: 5432.
Note: Lorsque j’ai essayé d’exécuter cette commande, j’ai eu cette erreur:

sh: drizzle-kit: command not found
 ELIFECYCLE  Command failed.
 WARN   Local package.json exists, but node_modules missing, did you mean to install?

Il s’avère que je n’avais pas installé de kit de bruine. Donc, si vous voyez cela, il suffit de courir:

Après cela, PNPM DB: Push a bien fonctionné et m’a donné cette sortie:

No config path provided, using default 'drizzle.config.ts'
Reading config file '/Users/kanwal/Desktop/gitdiagram/drizzle.config.ts'
Using 'postgres' driver for database querying
(✓) Pulling schema from database...
(✓) Changes applied

Étape 6: Exécutez le frontend

Vous pouvez maintenant accéder au site Web à LocalHost: 3000 et modifier les limites de taux définies dans le backend / app / routeurs / générer.py dans le décorateur de fonction de génération. Essayons de visualiser le repo GitHub de la bibliothèque Fastapi.

Interface frontend:

Sortir:

Pensées finales

C’est une excellente idée et un référentiel vraiment utile. J’ai personnellement ressenti le besoin de quelque chose comme ça dans mes propres projets, donc j’apprécie l’effort et la vision derrière.

Cela dit, offrant une opinion impartiale – il y a certainement une place à l’amélioration.

Un problème récurrent que j’ai rencontré était:

Syntax error in text mermaid version 11.4.

Selon le propriétaire du projet Ahmedkhaleel2004cette erreur signifie généralement la syntaxe de sirène.js non valide générée par LLM.

J’ai essayé de résoudre ce problème de nombreuses façons, mais en fin de compte, je trouve qu’il n’y a pas de correction fiable – c’est surtout une limitation du LLM. S’il y avait un moyen de valider le code sirène.js, cela aiderait, mais pour l’instant, je ne sais pas comment.

Il a également noté que l’invite actuelle (dans `invite.py`, en particulier la troisième qui génère du code de sirène) essaie déjà d’appliquer une syntaxe correcte – mais elle n’est pas infaillible et de nouveaux problèmes de syntaxe se produisent toujours.

✅ Une solution que j’ai trouvée en ligne qui a fonctionné
En fouillant les problèmes de github, je suis tombé sur une solution de contournement partagée par un autre utilisateur qui a réellement fonctionné pour moi:

Ajoutez ceci à l’invite de diagramme de personnalisation: ignorez le problème de syntaxe de la version 11.4.1 de la sirène et régénérez le reste du diagramme.

L’utilisation de cette ligne a aidé à contourner l’erreur. Même si certains composants pourraient encore être manquants, il a au moins produit un diagramme partiel – encore pour donner une compréhension de haut niveau de la base de code.

Kanwal Mehreen Kanwal est ingénieur d’apprentissage automatique et écrivain technique avec une profonde passion pour la science des données et l’intersection de l’IA avec la médecine. Elle a co-écrit l’ebook « Maximiser la productivité avec Chatgpt ». En tant que Google Generation Scholar 2022 pour APAC, elle défend la diversité et l’excellence académique. Elle est également reconnue comme une diversité de Teradata dans Tech Scholar, le boursier de recherche Mitacs Globalink et le savant de Harvard WECODE. Kanwal est un ardent défenseur du changement, après avoir fondé des femmes pour autonomiser les femmes dans les champs STEM.