Ever opened a new codebase and felt completely lost? CodeFlow turns any GitHub repository into an interactive architecture map in seconds.
- No installation required — runs entirely in your browser
- No data collection — your code never leaves your machine
- No accounts — just paste a URL and go
⚡ Paste URL → See Architecture → Make Better Decisions
See how your files connect at a glance. Click any node to highlight its dependencies. Drag, zoom, and explore.
"If I change this file, what breaks?" — CodeFlow answers this instantly. Select any file and see exactly how many files would be affected by changes.
Know who owns what. See the top contributors for any file based on git history. Perfect for code reviews and knowing who to ask.
Automatic detection of:
- Hardcoded secrets & API keys
- SQL injection vulnerabilities
- Dangerous
eval()usage - Debug statements in production code
Automatically identifies:
- Singleton patterns
- Factory patterns
- Observer/Event patterns
- React custom hooks
- Anti-patterns (God Objects, high coupling)
Get an instant A-F grade for your codebase based on:
- Dead code percentage
- Circular dependencies
- Coupling metrics
- Security issues
Color files by commit frequency to see which parts of your codebase are most actively developed.
Paste a PR URL to see exactly which files it affects and calculate the blast radius of proposed changes.
Your code stays on your machine. CodeFlow:
- ✅ Runs 100% in the browser
- ✅ Makes API calls directly from your browser to GitHub
- ✅ Never stores your code or tokens
- ✅ Works with private repos (just add your token locally)
- ✅ No analytics or tracking
Your GitHub token (if used) is only stored in your browser's memory and is cleared when you close the tab.
Just visit CodeFlow and paste any GitHub URL.
# Clone the repo
git clone https://github.com/braedonsaunders/codeflow.git
# That's it! Just open index.html in your browser
open index.htmlNo build process. No dependencies. No npm install. It's just one HTML file.
Just paste: facebook/react
Or full URL: https://github.com/facebook/react
- Create a GitHub Personal Access Token with
reposcope - Paste it in the Token field
- Analyze your private repos
After analysis, click 🔗 to copy a shareable link. Anyone can re-run the same analysis.
CodeFlow extracts functions and analyzes dependencies for:
| Language | Extensions |
|---|---|
| JavaScript | .js, .jsx |
| TypeScript | .ts, .tsx |
| Python | .py |
| Java | .java |
| Go | .go |
| Ruby | .rb |
| PHP | .php |
| Vue | .vue |
| Svelte | .svelte |
| Mode | Description |
|---|---|
| 📁 Folder | Color by directory structure |
| 🏗️ Layer | Color by architectural layer (UI, Services, Utils, etc.) |
| 🔥 Churn | Color by commit frequency (hot spots) |
| 💥 Blast | Color by impact when a file is selected |
| Key | Action |
|---|---|
Enter |
Analyze repository |
+ / - |
Zoom in/out |
Escape |
Close modal |
GitHub API has rate limits:
- Without token: 60 requests/hour
- With token: 5,000 requests/hour
For larger repositories, we recommend using a token.
┌─────────────────────────────────────────────────┐
│ CodeFlow │
├─────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Parser │ │ GitHub │ │ D3 │ │
│ │ Module │ │ API │ │ Graph │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │ │ │ │
│ └──────────────┼──────────────┘ │
│ │ │
│ ┌────────▼────────┐ │
│ │ React App │ │
│ │ (Single File) │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────┘
Zero dependencies to install. Everything runs from CDNs:
- React 18
- D3.js 7
- Babel (for JSX)
We love contributions! Here's how:
- Fork the repo
- Make your changes to
index.html - Test locally (just open in browser)
- Submit a PR
- Add support for more languages (Rust, C++, etc.)
- Improve function extraction regex
- Add more design pattern detection
- Export to different formats (PNG, PDF)
- Add code complexity metrics
Q: How does it work without a backend?
CodeFlow runs entirely in your browser. It calls the GitHub API directly from your browser and processes everything client-side.
Q: Is my code safe?
Yes. Your code is fetched directly from GitHub to your browser. Nothing is sent to any server we control. Check the source — it's one file!
Q: Can I use it offline?
Not currently, as it needs to fetch from GitHub. But you could fork it and add local file support!
Q: Why is analysis slow?
We make individual API calls for each file to get content. With a token, you get higher rate limits and faster analysis.
Q: How accurate is the dependency analysis?
It's based on function name matching, so it may miss some dynamic imports or renamed imports. It's designed for a quick overview, not 100% accuracy.
If you find CodeFlow useful, please ⭐ the repo!
MIT License — use it however you want.
Built with ⚡ by developers, for developers
Stop guessing. Start seeing.