readme-visualizer
Turns a dense GitHub README into architecture, dependency and flow diagrams.
- Domain
- Developer visualisation
- Built with
- TypeScript, Next.js, Gemini API
- Source
- github.com/notsointresting/readme-visualizer
The problem
Long READMEs bury the architecture, data flow and setup steps in walls of text.
How it works
- Fetches READMEs and package.json files through the GitHub GraphQL API.
- Gemini turns the markdown into diagram data, validated against strict Zod schemas.
- Renders architecture graphs, dependency trees and Mermaid flowcharts.
- Hardened with an SSRF allow-list, sanitisation, CSP and rate limiting.
Where it landed
Diagrams with no sign-up, exportable as PNG, SVG or Mermaid.
Stack
- TypeScript
- Next.js
- Gemini API
- GitHub GraphQL
- React Flow
- Mermaid
- D3.js