[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73627":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":16,"starSnapshotCount":16,"syncStatus":39,"lastSyncTime":40,"discoverSource":41},73627,"codeflow","braedonsaunders\u002Fcodeflow","braedonsaunders","Paste any GitHub URL → interactive architecture map. See how files connect, find what breaks if you change something. No install, no accounts — runs entirely in your browser.","https:\u002F\u002Fcodeflow-five.vercel.app",null,"HTML",3420,541,18,1,0,39,158,388,117,107.2,false,"main",true,[26,27,28,29,30,31,32,33,34,35],"architecture","browser-based","code-analysis","codebase-visualization","d3js","dependency-graph","developer-tools","github-api","single-file","visualization","2026-06-12 04:01:10","\u003Cdiv align=\"center\">\n\n# CodeFlow\n\n### Visualize Your Codebase Architecture in Seconds\n\n**Zero setup. No installation. Just paste a GitHub URL.**\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-green.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n[![PRs Welcome](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-welcome-brightgreen.svg)](http:\u002F\u002Fmakeapullrequest.com)\n\n[**Try it Now**](https:\u002F\u002Fcodeflow-five.vercel.app\u002F) · [Report Bug](https:\u002F\u002Fgithub.com\u002Fbraedonsaunders\u002Fcodeflow\u002Fissues) · [Request Feature](https:\u002F\u002Fgithub.com\u002Fbraedonsaunders\u002Fcodeflow\u002Fissues)\n\n\u003Cimg src=\".\u002Fscreenshot.png\" alt=\"CodeFlow Screenshot\" width=\"100%\"\u002F>\n\n\u003C\u002Fdiv>\n\n---\n\n## Why CodeFlow?\n\nEver opened a new codebase and felt completely lost? **CodeFlow** turns any GitHub repository or local codebase into an interactive architecture map in seconds.\n\n- **No installation required** — runs entirely in your browser\n- **No data collection** — your code never leaves your machine\n- **No accounts** — just paste a URL or select local files and go\n- **Works offline** — analyze local files without internet\n\n```\nPaste URL \u002F Select Files -> See Architecture -> Make Better Decisions\n```\n\n---\n\n## Features\n\n### Interactive Dependency Graph\nSee how your files connect at a glance. Click any node to highlight its dependencies. Drag, zoom, and explore.\n\n### Blast Radius Analysis\n*\"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.\n\n### Code Ownership\nKnow who owns what. See the top contributors for any file based on git history. Perfect for code reviews and knowing who to ask.\n\n### Security Scanner\nAutomatic detection of:\n- Hardcoded secrets & API keys\n- SQL injection vulnerabilities\n- Dangerous `eval()` usage\n- Debug statements in production code\n\n### Pattern Detection\nAutomatically identifies:\n- Singleton patterns\n- Factory patterns\n- Observer\u002FEvent patterns\n- React custom hooks\n- Anti-patterns (God Objects, high coupling)\n\n### Health Score\nGet an instant A-F grade for your codebase based on:\n- Dead code percentage\n- Circular dependencies\n- Coupling metrics\n- Security issues\n\n### Activity Heatmap\nColor files by commit frequency to see which parts of your codebase are most actively developed.\n\n### PR Impact Analysis\nPaste a PR URL to see exactly which files it affects and calculate the blast radius of proposed changes.\n\n### CodeFlow Card (GitHub Action)\nHealth grade, scale, fragility, and hidden costs as a self-updating SVG on your README — recomputed every merge, with optional thermal-receipt PR comments. See [card\u002F](.\u002Fcard\u002F).\n\n### Markdown & Wiki-Link Graph\nPoint CodeFlow at an Obsidian vault or any markdown directory to see notes as a connected graph. Both `[[wiki-links]]` and `[text](.\u002Frelative.md)` links become edges; each note is a `note`-layer node (distinct color) with a `dependencies[]` array in the JSON export.\n\n### Local File Analysis\nAnalyze code directly from your computer without uploading to GitHub:\n- **Privacy First:** Your code never leaves your machine\n- **Offline Support:** Works without internet connection\n- **Drag & Drop:** Simply drag files or folders to analyze\n- **Folder Scanning:** Recursively analyze entire project structures\n- **Exclude Patterns:** Skip attachments, caches, generated assets, and other irrelevant paths before scanning\n- **Instant Results:** All processing happens in your browser\n\n---\n\n## CodeFlow Card\n\nA GitHub Action that drops an auto-updating SVG card on your README, recomputed on every merge by the same analyzer as the web app. Five styles, accent presets, opt-in PR receipts, and a privacy mode for public repos. The card adapts to the viewer's light\u002Fdark theme automatically.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fcompact.svg\" alt=\"CodeFlow card — compact style\" width=\"100%\" \u002F>\n\u003C\u002Fp>\n\nSee [card\u002F](.\u002Fcard\u002F) for setup, or jump to the [style gallery](#card-style-gallery) below.\n\n---\n\n## Privacy First\n\n**Your code stays on your machine.** CodeFlow:\n\n- Runs 100% in the browser\n- Makes API calls directly from your browser to GitHub\n- Never stores your code or tokens\n- Works with private repos (just add your token locally)\n- No analytics or tracking\n\nYour GitHub token (if used) is only stored in your browser's memory and is cleared when you close the tab.\n\n---\n\n## Quick Start\n\n### Option 1: Use Online (Recommended)\nJust visit [CodeFlow](https:\u002F\u002Fcodeflow-five.vercel.app\u002F) and paste any GitHub URL.\n\n### Option 2: Self-Host\n```bash\n# Clone the repo\ngit clone https:\u002F\u002Fgithub.com\u002Fbraedonsaunders\u002Fcodeflow.git\n\n# That's it! Just open index.html in your browser\nopen index.html\n```\n\nNo build process. No npm install. It is a single `index.html` app that loads pinned browser dependencies from CDNs.\n\n### Option 3: Analyze Local Files\nYou can now analyze code directly from your local machine without uploading to GitHub:\n\n1. Open CodeFlow in your browser\n2. Click the \"Open Folder\" button\n3. Select the folder or files you want to analyze\n4. CodeFlow will process them entirely in your browser\n\n**Perfect for:**\n- Private projects you don't want to upload\n- Offline development\n- Quick local analysis before committing\n- Working with sensitive code\n\n---\n\n## Usage\n\n### Public Repositories\n```\nJust paste: facebook\u002Freact\nOr full URL: https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\n```\n\n### Private Repositories\n1. Create a [GitHub Personal Access Token](https:\u002F\u002Fgithub.com\u002Fsettings\u002Ftokens) with `repo` scope\n2. Paste it in the Token field\n3. Analyze your private repos\n\n### Local Files\nClick the \"Open Folder\" button to analyze code from your computer:\n- **Folder Analysis:** Select a folder to analyze all supported files recursively\n- **File Selection:** Choose specific files to analyze\n- **Drag & Drop:** Drag files or folders directly onto the page\n- **Custom Excludes:** Add patterns like `uploads\u002F**`, `**\u002Fcache\u002F**`, or `*.png` before scanning\n\nAll processing happens locally in your browser - nothing is uploaded.\n\n### Shareable Links\nAfter analysis, click the \"Share\" button to copy a shareable link. Anyone can re-run the same analysis.\n\n### Export Reports\nExport your analysis in multiple formats for further processing:\n\n- **JSON Report** - Complete analysis data including:\n  - Repository metadata and health score\n  - All files with functions, dependencies, and churn data\n  - Complete function statistics with callers and usage metrics\n  - Security issues, patterns, and architecture issues\n  - Duplicate code detection and layer violations\n  - Suggestions and recommendations\n  - Language breakdown and folder structure\n  \n  Perfect for programmatic analysis, CI\u002FCD integration, or custom reporting tools.\n\n- **Markdown Report** - Human-readable formatted report\n- **Plain Text Report** - Simple text format\n- **SVG Image** - Export the dependency graph visualization\n- **PDF Document** - Export the dependency graph as a printable PDF\n- **Raw JSON** - Simplified data export\n\nClick the \"Export\" button in the top bar after analysis to access all export options.\n\n---\n\n## Supported Languages\n\nCodeFlow extracts functions and analyzes dependencies for:\n\n| Language | Extensions |\n|----------|------------|\n| JavaScript | `.js`, `.jsx` |\n| TypeScript | `.ts`, `.tsx` |\n| HTML (inline scripts) | `.html`, `.htm`, `.xhtml` |\n| Python | `.py` |\n| Java | `.java` |\n| Go | `.go` |\n| Ruby | `.rb` |\n| PHP | `.php` |\n| Vue | `.vue` |\n| Svelte | `.svelte` |\n| Rust | `.rs` |\n| C | `.c`, `.h` |\n| C++ | `.cpp`, `.cc`, `.cxx`, `.hpp`, `.hh`, `.hxx` |\n| C# | `.cs` |\n| Swift | `.swift` |\n| Kotlin | `.kt`, `.kts` |\n| Scala | `.scala`, `.sc` |\n| Groovy | `.groovy`, `.gvy` |\n| Elixir | `.ex`, `.exs` |\n| Erlang | `.erl`, `.hrl` |\n| Haskell | `.hs`, `.lhs` |\n| Lua | `.lua` |\n| R | `.r`, `.R` |\n| Julia | `.jl` |\n| Dart | `.dart` |\n| Perl | `.pl`, `.pm` |\n| Shell | `.sh`, `.bash`, `.zsh`, `.fish` |\n| PowerShell | `.ps1`, `.psm1`, `.psd1` |\n| F# | `.fs`, `.fsi`, `.fsx` |\n| OCaml | `.ml`, `.mli` |\n| Clojure | `.clj`, `.cljs`, `.cljc` |\n| Elm | `.elm` |\n| VBA | `.vba`, `.bas`, `.cls`, `.xlsm`, `.xlsb`, `.xlam` |\n\n---\n\n## Visualization Modes\n\n| Mode | Description |\n|------|-------------|\n| **Folder** | Color by directory structure |\n| **Layer** | Color by architectural layer (UI, Services, Utils, etc.) |\n| **Churn** | Color by commit frequency (hot spots) |\n| **Blast** | Color by impact when a file is selected |\n\n---\n\n## Keyboard Shortcuts\n\n| Key | Action |\n|-----|--------|\n| `Enter` | Analyze repository |\n| `+` \u002F `-` | Zoom in\u002Fout |\n| `Escape` | Close modal |\n\n---\n\n## API Limits\n\nGitHub API has rate limits:\n- **Without token:** 60 requests\u002Fhour\n- **With Personal Access Token:** 5,000 requests\u002Fhour\n- **With GitHub App:** 5,000 requests\u002Fhour per installation\n\n### Authentication Methods\n\n#### Personal Access Token (PAT)\n1. Create a [GitHub Personal Access Token](https:\u002F\u002Fgithub.com\u002Fsettings\u002Ftokens) with `repo` scope\n2. Paste it in the Token field\n3. Analyze your private repos\n\n#### GitHub App Authentication\nFor teams and organizations, GitHub App provides better security and higher rate limits:\n\n1. Create a [GitHub App](https:\u002F\u002Fgithub.com\u002Fsettings\u002Fapps) with repository permissions\n2. Install the app on your organization or personal account\n3. Generate an installation access token\n4. Paste the token in the Token field\n\n**Benefits of GitHub App:**\n- Fine-grained permissions control\n- Revocable access per installation\n- Higher rate limits (5,000 requests\u002Fhour)\n- Audit logging and security monitoring\n- No need to share personal credentials\n\nFor larger repositories or team usage, we recommend using GitHub App authentication.\n\n---\n\n## Architecture\n\n```\n┌─────────────────────────────────────────────────┐\n│                   CodeFlow                      │\n├─────────────────────────────────────────────────┤\n│  ┌──────────┐  ┌──────────┐  ┌──────────┐       │\n│  │  Parser  │  │  GitHub  │  │    D3    │       │\n│  │  Module  │  │   API    │  │  Graph   │       │\n│  └──────────┘  └──────────┘  └──────────┘       │\n│        │              │              │          │\n│        └──────────────┼──────────────┘          │\n│                       │                         │\n│              ┌────────▼────────┐                │\n│              │   React App     │                │\n│              │  (Single File)  │                │\n│              └─────────────────┘                │\n└─────────────────────────────────────────────────┘\n```\n\n**Zero build dependencies to install.** Everything runs from pinned CDNs:\n- React 18\n- D3.js 7\n- Babel (for JSX)\n\n---\n\n## Contributing\n\nWe love contributions! Here's how:\n\n1. Fork the repo\n2. Make your changes to `index.html`\n3. Test locally (just open in browser)\n4. Submit a PR\n\nIf you're editing the markdown \u002F wiki-link parser, Node.js unit tests live under `tests\u002F` and run with no dependencies:\n\n```bash\nnode --test tests\u002F\n```\n\n`tests\u002Fverify-brain-vault.mjs` is an optional end-to-end script that always verifies the bundled fixtures and will also scan a real local vault when you explicitly set `BRAIN_VAULT=\u002Fpath\u002Fto\u002Fvault`.\n\n### Ideas for Contributions\n- [ ] Add support for more languages\n- [ ] Improve function extraction regex\n- [ ] Add more design pattern detection\n- [ ] Export to different formats (PNG, PDF)\n- [ ] Add code complexity metrics\n\n---\n\n## FAQ\n\n**Q: How does it work without a backend?**\n> CodeFlow runs entirely in your browser. It calls the GitHub API directly from your browser and processes everything client-side.\n\n**Q: Is my code safe?**\n> 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!\n\n**Q: Can I use it offline?**\n> Yes. With the local file analysis feature, you can analyze code from your computer without any internet connection. Click the \"Open Folder\" button and select your files. All processing happens entirely in your browser.\n\n**Q: Why is analysis slow?**\n> We make individual API calls for each file to get content. With a token, you get higher rate limits and faster analysis.\n\n**Q: How accurate is the dependency analysis?**\n> 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.\n\n---\n\n## Card Style Gallery\n\nAll examples below are real cards rendered by the [CodeFlow Card Action](.\u002Fcard\u002F) against this very repo. Pick one and drop it on your README.\n\n### `style: compact` — default\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fcompact.svg\" alt=\"compact\" width=\"100%\" \u002F>\n\n### `style: compact` with `show-grade: false, show-score: false`\n\nFor public READMEs where you'd rather show data than a letter grade. The card stays informational — files, functions, LOC, languages, tests — without the judgmental bits.\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fcompact-private.svg\" alt=\"compact private\" width=\"100%\" \u002F>\n\n### `accent` — any preset or CSS color\n\nThe accent recolors the sparklines, links, and pin. Presets: `purple` (default), `teal`, `cyan`, `green`, `pink`, `blue`, `amber`, `red`. Or pass any CSS color (e.g. `#ff6b6b`).\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fcompact-teal.svg\" alt=\"compact teal\" width=\"100%\" \u002F>\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fcompact-pink.svg\" alt=\"compact pink\" width=\"100%\" \u002F>\n\n### `style: row` — status-bar strip\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Frow.svg\" alt=\"row\" width=\"100%\" \u002F>\n\n### `style: minimal` — single text line\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fminimal.svg\" alt=\"minimal\" width=\"100%\" \u002F>\n\n### `style: hero` — splashy gradient\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fhero.svg\" alt=\"hero\" width=\"100%\" \u002F>\n\n`hero` with `show-grade: false`:\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fhero-private.svg\" alt=\"hero private\" width=\"100%\" \u002F>\n\n### `style: detailed` — information-rich\n\nEverything: grade, scale, language breakdown, composition (connections, tests, folders, function stats, patterns), top folders, fragility, hidden costs.\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fdetailed.svg\" alt=\"detailed\" width=\"100%\" \u002F>\n\n`detailed` with `show-grade: false`:\n\n\u003Cimg src=\".\u002Fcard\u002Fexamples\u002Fdetailed-private.svg\" alt=\"detailed private\" width=\"100%\" \u002F>\n\n---\n\n## Star History\n\nIf you find CodeFlow useful, please star the repo.\n\n---\n\n## License\n\nMIT License — use it however you want.\n\n---\n\n\u003Cdiv align=\"center\">\n\n**Built by developers, for developers**\n\n*Stop guessing. Start seeing.*\n\n\u003C\u002Fdiv>\n","CodeFlow 是一个能够将GitHub仓库或本地代码库快速转化为交互式架构图的工具。其核心功能包括无需安装直接在浏览器中运行、提供依赖关系图和影响范围分析，帮助开发者理解文件间的连接及改动可能带来的影响。此外，CodeFlow 还具备代码所有权识别、安全扫描、模式检测等功能，并能为代码库健康状况打分。此工具非常适合需要快速了解新接手项目结构、进行代码审查或是评估变更影响的开发场景使用。",2,"2026-06-11 03:46:27","high_star"]