explaingit

ahmedkhaleel2004/gitdiagram

Analysis updated 2026-06-24

★ 15,590TypeScriptAudience · vibe coderComplexity · 3/5Setup · moderate

TLDR

Turns any GitHub repo into an interactive Mermaid architecture diagram with clickable nodes that link to the underlying files. Swap hub for diagram in any GitHub URL.

Mindmap

mindmap
  root((gitdiagram))
    Inputs
      GitHub repo URL
      File tree and README
      Optional access token
    Outputs
      Mermaid architecture diagram
      Plain English explanation
      Clickable file links
    Use Cases
      Visualize an unfamiliar repo
      Onboard new contributors
      Explore private repos
    Tech Stack
      TypeScript
      Next
      FastAPI
      Mermaid
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Paste a GitHub URL and get a clickable architecture diagram for an unfamiliar repo

USE CASE 2

Generate onboarding visuals for a private repo using a personal access token

USE CASE 3

Self host gitdiagram with Bun and Docker to avoid the public site

USE CASE 4

Embed an architecture overview in a code review or design doc

What is it built with?

TypeScriptNextFastAPIMermaidCloudflare R2

How does it compare?

ahmedkhaleel2004/gitdiagramgetmaxun/maxunmicrosoft/data-formulator
Stars15,59015,56415,549
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity3/53/53/5
Audiencevibe coderdatadata

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Self hosting needs Bun Docker a GitHub token and an OpenAI API key for the diagram generation.

In plain English

GitDiagram is a TypeScript web application that converts any GitHub repository into an interactive visual diagram in seconds. You can use it by visiting gitdiagram.com and pasting a repo URL, or by replacing "hub" with "diagram" in any GitHub URL. The diagram shows the architecture and structure of the codebase, and each node in the diagram is clickable, clicking it takes you directly to the corresponding source file or directory on GitHub. Under the hood, the tool fetches the repository's file tree and README through the GitHub API, then uses GPT-5-family AI models to first write a plain-English architecture explanation and then convert that explanation into a structured diagram in Mermaid.js (a format for drawing diagrams as text). The diagram is validated against the actual file tree before being shown, with automatic retries if problems are found. Diagrams are cached in Cloudflare R2 storage so repeat visits are fast. Private repositories are supported by providing a GitHub personal access token. The frontend is built with Next.js and TypeScript and deployed on Vercel, while the backend runs as a FastAPI service on Railway. The project can also be self-hosted locally using Bun and Docker.

Copy-paste prompts

Prompt 1
Show me how to self host gitdiagram locally with Bun Docker and my own OpenAI key
Prompt 2
Walk through the prompt chain that turns a repo file tree into a validated Mermaid diagram
Prompt 3
Add support for GitLab repos to gitdiagram and outline the changes to the FastAPI backend
Prompt 4
Write a script that calls the gitdiagram backend for a list of repos and saves diagrams to disk

Frequently asked questions

What is gitdiagram?

Turns any GitHub repo into an interactive Mermaid architecture diagram with clickable nodes that link to the underlying files. Swap hub for diagram in any GitHub URL.

What language is gitdiagram written in?

Mainly TypeScript. The stack also includes TypeScript, Next, FastAPI.

How hard is gitdiagram to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is gitdiagram for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub ahmedkhaleel2004 on gitmyhub

Verify against the repo before relying on details.

Alternatives & similar repos