CodeSkyline - Visualize your repository

This extension adds a visualization of your source code files. 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. It's called the code-map metaphor where you can see all code at once, which was first proposed by the SeeSoft publication (Eick et al. 1992).

• Interactive visualization of the source code files in the current workspace.
• Works in any language if the language server (LSP) is installed.
• The visualization includes filtering, tooltips, full-text search and more.
• Multiple color scales to highlight and inspect different aspects of your code. For example, view the code age, showing the last time each source code line has been changed.
• A tree visualization that acts as explorer to view and explore subfolders.
• An arc visualization that shows connections between files, or file couplings by analysing the import and export statements in your files.
• A bar chart that shows the file importance, calculated by PageRank algorithm according to the file connections.
• Hold CTRL to view code details when hovering a file.
• 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.
• CodeSkyline gets stuck at "Found X files"
  • We are looking into it.

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

• codeSkyline.maxFileSizeKb - Maximum file size, in KB. (default is 1024)
• codeSkyline.ignoredFiles - List of ignored files and folders. (default is lock files, node_modules, dist, build, out, and more)
• codeSkyline.applyGitIgnore - If it should use the root level .gitignore of the current workspace to ignore files. (default is true)

Requirements

This extension requires vscode version 1.103.0 or higher.

Privacy

This extension currently doesn't use telemetry. All computations are fully offline. The data is collected from the local repository and calculated with language servers and git.

Support

• Issues: GitHub Issue Tracker
• Enterprise: contact mailto:steven.lamarr.reynolds@igd.fraunhofer.de

License

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

Copyright (c) 2025 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.