{ DevCanvas }

VISUALIZE • AUDIT • DOCUMENT

Features   •   Installation   •   Usage   •   Docs

---

Mission

DevCanvas transforms GitHub repositories into interactive visual maps. It eliminates the cognitive load of navigating large codebases by converting file trees into clear, logical diagrams.

Whether you're onboarding to a legacy project, reviewing a complex PR, or documenting architecture for stakeholders, DevCanvas provides the visual context you need.

---

✨ Core Capabilities

�️ Visual Architecture

Turn static file lists into dynamic, interactive diagrams.

• Flowcharts: Auto-generate execution paths for functions.
• Class Maps: Visualize inheritance and object relationships.
• Sequence Flows: Trace component interactions chronologically.

🛡️ Smart Health Audits

Proactively identify and resolve technical debt.

• Circular Check: Detect dangerous import cycles instantly.
• Security Scan: Highlight potential vulnerabilities (e.g., eval(), secrets).
• Code Heatmap: Visualize complexity hot-spots in your architecture.

💬 RAG Intelligence

Chat with your codebase using Retrieval Augmented Generation.

• Deep Context: Indexes your repo to answer "How does X work?".
• Code-Aware: Understands function signatures and dependencies.
• Link Resolution: Click citations to jump directly to the source file.

📝 Automated Documentation

Generate professional documentation with one click.

• Exports: Save diagrams as PNG, SVG, or Mermaid code.
• Templates: Use pre-built templates for PRDs, ADRs, and more.
• Repo Maps: Export the entire file structure as a navigable map.

---

� AI Engine Support

DevCanvas connects to your preferred LLM provider for analysis.

Provider	Supported Models	Badge
OpenAI	GPT-4o, GPT-3.5-Turbo
Mistral	Large, Medium, Small
Anthropic	Claude 3.5 Sonnet, 3 Opus
Google	Gemini 1.5 Pro
Groq	LLaMA 3 70B (Fast)

---

---

📦 Installation

1. Clone & Install

   git clone https://github.com/roshankumar0036singh/DevCanvas.git
   cd DevCanvas
   npm install

2. Build Extension

   npm run build:dev

3. Load in Chrome

   • Go to chrome://extensions/ > Enable Developer Mode.
   • Click Load unpacked > Select dist/ folder.

---

🕹️ Usage

1. Open GitHub Repo: Navigate to any repository page.
2. Launch DevCanvas: Click the extension icon or use the keyboard shortcut (Cmd/Ctrl+Shift+U).
3. Select Mode:
   • Diagram: View file structure.
   • Health: See audit report.
   • Chat: Ask RAG questions.
4. Export: Save diagrams as PNG, SVG, or Mermaid code.

---

📚 Documentation

Detailed documentation is available in the DOCS directory:

• Architecture Overview
• Extension API
• RAG System

---

🤝 Contributing

We love contributions! Please read our Contributing Guide to get started.

---