Developer Lens

See the architecture behind the code as mind maps

Comment

Inspiration

Modern codebases are becoming increasingly complex, often feeling like impenetrable “black boxes” to new contributors—or even seasoned developers jumping into a new module.

We were inspired by the idea of a “Mind Map for Code”:
a tool that goes beyond raw source files and provides a high-fidelity, interactive intelligence overlay revealing:

  • Hidden architecture
  • Data relationships
  • Team contributers and velocity for any repository.

What It Does

Developer Lens is an AI-powered architectural visualization platform that transforms any GitHub repository into a multi-dimensional mental map through four distinct Lenses:

  • Tech Stack Lens

    • AI-driven analysis of:
    • Core architecture
    • Design patterns
    • Frameworks and libraries

  • Structural Topology Lens

    • Dynamic D3-based Mind Map
    • Breaks directories down into:
    • Files
    • Classes
    • Methods
    • Functions

  • Database Schema Lens

    • ReactFlow-powered ER diagrams
    • Intelligent layouts:
    • Grid
    • Concentric
    • Automated Crow’s Foot relationship markers

  • Git Analytics Lens

    • Deep insights into:
    • Commit velocity
    • Contributor impact
    • Codebase growth over time

  • Intelligence Sidecar

    • Built-in AI chat
    • Lets you “talk” to your codebase to:
    • Understand logic flow
    • Identify bugs
    • Explore architectural decisions

How We Built It

The platform uses a modern, high-performance stack focused on visual excellence and developer experience:

  • Tools / IDE

  • Frontend

    • React
    • TypeScript
    • Vite (for lightning-fast builds)

  • Topology Engine

    • D3.js for hierarchical mind-mapping
    • ReactFlow for interactive database modeling

  • AI Core

    • Google Gemini 1.5 Pro
    • Integrated via @google/genai SDK
    • Used for:
    • Architectural reasoning
    • Conversational context

  • Data Layer

    • Direct GitHub API integration
    • Real-time repository scanning
    • Metadata extraction

  • Layout Logic

    • Dagre engine
    • Automated positioning for complex trees and flows

Challenges We Ran Into

  • Universal Code Parsing

    • Extracting meaningful structure across:
    • Python
    • JavaScript
    • TypeScript
    • Required building a robust abstract parser
    • Needed to distinguish:
    • Async methods
    • Variables
    • Functions
    • Classes

  • Database Relationship Visualization

    • Initial approach used manual SVG pathing
    • Quickly became unmaintainable
    • Migrated mid-project to ReactFlow
    • Massive refactor
    • Essential for:
      • Orthogonal routing
      • Clean line-crossing
      • Professional-grade diagrams

Accomplishments We’re Proud Of

  • Built a language-agnostic parsing system capable of extracting meaningful architectural structure
  • Successfully migrated an entire schema visualization system mid-project
  • Achieved:
    • Clean orthogonal routing
    • Scalable ER diagrams
    • High-fidelity visual clarity for complex systems

What We Learned

  • Visual Hierarchy Matters

    • Simply rendering nodes is not enough
    • Effective visualization requires:
    • Interactive highlighting
    • Progressive disclosure
    • Hiding complexity until requested

  • AI Grounding Is Critical

    • Learned how to feed:
    • Directory structures
    • Dependency graphs
    • Into LLMs to get:
    • Accurate architectural explanations
    • Actionable insights instead of hallucinations

What’s Next for Developer Lens

  • Backend Persistence Engine

    • Move beyond localStorage
    • Node.js / Go + PostgreSQL
    • Persistent storage for:
    • Project analytics
    • AI insights
    • Schema history

  • Team Collaboration

    • Shared workspaces
    • Real-time annotations on:
    • Mind Maps
    • Database Schemas

  • Multi-Cloud Support

    • GitHub (current)
    • GitLab
    • Bitbucket
    • Local directory scanning

  • Direct-to-Editor Integration

    • Click a node → open exact line in:
    • VS Code
    • JetBrains IDEs

  • PR Intelligence

    • A dedicated Review Lens
    • Visualizes:
    • Pull Request impact
    • Changes to overall system topology

Built With

Share this project:

Updates