How ak4off/gitdiagram works
GitDiagram turns a GitHub repository into an interactive architecture diagram and, optionally, a narrated explainer video. The main diagram workflow admits a generation request, retrieves repository metadata and selected source context, streams model-generated architecture and explanation, then compiles a diagram for the repository page. A separate cost endpoint estimates generation from the same bounded repository context. Video generation and MP4 rendering are distinct workflows, alongside browsing existing diagrams and videos. The tree and excerpts establish key route calls; links among unsampled subsystems are omitted where ownership is uncertain.
Main entry points: stream/route.ts Generation stream · generate/route.ts Video generation API · cost/route.ts Cost estimate API · render/route.ts MP4 render API
Components 29
Diagram generation
- Repository page
src/app/[username]/[repo]/repo-page-client.tsx - Diagram workspace
src/components/generation/repository-workspace.tsx - Generation stream
src/app/api/generate/stream/route.ts - Request admission
src/server/generate/request-admission.ts - Repository ingestion
src/server/generate/github.ts - Source selection
src/server/generate/source-context.ts - Context preparation
src/server/generate/repository-context.ts - Explanation stream
src/server/generate/openai.ts - Graph planning
src/server/generate/graph-planner.ts - Diagram compilation
src/server/generate/graph.ts - Cost estimate API
src/app/api/generate/cost/route.ts
Video experience
- Video watch page
src/app/[username]/[repo]/video/video-watch-page-client.tsx - Explainer player
src/components/explainer/explainer-video.tsx - Video availability API
src/app/api/video/route.ts - Video generation API
src/app/api/video/generate/route.ts - Video generation
src/server/explainer/generate.ts - Planner selection
src/server/explainer/planner.ts - Video artifacts
src/server/explainer/store.ts - MP4 render API
src/app/api/video/render/route.ts - Segment renderer
src/server/explainer/segments.ts
Browse and share
- Browse catalog
src/app/browse/page.tsx - Catalog feature
src/features/browse/catalog.ts - Sponsor redirect
src/app/out/[campaign]/route.ts
Operations
- Admin dashboard
src/app/admin/page.tsx - Admin state API
src/app/api/admin/state/route.ts
Other components
- Repository visitor
- GitHub
- AI providers
- Artifact storage
Connections 31
- Repository visitor → Repository page: opens repository
- Repository page → Diagram workspace: renders workspace
- Repository visitor → Generation stream: requests diagram
- Generation stream → Request admission: admits request
- Generation stream → Repository ingestion: loads repository
- Repository ingestion → GitHub: fetches metadata
- Generation stream → Source selection: fetches source
- Source selection → GitHub: reads source
- Generation stream → Explanation stream: streams completion
- Explanation stream → AI providers: requests completion
- Generation stream → Graph planning: validates graph
- Graph planning → AI providers: plans graph
- Generation stream → Diagram compilation: compiles diagram
- Repository visitor → Cost estimate API: requests estimate
- Cost estimate API → Repository ingestion: loads repository
- Cost estimate API → Context preparation: prepares context
- Repository visitor → Video watch page: opens video
- Video watch page → Explainer player: shows player
- Repository visitor → Video availability API: checks availability
- Video availability API → Video artifacts: reads artifact
- Repository visitor → Video generation API: requests video
- Video generation API → Video generation: starts generation
- Video generation API → Planner selection: chooses planner
- Video generation API → Video artifacts: checks artifact
- Repository visitor → MP4 render API: requests MP4
- MP4 render API → Video artifacts: reads artifact
- MP4 render API → Segment renderer: renders segments
- Repository visitor → Browse catalog: browses repositories
- Repository visitor → Sponsor redirect: follows sponsor link
- Repository visitor → Admin dashboard: opens admin
- Admin dashboard → Admin state API: loads state