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

Command	Description
ArchFlow: Analyze Workspace Architecture	Scan and analyze your codebase
ArchFlow: Show Architecture Overview	Open the architecture diagram

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

Setting	Description	Default
archflow.llm.provider	AI provider to use	none
archflow.llm.apiKey	API key for the selected provider	-
archflow.llm.model	Custom model name (optional)	Provider default

Supported Providers

Provider	Default Model	Example Models
openai	gpt-4o-mini	gpt-4o, gpt-4-turbo
gemini	gemini-2.5-flash	gemini-2.5-pro
anthropic	claude-sonnet-4-5	claude-opus-4-5
none	-	Disable AI (static analysis only)

AI Usage & Cost

ArchFlow is designed to be cost-efficient:

• 1 API request per scan - not per container or component
• Caching enabled - repeated scans within 5 minutes use cached results
• No API calls when provider: "none" (static analysis still works)

Token usage per scan:

Component	Estimated Tokens
Input (prompt)	~2,000 - 3,500
Output (response)	~500 - 1,500
Total	~2,500 - 5,000

Estimated cost per scan:

Provider	Model	Cost
Gemini	gemini-2.5-flash	~$0.0005 - $0.001
OpenAI	gpt-4o-mini	~$0.001 - $0.003
OpenAI	gpt-4o	~$0.02 - $0.05
Anthropic	claude-sonnet	~$0.01 - $0.03

💡 Tip: Use gemini-2.5-flash or gpt-4o-mini for the best cost/performance ratio.

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.