Consider GitHub 10K+ repositors without reading code

Photo by the author Canva

Moving and understanding of gigantic code bases can be complex, especially for novel programmers joining the project or during the re -visit of older repositories. Customary methods of understanding code structures include reading by numerous files and documentation, which can be time consuming and susceptible to errors. Gitdiagram offers a solution by transforming Github repositories into interactive diagrams, ensuring a visual representation of the CODE base architecture. This tool helps to understand elaborate systems and enhance cooperation between teams of programmers. In this article I will lead you by step by step the process of using Gitdiagram locally. So without further waiting, let’s start.

Step by step guide to employ Gitdiagram locally

Step 1: Clon the Gitdiagram repository

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

Step 2: Install dependencies

This downloads and installs dependencies in Node_Modules.

Before starting the PNPM installation, make sure you have globally installed node.js and PNPM.

• To install node.js, download it with nodejs.org
• To install PNPM, run the following command:

Step 3: Configure environmental variables

Edit . To attach the API OPENAI / Anthropic / OpenRouter key and, optionally, your GitHub access token.

Step 4: Start Services

docker-compose up --build -d

The Fastapi server will be available at Localhost: 8000. You will see the following message on the server side.

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

Step 5: Initiate the database

Run the following commands to configure the database:

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

After displaying the Principle to generate a random password, enter yes. The Postgres database will start in the container at Localhost: 5432.
Note: When I tried to run this command, I got this mistake:

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

It turns out that I haven’t installed Drizzle-Kit. So if you see it, just run:

Then PNPM DB: Push worked well and gave me a way out:

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

Step 6: Start Frontend

You can now access the website at Localhost: 3000 and edit speed limits defined in Backend/app/router/general.py in the Generate Decorator. Let’s try to visualize the GitHub repository of the Fastapi library.

Frontend interface:

Exit:

Final thoughts

It’s a great idea and a really useful repository. Personally, I felt the need for something like that in my own projects, so I appreciate the effort and vision of it.

To say, offering an objective opinion – there is definitely a place to improve.

One repetitive problem I came up with:

Syntax error in text mermaid version 11.4.

According to the project owner Ahmedkhaleel2004This error usually means that LLM has generated the incorrect syntax of Mermaid.js.

I tried to solve this problem in many ways, but ultimately I think there is no reliable amendment – this is mainly LLM limitation. If there was a way to confirm the Mermaid.js code, it would assist, but for now I’m not sure how.

He also noted that the current prompt (in the “hint”, in particular the third, which generates the Syrena code) is already trying to enforce the correct syntax – but this is not reliable, and novel syntactic problems still occur.

✅ The solution I found online that worked
While browsing GitHub problems, I came across a bypass made available by another user who actually worked for me:

Add this to the prompt, adjust the diagram: Ignore the Mermaid syntax problem in version 11.4.1 and regenerate the remaining part of the scheme.

Using this line helped bypass the error. Although some components may still be missing, at least it created a partial scheme-to ensure understanding the code base at a high level.

Canwal Mehreen Kanwal is a machine learning engineer and a technical writer with a deep passion for data learning and AI intersection with medicine. He is the co -author of the ebook “maximizing performance from chatgpt”. As a Google 2022 generation scholar for APAC, it tells diversity and academic perfection. It is also recognized as a variety of terradate at Tech Scholar, Mitacs Globalink Research Scholar and Harvard Wecode Scholar. Kanwalwal is a heated supporter of changes, after establishing FemCodes to strengthen women in the STEM fields.