How cemdrk/gitdiagram works
GitDiagram accepts a GitHub repository, fetches its structure and README, uses Claude to produce an explanation and Mermaid diagram, then caches and displays the result. Users can request cost estimates, modify or regenerate diagrams, and provide an API key for large repositories. The graph covers the documented interactive source navigation and customization capabilities; some backend route internals were not excerpted, so those links are marked unverified.
Main entry points: useDiagram.ts Diagram workflow · generate.py Generate and cost routes · page.tsx Repository page · claude_service.py Claude client
Components 18
Web experience
- Repository form
src/components/main-card.tsx - Repository page
src/app/[username]/[repo]/page.tsx - Diagram workflow
src/hooks/useDiagram.ts - Backend client
src/lib/fetch-backend.ts - Mermaid display
src/components/mermaid-diagram.tsx
Diagram generation
- FastAPI application
backend/app/main.py - Generate and cost routes
backend/app/routers/generate.py - Modify route
backend/app/routers/modify.py - GitHub repository fetcher
backend/app/services/github_service.py - Claude client
backend/app/services/claude_service.py - Diagram prompts
backend/app/prompts.py
Repository data
- Diagram cache actions
src/app/_actions/cache.ts - Repository metadata actions
src/app/_actions/repo.ts - Diagram cache
src/server/db/schema.ts
External services
- GitHub
- Anthropic Claude
- PostgreSQL
Other components
- Repository visitor
Connections 21
- Repository visitor → Repository form: enters repository
src/components/main-card.tsx - Repository form → Repository page: navigates to
src/components/main-card.tsx - Repository page → Diagram workflow: loads diagram
src/app/[username]/[repo]/page.tsx - Diagram workflow → Backend client: requests generation
src/hooks/useDiagram.ts - Diagram workflow → Diagram cache actions: checks and saves
src/hooks/useDiagram.ts - Diagram workflow → Repository metadata actions: reads generation date
src/hooks/useDiagram.ts - Diagram workflow → Repository page: provides diagram state
src/app/[username]/[repo]/page.tsx - Repository page → Mermaid display: renders diagram
src/app/[username]/[repo]/page.tsx - Backend client → FastAPI application: sends API requests
src/lib/fetch-backend.ts - Backend client → Diagram cache actions: reads and caches
src/lib/fetch-backend.ts - Diagram cache actions → Diagram cache: reads and writes
src/app/_actions/cache.ts - FastAPI application → Generate and cost routes: registers routes
backend/app/main.py - FastAPI application → Modify route: registers routes
backend/app/main.py - Generate and cost routes → GitHub repository fetcher: fetches repository data
backend/app/routers/generate.py - Generate and cost routes → Claude client: requests generation
backend/app/routers/generate.py - Generate and cost routes → Diagram prompts: uses prompts
backend/app/routers/generate.py - GitHub repository fetcher → GitHub: fetches tree and README
backend/app/services/github_service.py - Claude client → Anthropic Claude: sends prompts
backend/app/services/claude_service.py - Modify route → Claude client: requests diagram changes
backend/app/routers/modify.py - Modify route → Diagram prompts: uses modification prompts
backend/app/routers/modify.py - Generate and cost routes → Claude client: estimates token cost
backend/app/routers/generate.py