CodeFlow: architecture maps for codebases, from a pasted URL

A dependency graph that boots from index.html

CodeFlow answers a familiar moment: opening a new codebase and feeling lost. Paste a GitHub repository URL and you get an interactive architecture map of how files connect, with no installation and no account, because everything runs in the browser. The repository's primary language being HTML is the tell. There is no build process and no npm install; index.html loads pinned, checked-in browser dependencies from vendor/, so a fresh clone launches without a network connection:

git clone https://github.com/braedonsaunders/codeflow.git
open index.html

That decision sets the product's shape. GitHub itself renders dependency graphs for some ecosystems at the package level, but CodeFlow's map is file-level and works from any pasted URL, including repositories you do not own. The hosted instance lives at codeflow-five.vercel.app, and the self-host path is exactly the two commands above.

Blast radius before you touch the code

The feature that earns a place in a code review workflow is blast radius analysis. Select any file and CodeFlow shows exactly how many files would be affected by changing it, turning the question "if I change this, what breaks" from an educated guess into a count. The graph itself is interactive in the ordinary ways, drag, zoom, click a node to highlight its dependencies, and a Code view keeps the map while opening the selected file and its connected files as full-file cards on the canvas, grouped by directory. The same idea scales up to pull requests: paste a PR URL and CodeFlow lists which files it affects and computes the blast radius of the proposed changes, which is a quick sanity check before you approve something that touches a hub file. Ownership context rides along, with top contributors per file drawn from git history, useful for knowing who to ask about a module before you refactor it.

A security scanner with opinions about exclusions

The built-in security scanner detects hardcoded secrets and API keys, SQL injection vulnerabilities, dangerous eval() usage, and debug statements in production code. What distinguishes it from a naive grep is the exclusion policy, which the README spells out in unusual detail. Test files, fixtures, docs/ and common tooling directories such as .github/, .claude/ and scripts/ are excluded from the XSS and shell-execution checks, because findings there do not reflect the shipped product's attack surface. The hardcoded-secret check exempts only tests, fixtures and docs, deliberately keeping CI workflows, hooks and deploy scripts in scope, since those are executable code and a real credential there is still a real leak. That two-tier policy is the kind of judgment that decides whether a scanner's output is signal or noise, and it is written down rather than implicit.

An A-F grade built from four measurable inputs

The health score compresses a codebase into an A-F grade from four inputs: dead code percentage, circular dependencies, coupling metrics and security issues. Grades invite gaming, but the inputs are at least inspectable ones, and each maps to something you can act on, deleting dead code, breaking cycles, reducing coupling. Pattern detection runs alongside: singleton, factory and observer or event patterns are identified, React custom hooks are recognized, and anti-patterns such as God Objects and high coupling get flagged by name. An activity heatmap colors files by commit frequency, showing which corners of the codebase are actively developed and which are frozen, which is context the dependency graph cannot give you: a heavily-connected file that nobody has touched in a year is a different risk than one that changes weekly. Together the three views cover structure, quality and motion, which are the questions a new maintainer asks in the first week inside a codebase.

Private repos, local folders, and where your token lives

The privacy model is the strongest claim in the documentation, and it is specific. Processing happens 100 percent in the browser, API calls go directly from your browser to GitHub, code and tokens are never stored, and there are no analytics or tracking. A GitHub token, when you use one for private repositories, exists only in browser memory and is cleared when the tab closes; private analysis needs a Personal Access Token with repo scope pasted into the Token field. Local analysis covers the rest: an Open Folder button, drag and drop of files or folders, recursive folder scanning, and exclude patterns, for example matching every .png, applied before scanning so attachments, caches and generated assets stay out of the graph. Generated dependencies, caches and build output are pruned automatically, with node_modules, .next, .turbo, .local, dist and playwright-report named as examples, and files over 2 MB stay visible in results without their contents being parsed. Offline support follows from the same design, since there is nothing to upload to.

npx codeflow: a thin CLI over the same page

A command-line entry exists, and package.json is candid about what it is: the description reads "Visualize codebase architecture in the browser. A thin CLI opens that same UI." The bin entry maps codeflow to cli/codeflow.mjs, engines require Node >=18, and the shipped files are just index.html, vendor and cli. Running it serves the same index.html interface, watches the folder, and opens the browser:

npx codeflow .

One caveat is stated plainly: the README notes npx works "once published", and the repository has no GitHub releases at the time of writing, with package.json carrying version 1.0.0. Development commands round out the picture: npm start runs node cli/codeflow.mjs . against the current directory, and tests execute with node --test over tests/*.test.mjs and tests/*.smoke.js. The last push to the repository was on 2026-09-22.

A README card recomputed on every merge

The CodeFlow Card is a GitHub Action that drops a self-updating SVG onto your README, showing health grade, scale, fragility and hidden costs, recomputed every merge by the same analyzer as the web app. Styling options are listed concretely: five styles, accent presets, opt-in PR receipts rendered as thermal-receipt comments, a privacy mode for public repos, and automatic adaptation to the viewer's light or dark theme. Setup lives in the card/ directory. Beyond code, the analyzer also handles markdown: point it at an Obsidian vault or any markdown directory and both [[wiki-links]] and relative links like [text](./file.md) become edges, with each note rendered as a distinct note-layer node carrying a dependencies array in the JSON export. Analysis results can be shared with a link that re-runs the same analysis, and reports export as JSON for further processing, which is the difference between a one-off look and something you can diff over time.

Editorial conclusion

Adopt CodeFlow when you want a zero-install first pass over an unfamiliar repository or a second opinion on your own, especially where sending code to a hosted service is not acceptable. Skip it when you need compiler-grade static analysis or team-wide dashboards beyond what the SVG card provides. Verify first which deployment fits your policy: the hosted instance is codeflow-five.vercel.app, while the self-host path is a git clone plus opening index.html, with no build step in between.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository