AtomicViz

AtomicViz builds a visual map of your codebase, giving you a clearer understanding of its architecture, and making navigation easier.

• Select a set of files to generate an interactive code diagram
• Generate a graph of a function call hierarchy or variable references
• Customize graphs to show only the files, classes, and functions that are relevant
• Use the integrated outline view which mirrorss the graph and improves navigation
• Works with Typescript, Javascript, Python, Java, C++, and other major languages

Video overview: https://youtu.be/ZsFmE1eRgh4 Video in depth: https://www.youtube.com/watch?v=ZsDd4Q4E81I Tutorials: https://atomicviz.web.app/page-tutorial

NEW Feature (2025-08-13)

• Quickly see functional groups within a complex codebase using "Communities" mode
• In the Visible toolbar, click on the Communities button. Then select one of the communities from the dropdown.
• Communities of classes and functions are detected automatically by analyazing a set of files

Features

• Create interactive graphs of:

  • Function calls
  • Variable references
  • Class inheritance
  • Interface implementation

• An integrated outline view mirrors the graph

• Works for many programming languages

• Interact with the code:

  • Jump to code from the graph or outline
  • The graph and outline can follow code editing

• Integration with VS Code:

  • Save customized graphs as local AtomicViz files, and then open an AtomicViz file to load the graph
  • Show graphs in either the sidebar or code editor area
  • Show multiple graphs simultaneously
  • Use the VS Code theme, light or dark
  • Configure graph colors

• Export graphs as SVG

• Export interactive graphs to be used outside of VS Code, and shared with others

• Search the graph

• Advanced tools:

  • Use COMMUNITY mode to see functional groups of classes and functions within a complex codebase
  • Use FOCUS mode to see the connections to selected graph items to a chosen depth
  • Use LEVEL OF DETAIL mode to simplify the graph to a chosen level of detail

• Customize the graph:

  • Layout graphs by file/folder, by files, with no grouping, or using custom groups
  • Hide unwanted files, classes and functions that are not relevant to your focus
  • Collapse files, classes and functions to show dependencies at the desired level of detail
  • Exclude specific files from the graph using your .gitignore file

Requirements

• Install the language pack for your language

Paid features

• AtomicViz is free with limitations on the number and size of files included in the graph, and on the call-depth when graphing a function call hierarchy. Files in excess of the limits will be shown but will be permanently collapsed.

• You can purchase an annual license to remove these limitations for a single machine. Create a simple graph with a few files. In the graph window show the "License" toolbar and then click the smiley face to purchase a license. When developing remotely, the license will be valid for all remote machines.

• There is currently a hard cap of the number of files allowed, for performance reasons. Contact me if you need to increase this limit.

How to use it

You can create several types of graphs:

1. Files graph: A graph based on a set of selected files which shows function calls, class inheritance, or interface implementation

2. Function graph: A graph which shows the call hierarchy of single function to a selected call depth

3. Focused symbol graph: A graph which dynamically shows a graph for the function or variable selected in the editor

• To create a graph for selected files:

  In the file explorer select the folders or files to include in the graph, right-click and choose AtomicViz: Create graph for selected files from the context menu. Choose the command AtomicViz: Create graph for selected files, with variables to include variable references.

• To create a graph for a single function to see its call hierarchy:

  In the code, position the cursor on a function name, right-click and choose AtomicViz: Create graph for function from the context menu. You can change the call depth later using the buttons in the toolbar.

• To create a graph of the focused symbol:

  Open the Command Palette (Ctrl+Shift+P) and choose the command AtomicViz: Create graph of focused symbol. An empty graph will be created. Then double-click a function or variable name in the editor to select it and create the graph.

• To open an existing graph file:

  Click on the AtomicViz file (*.atm) in the file explorer. If the graph file is already open, then right-click on the file in the file explorer and choose AtomicViz: Show graph from the context menu.

• To add a file to an existing "files" graph:

  Open the file to add to the graph in the editor. Then right-click on the AtomicViz file in the file explorer and choose AtomicViz: Add active editor file to graph. OR Load or create a graph. Then right-click on a file in the file explorer and choose AtomicViz: Add file to graph.

• To convert a "function" graph to a "files" graph:

  Right-click on the AtomicViz file in the file explorer and choose AtomicViz: Convert 'function' graph to 'files' graph from the context menu.

• NOTE: Files identified in any .gitignore file in the project will be ignored when creating a graph.

Instructions and Documentation

• Detailed instructions and troubleshooting tips can be found at AtomicViz online

• Pan and zoom

  • Pan the graph by clicking and dragging
  • Zoom in using the mouse wheel or a two-finger gesture on the trackpad
  • Zoom out to fit the graph in the window by right-clicking an empty area of the graph, or using the floating toolbar button
  • Zoom to a group by clicking the the group's magnet icon
  • Zoom to a non-group graph item by right-clicking on the item
  • Highlight an arrow by clicking on it

• Code and outline interaction

  • Jump into code by double-clicking a graph item
  • Make the graph follow code editing by checking "Follow graph selection" in the AtomicViz sidebar menu
  • Make the graph follow selection in the outline by checking "Follow graph selection" in the AtomicViz outline menu

• Selection

  • Select/deselect a graph item by clicking on it, to highight its connections
  • Select multiple graph items by holding down the shift key when clicking, or by checking "Multi" in the "Selection" toolbar
  • Deselect all items using the space bar, or using the floating toolbar button

• Arrows

  • Follow an arrow to its source or target by right-clicking on it
  • Double-click an arrow to expand its source and target graph items

• Control graph complexity

  • Remove files and folders

    • Remove a single file by clicking its trash icon
    • Remove groups of files by clicking a group's trash icon

  • Use the "Expand" and "Collapse" commands in the "Visible" menu

    • Expand and collapse a graph item by clicking its arrow icon
    • Expand and collapse graph items of a chosen type using the "Expand" and "Collapse" commands in the "Visible" menu

  • Use the "Hide" and "Show" commands in the "Visible" menu

    • Temporarily hide graph items which are selected
    • Temporarily hide graph items of a chosen type, for example interfaces or class methods called only internally in the class
    • Show hidden children of a graph item by clicking its eye icon

  • Use advanced commands in the "Visible" menu

    • Use Focus mode to temporarily show only the selected items and the items connected to them, to a chosen depth
    • Use Level-of-detail mode to show only the classes and functions which are most connected, to a chosen level of detail
    • Use Community mode to see isolated communties of related classes and functions

Data & Privacy

• Absolutely none of your code or environment data is collected or shared
• The extension runs completely locally except to manage licensing and to send telemetry for extension usage.

How does it work

• AtomicViz uses the language server capabilities of VS Code that are provided for each language. The language server can provide a call hierarchy for any function, so it is possible to build a map of a codebase by interrogating the language server for all the functions in a given scope.

• Graphs are created using Graphviz, so the layout is managed by the Graphviz algorithms.

• Transitions during the expansion or collapse of a graph item try to maintain continuity of position of the item affected. Generally, the top-right corner of an item should remain in position across a transition.

Motivation

• Every codebase is a maze of files. The only semantic information at a quick glance are the file and folder names.

• A graphical representation of a code is more informative, and more useful as a tool for comprehension and navigation. You can easily jump to the sections of code that you are working on, without the need to use bookmarks, search-all-files for a symbol name, or find-all-references for a symbol.

Keywords

• code architecture diagram
• code diagram
• code graph
• code map
• code navigation
• code visualizer
• code visualization
• dependency graph
• dependency diagram
• function call graph
• function call diagram
• function call hierarchy
• call hierarchy

Feedback

I would love to hear your feedback and ideas for improvements. Please report issues in Github or via the Bugs toolbar in the extension. Email any questions of comments to atomicviz11@gmail.com

Thanks!

Support further development

AtomicViz wasn't easy to build. If you find it useful, please consider supporting it.

License

Copyright © Brian DiLoreto 2025