Visualizer

Documentation Index

Fetch the complete documentation index at: https://docs.nogic.dev/llms.txt

Use this file to discover all available pages before exploring further.

The visualizer is the heart of Nogic. It renders your workspace as a unified graph of files, classes, functions, and the imports/calls/types that connect them, laid out automatically with Dagre and rendered with React Flow. Open it any time with Nogic: Open Visualizer from the Command Palette, or click the Nogic icon in the editor title bar.

​

Unified view

Files, classes, functions, methods, and components live in one graph. Folders nest visually so you keep a sense of project structure while you trace connections.

• Edge types: imports, calls, references, type relationships, inheritance
• Smart zoom: distant nodes simplify to labels; details reveal as you zoom in
• Selected nodes stay in front so you don’t lose them when zooming out
• Auto-sync: file changes reflect on the canvas in real time

​

Search

Press Cmd+F (or Ctrl+F) inside the visualizer. The search bar handles structural lookups (filename, symbol name, partial path) and pans/zooms to the match. Search is purely structural; AI-driven “explain this” queries live behind Cmd+K (see Agent Canvas).

​

Boards

Boards are focused, named subsets of the codebase. Use them to keep an authentication map, an API surface map, or whatever cross-section you reach for repeatedly. Create a board

• Right-click any file or folder in the Explorer → Add to Nogic Board
• Or click Add Files in the visualizer (or press Cmd+I / Ctrl+I) to pick from a workspace browser
• Empty boards open straight into the file browser so you can populate them

The first folder you add auto-renames the board. New files created under folders already on a board are picked up automatically when you rescan. Boards persist across sessions and survive layout changes. You can keep many open and switch between them without losing position.

​

Inspect mode

Right-click any node and choose Inspect to isolate it with its directly connected nodes. The subgraph re-lays itself out for clarity, edges show at full opacity, and you can incrementally expand by right-clicking a neighbor → Add Connected Nodes. Press Esc (or click the close button) to drop back to the full canvas.

​

Layout & navigation

Layout direction (LR / TB / BT / RL) and edge visibility (always / on-select / hidden) are tunable per board from the toolbar.

​

Performance

The atlas handles 30k+ files. Nodes simplify automatically when zoomed out, folder collapse states are preserved per board, and the selected node always stays interactive even when its neighborhood is abstracted.

​

Language support

The visualizer renders parsed symbols, so it only shows nodes for languages Nogic can parse: JavaScript / TypeScript (including JSX/TSX) and Python. Files in other languages still appear as leaves on the file tree, but they don’t get classes, functions, or call edges. If you work in a language Nogic doesn’t parse yet, the AI canvas still works: Cmd+K doesn’t depend on the symbol index for most diagram types.

​

Privacy

All parsing, indexing, and rendering happens locally. The graph database lives at ~/.nogic/workspaces/<hash>/nogic.db. No code leaves your machine.

​

Next