ArchFlow

Visualize and understand your codebase architecture instantly.

ArchFlow automatically analyzes your codebase and generates interactive architecture diagrams. Perfect for understanding unfamiliar codebases, onboarding new team members, or keeping track of AI-assisted code changes.

Features

Instant Architecture Visualization

• Auto-detection of project structure, frameworks, and technologies
• Interactive diagrams showing systems, containers, and components
• Request flow visualization showing how data moves through your system

AI-Assisted Coding Support

• Multi-file change detection - automatically detects when AI tools modify multiple files
• Auto-refresh - keeps your architecture view updated as you code
• Smart notifications - alerts you when significant structural changes occur

Deep Code Understanding

• Component analysis - understand what each part of your codebase does
• Dependency mapping - see how components connect and communicate
• Technology badges - quick view of frameworks and languages used
• Drag to Chat - drag any element directly into your AI chat for instant context
• Copy Prompt Context - right-click any element to copy its context for AI prompts

Supported Technologies

• Frontend: React, Next.js, Vue, Angular, Svelte
• Backend: Node.js, Express, NestJS, FastAPI, Django, Flask, Spring Boot
• Languages: TypeScript, JavaScript, Python, Java, Go, Rust, C#
• And more...

Getting Started

1. Install ArchFlow from the VS Code Marketplace
2. Open any project in VS Code
3. Run ArchFlow: Show Architecture Overview from the Command Palette (Cmd/Ctrl+Shift+P)
4. Explore your architecture in the interactive view

Usage

Commands

Activity Bar

Click the ArchFlow icon in the Activity Bar to access:

• Overview - Tree view of your architecture
• Component Details - Detailed information about selected components
• Architecture Changes - Track changes over time

Configuration

AI-Powered Analysis (Optional)

Enable AI analysis for richer insights:

{
  "archflow.llm.provider": "gemini",
  "archflow.llm.apiKey": "your-api-key",
  "archflow.llm.model": "gemini-2.5-pro"
}

Settings

Supported Providers

Use Cases

• New to a codebase? Get a quick overview of how everything fits together
• Code review - Understand the impact of changes across the system
• Using AI coding tools? Keep track of what's being generated
• Documentation - Generate architecture diagrams for your docs
• Onboarding - Help new team members understand the system

Changelog

See CHANGELOG.md for release notes.

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

Proprietary - Free to use. See LICENSE for details.