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 developer 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. It is called the code-map metaphor 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 research (Bacher et al. 2017).

This extension features the following:

• Interactive visualization of the source code files in the current workspace.
• 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.

Gettings Started

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

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

Troubleshooting

CodeSkyline loads too many files

CodeSkyline uses the root level .gitignore file to ignore files. Otherwise check the settings and fill out codeSkyline.ignoredFiles.

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)

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, these features will be disabled.

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.

Support

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

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

License

Fraunhofer Institute for Computer Graphics Research (IGD) Competence Center for Information Visualization and Visual Analytics

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 has been funded by the German Federal Ministry of Education and Research and the Hessian Ministry of Higher Education, Research, Science and the Arts within their joint support of the National Research Center for Applied Cybersecurity ATHENE.