How mengtang1114-forks/gitdiagram works
GitDiagram is a web product for generating interactive repository architecture diagrams and narrated explainer videos. The diagram workflow takes a repository request through GitHub ingestion, bounded source-context selection, AI explanation and graph generation, then serves an interactive diagram with linked code and export actions. A separate video workflow creates and stores a narrated film, offers playback and on-demand MP4 rendering. The graph emphasizes documented capabilities and sampled orchestration; links between unsampled internals are omitted where call ownership is uncertain.
Main entry points: route.ts Diagram endpoints · store.ts Video artifacts · repo-page-client.tsx Repository page · video-watch-page-client.tsx Video watch page
Components 28
Diagram workflow
- Repository page
src/app/[username]/[repo]/repo-page-client.tsx - Diagram endpoints
src/app/api/generate/stream/route.ts - GitHub ingestion
src/server/generate/github.ts - Source context
src/server/generate/repository-context.ts - AI generation
src/server/generate/graph-planner.ts - Graph compilation
src/server/generate/graph.ts - Diagram state
src/server/storage/diagram-state.ts - Interactive workspace
src/components/generation/repository-workspace.tsx - Diagram export
src/features/diagram/export.ts
Explainer videos
- Video watch page
src/app/[username]/[repo]/video/video-watch-page-client.tsx - Video endpoints
src/app/api/video/route.ts - Video generation
src/app/api/video/generate/route.ts - Narration and scenes
src/server/explainer/generate.ts - Video artifacts
src/server/explainer/store.ts - Video player
src/components/explainer/explainer-video.tsx - MP4 rendering
src/app/api/video/render/route.ts - Segment renderer
src/server/explainer/segments.ts - Scene engine
public/video-engine/stage.js
Discovery and browse
- Browse catalog
src/app/browse/page.tsx - Catalog service
src/features/browse/catalog.ts - Browse index
src/server/browse-index-cache.ts
Operations and sponsors
- Admin operations
src/app/api/admin/state/route.ts - Operational state
src/server/admin/state.ts - Sponsor redirect
src/app/out/[campaign]/route.ts
Other components
- Repository visitor
- GitHub
- AI provider
- Sponsor destination
Connections 28
- Repository visitor → Repository page: opens repository
- Repository page → Diagram endpoints: requests diagram
- Diagram endpoints → GitHub ingestion: fetches repository
- GitHub ingestion → GitHub: reads tree and files
- Diagram endpoints → Source context: selects source
- Diagram endpoints → AI generation: generates graph
- AI generation → AI provider: streams completion
- Diagram endpoints → Graph compilation: compiles graph
- Diagram endpoints → Diagram state: persists state
- Repository page → Interactive workspace: renders workspace
- Interactive workspace → Diagram export: exports diagram
- Repository visitor → Video watch page: opens video
- Video watch page → Video endpoints: checks availability
- Video endpoints → Video artifacts: reads artifact
- Video watch page → Video player: plays video
- Repository visitor → Video generation: requests generation
- Video generation → Narration and scenes: starts job
- Video generation → Video artifacts: checks stored video
- Narration and scenes → Video artifacts: stores artifact
- MP4 rendering → Video artifacts: reads artifact
- MP4 rendering → Segment renderer: renders segments
- Segment renderer → Scene engine: renders scenes
- Repository visitor → Browse catalog: browses
- Browse catalog → Catalog service: loads catalog
- Catalog service → Browse index: reads index
- Admin operations → Operational state: reads state
- Repository visitor → Sponsor redirect: follows sponsor link
- Sponsor redirect → Sponsor destination: redirects to