[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3849":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},3849,"gitdiagram","ahmedkhaleel2004\u002Fgitdiagram","ahmedkhaleel2004","Free, simple, fast interactive diagrams for any GitHub repository","https:\u002F\u002Fgitdiagram.com",null,"TypeScript",15680,1207,52,21,0,5,13,94,23,95.15,"MIT License",false,"main",[26,27,28,29],"ai","code","github","system-design","2026-06-12 04:00:19","[![Image](.\u002Fdocs\u002Freadme_img.png \"GitDiagram Front Page\")](https:\u002F\u002Fgitdiagram.com\u002F)\n\n![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg)\n[![Kofi](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FKofi-F16061.svg?logo=ko-fi&logoColor=white)](https:\u002F\u002Fko-fi.com\u002Fahmedkhaleel2004)\n\n# GitDiagram\n\nTurn any GitHub repository into an interactive diagram for visualization in seconds.\n\nYou can also replace `hub` with `diagram` in any Github URL to access its diagram.\n\n## 🚀 Features\n\n- 👀 **Instant Visualization**: Convert any GitHub repository structure into a system design \u002F architecture diagram\n- 🎨 **Interactivity**: Click on components to navigate directly to source files and relevant directories\n- ⚡ **Fast Generation**: Powered by GPT-5-family models, with OpenAI for user-supplied browser keys and optional OpenRouter for self-hosted deployments\n- 🖼️ **Export Options**: Copy Mermaid code or download the generated diagram as PNG\n\n## ⚙️ Tech Stack\n\n- **Frontend**: Next.js, TypeScript, Tailwind CSS, ShadCN\n- **Backend**: FastAPI (Railway) or Next.js Route Handlers, selected explicitly via environment\n- **Storage**: Cloudflare R2 (diagram artifacts) + Upstash Redis (quota and failure summaries)\n- **AI**: OpenAI or OpenRouter (via `AI_PROVIDER`)\n- **Deployment**: Vercel (frontend) + Railway (backend)\n- **CI\u002FCD**: GitHub Actions\n- **Analytics**: PostHog, Api-Analytics\n\n## 🧭 Production Architecture\n\n- **Vercel** serves the Next.js frontend\n- **Railway** runs the long-lived FastAPI generation backend in production\n- **Cloudflare R2** stores successful diagram artifacts\n- **Upstash Redis** stores complimentary quota state and short-lived terminal failure summaries\n- **OpenAI `gpt-5.4-mini`** is the default server-side generation model\n\nThere is no Postgres or Neon runtime path anymore.\n\n## 🔄 Generation Backends\n\nGitDiagram supports two generation backends:\n- `fastapi`: external FastAPI service\n- `next`: in-repo Next.js Route Handlers that validate Mermaid in-process and can be deployed on Vercel with the checked-in Bun runtime config\n\nFrontend routing is explicit:\n- `NEXT_PUBLIC_GENERATION_BACKEND=fastapi` with `NEXT_PUBLIC_GENERATE_API_BASE_URL=https:\u002F\u002F\u003Cyour-backend>\u002Fgenerate` for the production-style path\n- or `NEXT_PUBLIC_GENERATION_BACKEND=next`\n\n## 🗂️ Where State Lives\n\n- **Successful generations**: R2 object per repo artifact\n- **Terminal failures with no saved artifact**: Upstash Redis TTL summary\n- **Complimentary daily quota**: Upstash Redis hash\n- **Private repo persistence**: separate R2 namespace derived from the provided GitHub token\n\n## 🤔 About\n\nI created this because I wanted to contribute to open-source projects but quickly realized their codebases are too massive for me to dig through manually, so this helps me get started - but it's definitely got many more use cases!\n\nGiven any public (or private!) GitHub repository it generates diagrams in Mermaid.js with GPT-5-family models. The default setup uses GPT-5.4 mini through OpenAI, while self-hosted operators can optionally point the backend at OpenRouter via environment configuration.\n\n## ⚙️ How GitDiagram Works\n\nWhen you submit a GitHub repo URL, GitDiagram asks the GitHub API for the repo's default branch, a recursive file tree, and the README, while filtering out noisy assets and dependency folders. It feeds that repo snapshot into a streamed generation pipeline where one model pass writes a plain-English architecture explanation and a second pass turns that explanation plus the file tree into a structured graph of systems, nodes, edges, and real repo paths.\n\nThat graph is validated against the actual file tree, retried with feedback if it contains bad paths or invalid connections, then compiled into Mermaid and validated again before it is shown. Any node tied to a real path becomes clickable back to GitHub, and the final explanation, graph, diagram, and terminal generation state are stored in Cloudflare R2 and Upstash Redis so the app can reopen an existing result or show where a run failed.\n\nOne implementation detail worth knowing: the Next backend validates Mermaid in-process in [`src\u002Fserver\u002Fgenerate\u002Fmermaid-validator.ts`](\u002FUsers\u002Fahmedkhaleel\u002Frepos\u002Fgitdiagram\u002Fsrc\u002Fserver\u002Fgenerate\u002Fmermaid-validator.ts), while the FastAPI backend invokes the thin Bun wrapper in [`backend\u002Fscripts\u002Fvalidate_mermaid.mjs`](\u002FUsers\u002Fahmedkhaleel\u002Frepos\u002Fgitdiagram\u002Fbackend\u002Fscripts\u002Fvalidate_mermaid.mjs) backed by [`backend\u002Flib\u002Fmermaid-validator.ts`](\u002FUsers\u002Fahmedkhaleel\u002Frepos\u002Fgitdiagram\u002Fbackend\u002Flib\u002Fmermaid-validator.ts). Both use the same Mermaid + DOMPurify bootstrap approach, so the Railway backend runtime remains intentionally mixed Python + Bun.\n\n## 🔒 How to diagram private repositories\n\nYou can simply click on \"Private Repos\" in the header and follow the instructions by providing a GitHub personal access token with the `repo` scope.\n\nYou can also self-host this app locally (backend separated as well!) with the steps below.\n\n## 🛠️ Self-hosting \u002F Local Development\n\nFor exact tool versions, machine setup, and verification, see `docs\u002Fdev-setup.md`.\n\n1. Clone the repository\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fahmedkhaleel2004\u002Fgitdiagram.git\ncd gitdiagram\n```\n\n2. Install root dependencies\n\n```bash\nbun install\n```\n\n3. Install backend FastAPI-side dependencies\n\n```bash\nbun run install:backend\n```\n\nThis keeps the backend's Python environment managed by `uv` and installs the backend Mermaid validator's Bun dependencies from `backend\u002Fbun.lock`.\n\n4. Set up environment variables (create .env)\n\n```bash\ncp .env.example .env\n```\n\nThen edit the `.env` file with your backend AI credentials and optional GitHub personal access token.\n\nUse `.env.example` as the canonical list of required and optional variables.\n\n5. Run the frontend\n\n```bash\nbun run dev\n```\n\nYou can now access the website at `localhost:3000`.\n\nThis is the simplest local mode and works with:\n- `NEXT_PUBLIC_GENERATION_BACKEND=next`\n\nRun FastAPI backend only if you want production parity:\n\n```bash\ndocker-compose up --build -d\ndocker-compose logs -f api\n```\n\nTo use the FastAPI backend from the frontend, set:\n- `NEXT_PUBLIC_GENERATION_BACKEND=fastapi`\n- `NEXT_PUBLIC_GENERATE_API_BASE_URL=http:\u002F\u002Flocalhost:8000\u002Fgenerate`\n\nTo use the built-in Next.js Route Handlers instead, set:\n- `NEXT_PUBLIC_GENERATION_BACKEND=next`\n\nQuick validation:\n\n```bash\nbun run check\nbun run test\nbun run build\n```\n\nRailway backend docs: `docs\u002Frailway-backend.md`.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Acknowledgements\n\nShoutout to [Romain Courtois](https:\u002F\u002Fgithub.com\u002Fcyclotruc)'s [Gitingest](https:\u002F\u002Fgitingest.com\u002F) for inspiration and styling\n","GitDiagram 是一个能够将任何 GitHub 仓库快速转换为交互式系统设计图的免费工具。其核心功能包括即时可视化、组件点击导航至源文件、基于GPT-5家族模型的快速生成以及多种导出选项如Mermaid代码或PNG图像。该工具采用TypeScript编写，前端使用Next.js和Tailwind CSS等现代技术栈构建，后端则利用FastAPI或Next.js路由处理器处理请求，并通过Cloudflare R2与Upstash Redis进行存储管理。GitDiagram适用于需要理解复杂代码库结构的各种场景，无论是开源贡献者还是软件架构师都能从中受益，尤其适合在加入新项目时快速了解整体架构。",2,"2026-06-11 02:56:39","top_language"]