Repository iconcurepo.dev
codeflow preview

braedonsaunders / codeflow

architecturebrowser-basedcode-analysiscodebase-visualization

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.

4.3k Stars
visibility21 Watchers
fork_right673 Forks
HTML
historyUpdated recently

description README.md

CodeFlow

Visualize Your Codebase Architecture in Seconds

Zero setup. No installation. Just paste a GitHub URL.

License: MIT PRs Welcome

Try it Now · Report Bug · Request Feature

CodeFlow Screenshot

Why CodeFlow?

Ever opened a new codebase and felt completely lost? CodeFlow turns any GitHub repository or local codebase 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 or select local files and go
  • Works offline — analyze local files without internet
Paste URL / Select Files -> See Architecture -> Make Better Decisions

Features

Interactive Dependency Graph

See how your files connect at a glance. Click any node to highlight its dependencies. Drag, zoom, and explore.

Blast Radius Analysis

"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.

Code Ownership

Know who owns what. See the top contributors for any file based on git history. Perfect for code reviews and knowing who to ask.

Security Scanner

Automatic detection of:

  • Hardcoded secrets & API keys
  • SQL injection vulnerabilities
  • Dangerous eval() usage
  • Debug statements in production code

Pattern Detection

Automatically identifies:

  • Singleton patterns
  • Factory patterns
  • Observer/Event patterns
  • React custom hooks
  • Anti-patterns (God Objects, high coupling)

Health Score

Get an instant A-F grade for your codebase based on:

  • Dead code percentage
  • Circular dependencies
  • Coupling metrics
  • Security issues

Activity Heatmap

Color files by commit frequency to see which parts of your codebase are most actively developed.

PR Impact Analysis

Paste a PR URL to see exactly which files it affects and calculate the blast radius of proposed changes.

CodeFlow Card (GitHub Action)

Health 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/.

Markdown & Wiki-Link Graph

Point CodeFlow at an Obsidian vault or any markdown directory to see notes as a connected graph. Both [[wiki-links]] and [text](./relative.md) links become edges; each note is a note-layer node (distinct color) with a dependencies[] array in the JSON export.

Local File Analysis

Analyze code directly from your computer without uploading to GitHub:

  • Privacy First: Your code never leaves your machine
  • Offline Support: Works without internet connection
  • Drag & Drop: Simply drag files or folders to analyze
  • Folder Scanning: Recursively analyze entire project structures
  • Exclude Patterns: Skip attachments, caches, generated assets, and other irrelevant paths before scanning
  • Instant Results: All processing happens in your browser

CodeFlow Card

A 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/dark theme automatically.

CodeFlow card — compact style

See card/ for setup, or jump to the style gallery below.


Privacy First

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.


Quick Start

Option 1: Use Online (Recommended)

Just visit CodeFlow and paste any GitHub URL.

Option 2: Self-Host

# Clone the repo
git clone https://github.com/braedonsaunders/codeflow.git

# That's it! Just open index.html in your browser
open index.html

No build process. No npm install. It is a single index.html app that loads pinned browser dependencies from CDNs.

Option 3: Analyze Local Files

You can now analyze code directly from your local machine without uploading to GitHub:

  1. Open CodeFlow in your browser
  2. Click the "Open Folder" button
  3. Select the folder or files you want to analyze
  4. CodeFlow will process them entirely in your browser

Perfect for:

  • Private projects you don't want to upload
  • Offline development
  • Quick local analysis before committing
  • Working with sensitive code

Usage

Public Repositories

Just paste: facebook/react
Or full URL: https://github.com/facebook/react

Private Repositories

  1. Create a GitHub Personal Access Token with repo scope
  2. Paste it in the Token field
  3. Analyze your private repos

Local Files

Click the "Open Folder" button to analyze code from your computer:

  • Folder Analysis: Select a folder to analyze all supported files recursively
  • File Selection: Choose specific files to analyze
  • Drag & Drop: Drag files or folders directly onto the page
  • Custom Excludes: Add patterns like uploads/**, **/cache/**, or *.png before scanning

All processing happens locally in your browser - nothing is uploaded.

Shareable Links

After analysis, click the "Share" button to copy a shareable link. Anyone can re-run the same analysis.

Export Reports

Export your analysis in multiple formats for further processing:

  • JSON Report - Complete analysis data including:

    • Repository metadata and health score
    • All files with functions, dependencies, and churn data
    • Complete function statistics with callers and usage metrics
    • Security issues, patterns, and architecture issues
    • Duplicate code detection and layer violations
    • Suggestions and recommendations
    • Language breakdown and folder structure

    Perfect for programmatic analysis, CI/CD integration, or custom reporting tools.

  • Markdown Report - Human-readable formatted report

  • Plain Text Report - Simple text format

  • SVG Image - Export the dependency graph visualization

  • PDF Document - Export the dependency graph as a printable PDF

  • Raw JSON - Simplified data export

Click the "Export" button in the top bar after analysis to access all export options.


Supported Languages

CodeFlow extracts functions and analyzes dependencies for:

LanguageExtensions
JavaScript.js, .jsx
TypeScript.ts, .tsx
HTML (inline scripts).html, .htm, .xhtml
Python.py
Java.java
Go.go
Ruby.rb
PHP.php
Vue.vue
Svelte.svelte
Rust.rs
C.c, .h
C++.cpp, .cc, .cxx, .hpp, .hh, .hxx
C#.cs
Swift.swift
Kotlin.kt, .kts
Scala.scala, .sc
Groovy.groovy, .gvy
Elixir.ex, .exs
Erlang.erl, .hrl
Haskell.hs, .lhs
Lua.lua
R.r, .R
Julia.jl
Dart.dart
Perl.pl, .pm
Shell.sh, .bash, .zsh, .fish
PowerShell.ps1, .psm1, .psd1
F#.fs, .fsi, .fsx
OCaml.ml, .mli
Clojure.clj, .cljs, .cljc
Elm.elm
VBA