braedonsaunders

codeflow

OtherVisualizationStatic AnalysisGitHubArchitectureDeveloper Tools

+340

// summary

CodeFlow is a browser-based tool that generates interactive architecture maps and dependency graphs from GitHub repositories or local files. It provides deep insights into code ownership, security vulnerabilities, and architectural patterns without requiring any backend installation or data storage. The platform supports a wide range of programming languages and allows users to export detailed reports for further analysis.

// technical analysis

CodeFlow is a lightweight, browser-based architecture visualization tool designed to help developers quickly understand complex codebases without requiring backend infrastructure or local installation. By leveraging client-side processing with React and D3.js, it provides an interactive dependency graph and health analysis while ensuring data privacy, as no code ever leaves the user's machine. The project prioritizes accessibility and security, offering a zero-dependency, single-file architecture that allows for both remote repository analysis via GitHub API and offline local file inspection.

// key highlights

Provides an interactive dependency graph that allows users to visualize file connections and explore architectural relationships through zooming and dragging.

Features a blast radius analysis tool to help developers predict the potential impact of changes on other files within the codebase.

Includes an automated security scanner that detects hardcoded secrets, SQL injections, and dangerous function usage like eval().

Calculates a codebase health score based on metrics such as dead code percentage, circular dependencies, and coupling.

Supports local file analysis via drag-and-drop, ensuring complete privacy by processing all data entirely within the browser.

Offers comprehensive export options, including JSON, Markdown, and SVG, to facilitate reporting and integration with external CI/CD workflows.

// use cases

Visualize codebase architecture and file dependencies through interactive graphs

Perform security scanning to detect hardcoded secrets and common vulnerabilities

Analyze project health and impact of changes using blast radius and churn metrics

// getting started

To use CodeFlow, simply visit the online application at the provided URL and paste a GitHub repository link, or clone the repository and open index.html directly in your browser. For local analysis, click the 'Local Files' button within the interface to drag and drop your project folders for immediate, offline visualization.