Turn Any GitHub Repo into an Interactive Code Map with a Single HTML File

What CodeFlow Is

CodeFlow, created by Braedon Saunders, is an open‑source project that packs React 18, D3.js 7 and Babel into a single index.html file loaded from CDNs. By pasting a GitHub repository URL—or dragging a local folder—into the page, the tool fetches the file list via the GitHub API, parses each file for function definitions and import statements, and renders a force‑directed, draggable, zoomable graph.

Core Visualization

Each file becomes a node and each import an edge. Nodes are colored by architecture layer, folder ownership, or recent commit frequency, and a “Blast Radius” mode highlights the cascade of downstream dependencies when a file is selected. The author notes that navigating a new repository with this graph is much faster than opening files one by one in an IDE.

Language Support

The analyzer works on more than thirty languages—including JavaScript, TypeScript, Python, Java, Go, Ruby, Rust, C/C++, C#, Swift, Kotlin, Scala, Elixir, Haskell, Lua, R, Julia, Dart, Shell, Vue, Svelte, and others—using regular‑expression‑based function extraction and import parsing. While not compiler‑level precise, it is sufficient for a quick structural overview.

Additional Content Graphs

CodeFlow can also parse Obsidian wiki‑links and Markdown links, turning a personal knowledge base into a graph where each note is a colored node and links become edges.

Feature Details

Interactive Dependency Graph : Drag, zoom, click to highlight dependencies; four coloring modes (folder, architecture layer, commit heatmap, Blast mode).

Blast‑Radius Analysis : Recursively marks direct and indirect dependents of a selected file, using color intensity to indicate impact depth. The demo shows a single file affecting eight modules and fourteen test files.

Security Scanning : Regex‑based detection of hard‑coded API keys/secrets, SQL‑injection patterns, dangerous eval() calls, and leftover debug statements. It catches obvious leaks such as an AWS Access Key committed to a public repo.

Pattern Detection : Recognizes design patterns (Singleton, Factory, Observer, React Hooks) and anti‑patterns (God objects, high‑coupling modules) to aid refactoring decisions.

Health Scoring : Assigns an A‑to‑F grade based on dead‑code proportion, circular dependencies, module coupling, and security issue count. Clicking a grade reveals the specific metric that dragged the score down.

Activity Heatmap : Colors files by commit frequency; hot files are recent, cold files are untouched for months. Combined with the dependency graph, it highlights high‑coupling, frequently changed core files.

PR Impact Analysis : Paste a PR URL to see which files change and each file’s blast radius, helping maintainers decide how deeply to review a PR.

Code Ownership : Shows the top contributor for each file based on git history, useful for asking the right person about unfamiliar code.

CodeFlow Card : A GitHub Action that regenerates an SVG badge (five style options, multiple color themes) after each merge, displaying health score, size, vulnerabilities, and hidden costs directly in the README.

Local File Analysis : The “Open Folder” button runs the entire analysis in the browser without uploading code, supporting recursive scans and custom exclude rules (e.g., skip node_modules or cache directories).

Obsidian/Markdown Graph : Treats wiki‑links and relative paths as edges, exporting a JSON where each note lists its dependencies.

Export & Share : Generates JSON, Markdown, SVG, PDF reports, and shareable links that reproduce the same analysis for others.

Getting Started

Three usage modes are provided:

Online version at https://codeflow-five.vercel.app —paste a public repo URL (e.g., braedonsaunders/codeflow) and wait for analysis. Private repos require a GitHub personal access token with repo scope, stored only in browser memory.

Local run:

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

—no installation, works offline.

Folder analysis: Click “Open Folder” and drag a directory; the analysis stays entirely in the browser.

The GitHub API rate limit is 60 requests per hour without a token and 5,000 with a token; large repositories should use a token.

Limitations

Because dependency detection relies on regular expressions, it cannot handle dynamic imports, runtime reflection, or renamed references, and the author explicitly states the tool is meant for a quick overview, not 100 % accuracy. It is not a replacement for full‑featured SAST tools like SonarQube or Sourcegraph.

Conclusion

With a single HTML file, zero build steps, MIT licensing, and 3.6 k stars in four months, CodeFlow exemplifies a minimalist approach to code‑base visualization, offering enough insight for first‑time exploration while remaining extensible through export formats and local execution.