Code Atlas
Visualize code structure through interactive call graphs and control flow diagrams.
▶Try the demo$ cat story.md
When you build software with AI assistance, you can end up with working code you don't fully understand. Code Atlas helps bridge that gap by visualizing how code actually works.
The insight: most 'AI visualization' tools are actually deterministic. They use AI for convenience, but the core work is AST parsing and graph building. Only data flow analysis might genuinely need LLM interpretation.
Started with a vertical slice: TypeScript file to Mermaid flowchart. The CLI generates control flow diagrams that show if/else branches, loops, and function structure. The web viewer adds interactivity, path highlighting, and project-level views.
$ git status
Project complete. CLI analyzes TypeScript, JavaScript, and Python. Web viewer features: call graphs with collapsible file groups, control flow drill-down, path highlighting (right-click any function), search with auto-center, hover tooltips, and export to PNG/SVG/Mermaid. MCP server integration in progress for Claude Code.
$ ls ./components
- -TypeScript Compiler API and AST manipulation
- -tree-sitter for multi-language parsing
- -Control flow graph algorithms
- -React Flow for interactive graph visualization
- -When deterministic parsing beats AI interpretation
$ ls ./blog/ --project="Code Atlas"
React Context Fixed My Infinite Re-render Loop
Jan 21, 2026Storing selection state in React Flow node data caused an infinite re-render loop. Moving to React Context kept node objects stable and fixed it.
Using Code Atlas to Understand AI-Generated Code
Jan 19, 2026Code Atlas turns source code into interactive diagrams showing function calls, file relationships, and control flow. Built it because I'm a visual learner.