GraphLens

Interactive architecture visualizer for Angular projects

Transforms code entropy into structured, navigable graphs

Marketplace • Start Guide • Demo • GitHub Community • Issues • Discussions • Roadmap

📢 Updates

Release 0.3.0-0.3.1: Advanced directives, soft in-class connections, auto-arranging graph nodes, and full selector processing! Details on the Releases page.

Foundation & Identity: Meet our new brand style and explore the principal concepts driving GraphLens – from software entropy to code liquidity – in the Core Philosophy.

Table of Contents

• 1. Definition & Purpose
• 2. Features
• 3. Requirements
• 4. Current Limitations
• 5. Roadmap
• 6. FAQ
• 7. Core Philosophy
• 8. Feedback & Contribution
• 9. License

1. Definition & Purpose

GraphLens is a professional static analysis and architecture visualization tool built for Frontend Developers, Software Architects, Analysts, and QA Specialists working with Angular.

In large-scale Web projects, connections between modules, routes, and components often become invisible and tangled. This increases codebase entropy, leading to "spaghetti code", excessive cognitive load, and reduced development efficiency.

GraphLens solves this by performing automated analysis of your project and visualizing its architecture in the form of structural tree views and interactive graphs. It provides seamless, real-time information and navigation through project entities, helping gain control over the codebase.

It acts as an explorer and visualizer for Angular workspace, helping you to:

• Visualize the high-level structure and architecture
• Navigate efficiently through program entities
• Onboard faster into new or legacy projects
• Communicate more effectively with your teammates
• Plan development and refactoring by seeing the complete picture of entities and their relationships

Disclaimer

GraphLens is currently in Public Beta. While we strive for stability, occasional inaccuracies in analysis or graph rendering may occur in projects with non-standard configurations and complex code patterns. GraphLens supports Angular v2+ projects utilizing angular.json. Please review the Current limitations section before use.

2. Features

2.1. How It Works

GraphLens activates automatically if an angular.json file is detected in the VS Code workspace, or when opening TypeScript and HTML files.

The extension scans your VS Code workspace and explores Angular projects and program entities¹: Modules, Components, Directives, and Routes. It analyzes Angular metadata properties (imports, declarations, exports, etc.) to resolve relationships between program entities. Based on collected data, it builds interactive directed graphs for three abstraction levels² of architecture: Module Hierarchy, Navigation Map, and Component tree.

GraphLens fully supports both classic NgModules and modern Standalone API architectures. However, the scope of analysis is currently restricted to the Angular program entities mentioned above.

The analysis is performed entirely without AI models. All processing is performed locally – your project data never leaves your machine. The analysis results are deterministic, reproducible and consistent given the same input. Under identical conditions you will always get an accurate "snapshot" of your project's reality.

Quick demonstration

2.2. Commands

Commands are accessible via the custom command palette graph-lens.open-command-palette, as well as through the standard Command Palette under the GraphLens title.

Key Commands:

A detailed list of commands is also available in the Features -> Commands tab within the extension description.

2.3. TreeView Panel in Activity Bar

The GraphLens side panel with cube icon provides a Tree view of your Angular workspaces and projects:

Key features:

• Project Structure: Quick overview of project structure and program entities.
• Context Menu: Convenient navigation and context actions via right-click.
• Entity Locator: Quick jump to the entity's location on the graphs.

2.4. WebView Panel as Portal for Graphs

The main workspace of the extension is an interactive graphs.

Key features:

• Architecture Layout: Comprehensive visualization of Angular Modules, Components, and Routing levels.
• Interactions Highlight: Select any node to trace its specific relationships.
• Context Actions: Seamless navigation to source code, Tree View focusing, and other graph tools.
• Theming: Full support for VS Code High Contrast, Dark and Light themes.

2.5. Manual Refresh

The graphs do not update automatically upon file save. To reflect changes in your code:

• Use the Refresh button at the left top corner of the WebView or right top corner of the TreeView.
• Run the Refresh current project or Restart exploration commands via the GraphLens palette. Please note that Restart exploration command will trigger re-exploration of the entire workspace.

3. Requirements

To ensure GraphLens works correctly, your environment must meet the following criteria:

3.1. VS Code Version

Requires Visual Studio Code v1.85.0 or newer.

3.2. Trusted Workspaces

The extension executes analysis scripts, so it will not function in Restricted Mode. Please ensure your project folder is added to Trusted Workspaces.

3.3. External Dependencies

Critical: For a complete dependency graph analysis, external dependencies must be installed.

Please run npm install (or yarn, pnpm) in your project root before launching GraphLens. If TypeScript cannot resolve imports (files appear red in the editor), the analysis may be incomplete or contain errors.

3.4. TypeScript Language Server

GraphLens leverages VS Code's built-in capabilities to find definitions and references.

• Ensure the built-in TypeScript and JavaScript Language Features extension is enabled. GraphLens relies on the data provided by the TS Server to correctly analyze projects.
• For projects under active development that may contain TS errors, it's recommended to enable "typescript.tsserver.experimental.enableProjectDiagnostics": true. This allows the extension to resolve links more accurately during parsing, though it may increase the initial analysis time.

4. Current Limitations

• Program Entities¹: Supports only Angular Modules, Routes, Components, and Directives. DI services and other Angular building entities are not supported yet, but are planned for future releases.
• Manual Refresh: The graphs do not update automatically upon file save. See the Manual Refresh section for details.
• Frameworks: Supports Angular v2+ only. React, Vue, Svelte, and Angular meta-frameworks are not supported.
• Project Types: Supports only Angular applications. Angular libraries are not supported yet.
• Configurations: Supports projects with angular.json configuration. Legacy configurations with .angular-cli.json are not supported.
• SSR Support: Server-side specific configurations and server-side modules are not supported.
• Monorepos: Nx workspaces, specific configurations, and custom monorepo structures are not supported.

5. Roadmap

A detailed development roadmap for this year is available here – Roadmap 2026.

6. FAQ

7. Core Philosophy 🌀

Every software system exists within its own "solution space" – an infinite field of variations and changes. The essence of programming is the continuous evolution of the system and the search for right solutions within this space. In an ideal world, this evolution should unfold harmoniously, much like the Fibonacci sequence spiraling outward, where each new cycle of development naturally builds upon the solid foundation of the previous one, maintaining strict structural and semantic balance.

However, the reality for long-living projects is different. Scaling, shifting requirements, continuous search for solutions, and inevitable trade-offs generate excessive software entropy – a massive, complex, and practically chaotic labyrinth of invisible connections and hidden pitfalls. This is how "shadow architecture" forms. Under these conditions, finding the right solutions demands heavy cognitive load; over-analyzing complex dependencies becomes a daily struggle even for senior developers, and business costs constantly increase. Strict principles, patterns, and technologies like Angular exist to purposefully narrow possible variations and standardize development processes. Yet, under the weight of business demands and scale, systems inevitably grow more complex.

All these aspects are united by the new concept of "code liquidity" – a codebase's ability to be accessible, comprehensible, and ready for rapid change in response to new tasks. Just as a highly liquid financial asset can be quickly converted into real value, liquid code can be easily, predictably, and cost-effectively transformed to meet new business requirements. Essentially, all methodologies, principles, patterns, and quality metrics boil down to one primary goal – keeping code in a liquid state. Frameworks serve precisely this purpose – establishing standards and boundaries to increase codebase liquidity. But without the ability to see the complete picture within a reasonable timeframe, overall system liquidity plummets rapidly under the inevitable weight of entropy. This is especially relevant today in the era of AI code generation: when advanced models can produce thousands of lines in seconds, maintaining human control over the generator and resulting architecture becomes a critical condition for project success.

GraphLens is an automated analysis and visualization tool for Angular projects, acting as a point of synergy between the code editor and the framework. Much like a real telescope focuses the light of distant cosmic objects, GraphLens gathers information about your Angular workspace, allowing you to peer into the very center of the architectural cosmos and transform the entropy of complex relationships into a structured and cognitively accessible form. The tool provides a new, faster interface – a visual environment through which take place the reading, perception, and navigation of the project's actual structure and architecture. GraphLens is a tool that gives developers the freedom to easily explore the system and expand their control over its codebase.

By revealing the hidden geometry of connections as interactive graphs, GraphLens helps you comprehend the current state of the system, organize and channel software entropy into the right flow, regain control over the project, and ensure your project maintains the highest level of code liquidity.

8. Feedback & Contribution

The project is proprietary, but the project will evolve together with the community.

This is a public repository created for feedback:

• Found a bug? Create an Issue
• Have an idea? Start a Discussion
• Stay updated: GitHub GraphLens

If you find GraphLens useful, please consider leaving a review on the Marketplace. It helps immensely!

9. License

GraphLens is proprietary software. Copyright © 2025-2026 Dmitrii Kostiuk. All Rights Reserved.

This extension is licensed under the GraphLens End-User License Agreement (EULA)

• You are free to: Use for personal, educational, and commercial projects free of charge. You own the generated graphs, tree views, and visualizations.
• You may not: Decompile, reverse engineer, extract internal data, modify, resell, or create derivative works based on this software.

See the full License agreement file for details.

The Demo code is provided under the MIT License.

📚 Notes & Terminology

1. Program entities: Refer to the common building blocks of an Angular application, currently including Angular Modules, Routes, Components, and Directives.
2. Abstraction or Program levels: Represent different layers of the application structure formed by these common entities and include Module Hierarchy, Navigation Map, and Component tree.

Created with respect for human ingenuity ✨🚀