> ## 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. # Visualizer > Browse your codebase as one connected map 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](https://github.com/dagrejs/dagre) and rendered with [React Flow](https://reactflow.dev/). 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](/features/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 | Action | Shortcut | | ----------------- | ------------------------------------------------- | | Focus search | `Cmd+F` / `Ctrl+F` | | Open AI cursor | `Cmd+K` / `Ctrl+K` | | Open file browser | `Cmd+I` / `Ctrl+I` | | Fit view | toolbar button | | Reflow atlas | **Nogic: Reflow Atlas** (clears cached positions) | 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](/features/agent-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//nogic.db`. No code leaves your machine. ## Next Drive the canvas with `Cmd+K` and AI-rendered diagrams See risk levels and blast radius for changed code