ahmedkhaleel2004/gitdiagram

What it solves

GitDiagram transforms complex GitHub repositories into interactive architecture diagrams. Instead of manually mapping out a codebase or browsing through folders, developers can quickly visualize the system-level structure and relationships within a project.

How it works

The tool fetches a repository's default branch, file tree, and README via the GitHub API. It then uses a two-stage AI process: first, it generates a plain-English explanation of the architecture, and second, it produces a structured graph AST (Abstract Syntax Tree) containing nodes, edges, and paths. This AST is validated against the actual repository files and then compiled into a Mermaid diagram that is rendered in the browser.

Who it’s for

Developers and architects who need to understand the high-level design of a public or private GitHub repository quickly without reading every file manually.

Highlights

• Architecture-focused: Maps system-level graphs rather than simple folder structures.
• Interactive: Components in the diagram link directly to the corresponding files or directories on GitHub.
• Private Repo Support: Allows users to provide a GitHub token locally in the browser to visualize private codebases.
• Streaming Generation: Displays the AI-generated explanation in real-time as the graph is being planned.
• Export Options: Supports downloading diagrams as PNGs or copying the Mermaid source code.