Atomic Viz
Atomic Viz builds an interactive map of your codebase from the code itself, so you can understand a system's architecture at a glance and navigate it from the picture.
- Generated from your real code. AtomicViz reads the call hierarchy and references from VS Code's language server, so the graph always reflects what your codebase actually does.
- Interactive. Collapse, expand, focus, search, and double-click any item to jump into the source.
- Made for today's pace. Graph a subsystem in seconds, see what a Git change ripples into, or ask your AI assistant to build and annotate the graph for you.
- Documentation
- Video tutorials
Easy to use
- Select a set of files to generate an interactive code diagram
- Show function call hierarchies, variable references, class inheritance, and interface implementation
- Group items by folder, file, or custom logical groups to organize the graph
- Hide and collapse items to reduce the level of detail
- An integrated outline mirrors the graph and aids navigation
- Works with TypeScript, JavaScript, Python, Java, C++, Rust, and other major languages
Mermaid and PlantUML Those are excellent for a diagram you create yourself. Now Mermaid AI can even sketch a diagram from basic facts it observes. But AtomicViz generates the diagram directly from the code, showing the connections that the language server can prove are there. With AtomicViz AI you can now leverage your AI assistant to create and annotate these language-accurate graphs. When you need a picture to share, AtomicViz exports to Mermaid, PlantUML, SVG, Graphviz DOT, and PNG.
Features (NEW)
- No more file limits: The free tier's cap on the number of files in a graph is gone. Graphs are now metered by a rolling 30-day allowance. See Free vs. Pro below.
- Drive AtomicViz with AI: Build, shape, and annotate graphs in natural language from GitHub Copilot, Claude Code, or any assistant that speaks MCP. They run on your own AI subscription; AtomicViz never calls a language model itself.
- Git changes graph: See what you changed in your working tree and what it ripples into, color-coded for review.
- Notes: Attach text notes to any class, function, file, group, or arrow to capture the meaning that the code alone does not carry. Notes are saved with the graph and travel with it when it is shared.
- Layout control: Draw custom groups around related items to mark out a subsystem, a layer, or a feature — across files and folders. Align items into the same column, or to the left or right, and the arrangement is kept every time the graph is redrawn.
- Cycles mode: Find the parts of the system that depend on each other in a loop — between folders, files, or classes — one cycle at a time.
- More exports: Mermaid, PlantUML, and Graphviz DOT, in addition to SVG and PNG.
Features
Drive AtomicViz with AI
Build, manipulate, and annotate your graphs in natural language — from GitHub Copilot, Claude Code, or any other assistant that speaks MCP. They all run on your own AI subscription; AtomicViz never calls a language model itself.
AtomicViz runs a small MCP server inside the extension, on your machine. One server, every assistant — so the graph you are looking at, its live state and your language servers are all shared with whichever assistant you prefer.
AtomicViz registers itself, writing the connection into an .mcp.json in your workspace and keeping it current. It merges into any .mcp.json already there, so your other MCP servers are left alone. Every client reads that one file and starts the server itself the first time it needs it.
- Claude Code: There's nothing to do — it discovers the tools the next time it runs in that workspace.
- Copilot: Ask for a graph in agent mode. The first AtomicViz call asks you to approve it, and choosing Allow always stops it asking again.
If an assistant reports that it cannot reach AtomicViz, you can start the server by hand: open the Command Palette, run MCP: List Servers, find atomicviz and start it.
The server is local (127.0.0.1), so the assistant has to run on the same machine as the extension. Under Remote‑SSH, WSL, or a Dev Container the extension runs on the remote host, so run Claude Code there too — in the integrated terminal. A Claude Code running on your local machine cannot reach it. Copilot is unaffected, since it runs inside the same VS Code as the extension, and the browser editors (vscode.dev / github.dev) are not supported.
Ask it to build a graph of a specific subsystem, to focus on the flow of data, or to simplify a graph down to what matters. Ask it to add semantic meaning by writing descriptive notes on items, and by drawing the arrows that static analysis cannot see — dependency injection, event emitter→listener, HTTP client→handler.
Where an AI assistant on its own can only draw what it has read, here it drives a graph built from the language server, so what you get back is checked against the code.
The Explore modes are far more powerful with an AI assistant
- Focus and Interaction modes start from a set of items. The native version of these modes use your selection, so you can only focus on what is already in the graph. But an AI assistant can pick the items itself — "how does checkout work?" becomes the right handful of components, including the ones you didn't know to look for.
- Community and Level Of Detail come in two versions. The native version uses the extension's own calculation (Louvain community detection, ranking by how connected something is for Level Of Detail). The AI-powered versions are based on the assistant's reading of your source, and can leverage the insights only an AI can provide.
The graph always labels which one you are looking at, AI-powered or Native, beside the Exit button. See the guide for what each version does.
See the Drive AtomicViz with AI guide for setup and example prompts.
Git changes graph
See exactly what changed in your Git working tree and how it ripples through the codebase — a graph built for reviewing changes.
Run AtomicViz: Create graph of Git changes from the Command Palette (Ctrl+Shift+P). You'll be asked a few things:
- Which changes to compare?
- Uncommitted changes: The working tree vs the last commit (HEAD)
- Staged changes: What's about to be committed
- Changes since a commit: The working tree vs a base commit you pick (for example the start of a branch), to review a whole pull request's worth of change at once
- Which direction to trace?
- Impact: Who calls the changed code (what might I have broken?)
- Dependencies: What the changed code calls (what does this change rely on?)
- How many levels?: How far to follow callers/callees outward from the changes
If your changes span multiple languages, you'll also pick which language to graph.
The graph then color-codes every symbol, and opens with a legend. See the online help for the color legend and details of what the graph does and doesn't capture.
Requirements
- Install the language pack for your language
Graph types
You can create several types of graphs:
Files: A graph based on a set of selected files. You can show function calls, class inheritance, interface implementation, variable references, or variables that are type instances.
Function: A graph which shows the call hierarchy of a single function to a selected call depth
Focused symbol: A graph which dynamically shows a graph for the function or variable selected in the editor
Git changes: A graph showing changes in your working tree and what is affected
Create a graph
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. When multiple languages are found in the files, choose the language to graph. Files identified in any .gitignore file in the project are skipped.
To create a graph for a single function to see its call hierarchy:
In the editor select a function name, right-click and choose AtomicViz: Create graph for selected function from the context menu. You can change the call depth using the Graph 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 create a graph of the Git changes:
Open the Command Palette (Ctrl+Shift+P) and choose the command AtomicViz: Create graph of Git changes. Answer a few questions to configure the graph.
To open a graph saved to file:
Click the AtomicViz file (*.atm) in the file explorer to open it and its graph is drawn. Or right-click the file — in the file explorer or in the editor — and choose the command AtomicViz: Show graph from the context menu.
To add a file to an existing "files" graph:
Open the file to add in the editor, then right-click the AtomicViz file in the file explorer and choose AtomicViz: Add active editor file to graph. Alternatively, with a graph open, right-click a file in the file explorer and choose AtomicViz: Add file to graph. Or click the button in the Graph toolbar to rebuild the graph showing calls to outside files: arrow icons then appear beside the functions making those calls, and clicking one lets you choose the file to add.
Attach notes
Attach text notes to a graph to capture the meaning that the code alone does not carry — why a class exists, what a subsystem is for, what an arrow really represents.
- Note any graph item: a class, function, method, or variable; a file; a folder group or a custom group; or an arrow.
- Add and browse notes from the Notes toolbar. A noted item shows a small blue "i" icon; click it to reopen the note.
- Notes are saved in the AtomicViz (.atm) file, so they travel with a saved or shared graph.
- Notes are free and unlimited.
Free vs. Pro
New installations start with 14 days of Pro access. After that some features are limited by a rolling 30-day allowance.
Always free:
- Graphs of a single function call hierarchy, at any call depth
- Graphs of the focused symbol in the editor
- All tools to manipulate, explore, annotate, and navigate graphs
- Saving graphs to local
.atm files
- Any number of files in a graph — the old file limits have been removed. A performance safeguard clamps a single graph at 300 files; raise it in settings
A rolling 30-day free allowance covers:
- Generation of Files graphs - Creating new graphs of a set of files. Applies to creating, rebuilding, and opening saved graphs.
- Generation of Git changes graphs - Covered by its own separate allowance.
- AI natural language — Building and annotating graphs from Copilot, Claude Code, or any MCP client.
- Publishing & picture export — Publishing to the hosted viewer, and exporting graphs as SVG, PNG, Mermaid, PlantUML, or Graphviz DOT. Each has its own allowance.
- Projects — Graph generation is restricted to a small number of distinct VS Code workspace folders. Returning to a workspace you have already graphed in the current window costs nothing.
Why opening a saved graph counts as a build. AtomicViz never shows you a stale picture. A saved AtomicViz graph records what to graph, not a snapshot of the drawing, so opening one rebuilds it from your code as it is right now. That is what keeps every arrow correct and enables code navigation. It does mean that if you keep many saved graphs and open them often, you will reach the allowance sooner.
Each allowance runs on its own rolling 30-day window, so the free version keeps working indefinitely. AtomicViz warns you as an allowance runs low and tells you when it renews. When you reach a limit, you'll be invited to upgrade.
An annual license for Atomic Viz Pro removes all limitations.
To purchase an annual license (valid for a single machine, or for all remote machines when developing remotely), click the Buy a license cart button at the top of the Atomic Viz side panel. You can also open the License toolbar in any graph and click the smiley face.
See the Free vs. Pro comparison for the full breakdown.
Documentation
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 It Works
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, and references for any function, variable or type, so it is possible to build a map of a codebase by interrogating the language server for all the items in a given scope.
Graphs are initially created using Graphviz, so the specific layout is managed by the Graphviz algorithms.
Motivation
- Every codebase is a maze of text files that can't be naturally consumed and understood at a glance.
- A graphical representation of the code is a more immediate and comprehensive view, and more useful as a tool for understanding and navigation.
Feedback
I would love to hear your feedback and ideas for improvements.
Thanks!
Support Development
If you find AtomicViz useful, please consider supporting further development.
License
Copyright © Brian DiLoreto 2026
| |
