CodeSkyline - Visualize your repository

This VS Code extension adds a visualization of your source code files in a zoomed out representation. It allows developers to discover code, gain insight into development activities, compare versions and navigate a large code base.

Features

CodeSkyline is an active research project that visualizes code in a spatial map. Think of it like printing all files, hanging them on a wall and viewing them from a distance. Or imagine taking all minimaps and putting them together into one view. This is realized in the code-map, a visualization where you can see all source code at the level of detail of individual lines of code. This technique was first proposed within the SeeSoft publication (Eick et al. 1992) and has been subject to many research publications (Bacher et al. 2017).

This extension features the following:

• An interactive visualization of the source code files in the current workspace.
• It works with any programming language if its language server protocol (LSP) is installed.
• The visualization includes filtering, tooltips, full-text search and more.
• Multiple color schemes to comprehend and analyze various aspects of your code. For example: the code age, cyclomatic complexity, authors, problems, and more.
• A folder hierarchy visualization that acts as an explorer to view and zoom into subfolders.
• An arc visualization that shows the coupling between files, whever one file imports and depends on another.
• A bar chart that shows the file importance, calculated with the PageRank algorithm according to the file coupling.

Interaction:

• Hover over a file to view details.
• Hold CTRL while hovering a file to view the source code.
• Right click a file to hide and more

If you want to learn more, or try the web demo, visit the offical website: https://codeskyline.iva.igd.fraunhofer.de/

Installation

In VS Code open the Extension tab (CTRL+SHIFT+X) and search for "CodeSkyline" or install directly from the VS Code Marketplace.

Requirements

This extension requires vscode version 1.103.0 or higher.

This extension also depends on the vscode.git extension or git being in the path for the git analysis. If the workspace is not a git repository, or git is not available on your system, the git features will be disabled.

Gettings Started

1. Open your repository in VS Code
2. At the bottom Status Bar click "CodeSkyline" to open the extension.

Or try the VS Code command palette (Ctrl+Shift+P) and run the command CodeSkyline: Open Visualization.

Code-Map

The code-map is a visualization where you can see all source code at the level of detail of individual lines of code.

Stacked Views

It features several stacked views to see additional information.

Stacked views
Header - Expand views, change color scheme, filter files, or search content
Explorer - showing the file hierarchy
Coupling - showing file interdependencies
Centrality - showing the central files
File icons - showing the file type

Centrality is calculated with PageRank and has three parts:

• Structured centrality is based on file couplings (file imports).
• Semantic centrality is based on semantic similarity via bag of words jaccard similarity.
• Logical centrality is based on similarity of files that are contained in the same git commit. Is also called co-evolution, logical or change coupling.

Color Schemes

It highlights several metrics in a line level granularity. Four examples:

Author Metric	Code Age Metric
Which author edited which line of code?	Whats the oldest and newest line of code?

Code Complexity Metric	File Hierarchy
Where is the most complex code?	How is the folder structure?

Interactions

You can right-click files to hide them, reveal in the explorer, view file history or more.

Git Diffs and File History

You can view two git version control histories:

Git diff	File History
All files that changed between two commits	A file's evolution over the development history.

Commands

This extension provides two commands:

• CodeSkyline: Open Visualization - Open the visualization webview.
• CodeSkyline: Clear Current Workspace Cache - This deletes all cached data in case of an error and recomputes upon startup.

It also adds context menu items to the explorer when right-clicking a folder:

• Open in CodeSkyline - Opens the visualization and only shows the current selected folder.

Settings

These settings configure which files will be processed by the backend.

• codeSkyline.applyGitIgnore - If the root level .gitignore of the current workspace is used to ignore files. (default is true)
• codeSkyline.ignoredFileExtensions - List of ignored file extensions. Mostly because they are binary files anyway. (default is lock, jpg, mp3, wasm, and more)
• codeSkyline.ignoredFiles - List of ignored files and folders. (default is node_modules, dist, build, out, and more)
• codeSkyline.maxFileSizeKb - Maximum file size, in KB. (default is 1024)

Troubleshooting

CodeSkyline loads too many files

CodeSkyline uses the root level .gitignore file to generate a glob pattern to ignore files. Otherwise check the settings to ignore unwanted files. If thats still not enough, please load a smaller workspace.

Privacy

This extension currently doesn't use telemetry. All computations are fully offline. The data is collected from the local repository in the workspace, the language server protocol and git.

You are able to export a log from the events of the computation (CodeSkyline -> Settings -> download log), if you intend to share these with us, be aware that these may contain sensitive data such as file paths of your project.

Support

If you encounter any issues, please report them on the GitHub Issue Tracker.

• Contact: mailto:steven.lamarr.reynolds-ringer@igd.fraunhofer.de

Our services

If you like what we do and want to learn more, visit the Fraunhofer website, or view other data visualization projects from our research department.

We improve existing technologies and processes up to the production of optimized prototypes and products. Our projects and innovations cover all application-relevant fields of competence in visual computing. For small and medium-sized enterprises without their own R&D department as well as for corporations, Fraunhofer IGD provides important innovative know-how around the topics visualization and simulation.

Interested in collaborating? Let us know!

License

Fraunhofer Institute for Computer Graphics Research (IGD)

Copyright (c) 2026 Fraunhofer IGD. All rights reserved.

This source code is property of the Fraunhofer IGD and underlies copyright restrictions. It may only be used with explicit permission from the respective owner.

Acknowledgements

This research work was supported by the National Research Center for Applied Cybersecurity ATHENE. ATHENE is funded jointly by the German Federal Ministry of Research, Technology and Space and the Hessian Ministry of Science and Research, Arts and Culture.