Skip to content
cd ../projects
BuiltTypeScriptTypeScript Compiler APItree-sitterReact FlowelkjsMermaid.js

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.

$ ls ./components

TypeScript ParserPython ParserControl Flow AnalyzerCall Graph AnalysisMulti-file Project AnalysisMermaid GeneratorCLI ToolInteractive Web ViewerMCP Server
  • -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