Skip to main content

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.

​
Step 1: Install the extension

Install Nogic from the VS Code Marketplace:
  1. Open VS Code
  2. Open the Extensions sidebar (Cmd+Shift+X / Ctrl+Shift+X)
  3. Search for Nogic (publisher: Nogic)
  4. Click Install
Or install from the command line: 
code --install-extension Nogic.nogic
VSCodium and other Code OSS forks work too (Nogic supports VS Code engine 1.88.0+).

​
Step 2: Open the visualizer

Open any project folder, then either:
  • Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run Nogic: Open Visualizer, or
  • Click the Nogic icon in the editor title bar
The first time, Nogic will offer to Index Workspace. Accept it. The extension scans your files, parses symbols (JS / TS / Python today), and stores everything locally under ~/.nogic/workspaces/. Files in other languages appear in the tree without parsed symbols; the AI canvas (Step 5 below) still works on them.
Nogic also opens the visualizer automatically when you open a workspace. Disable that in Settings → Extensions → Nogic → nogic.openOnStartup if you prefer manual control.

​
Step 3: Explore the graph

You’re now looking at your codebase as a connected map.
  • Pan / zoom with trackpad or scroll wheel
  • Search with Cmd+F (or Ctrl+F) to jump to a file or symbol
  • Right-click any node and choose Inspect to focus it with its connections
  • Right-click files or folders in the Explorer and choose Add to Nogic Board to build a focused view
See the Visualizer page for the full feature tour.

​
Step 4: Connect an AI client

Nogic ships a local MCP server that lets AI clients draw answers directly on the canvas via Cmd+K. When you first open the visualizer, the MCP Setup overlay appears with:
  • Whether Claude Code and Codex are installed and on your PATH
  • The local MCP server URL (e.g. http://127.0.0.1:54123/mcp)
  • Toggles to enable each CLI
Install whichever CLI you’d like to use, toggle it on, and dismiss the overlay. You can reopen it anytime via Nogic: Show MCP Setup.

Claude Code

Set up Claude Code (Cmd+K and external use)

Codex

Set up Codex (auto-managed config)

​
Step 5: Ask a question on the canvas

With the visualizer focused, press Cmd+K (or Ctrl+K). The on-canvas Director cursor opens. Type something like:
Walk me through how authentication works in this app.
Nogic streams your prompt to the active CLI, which calls the local MCP server. Within seconds the canvas reflows into a diagram with a step-by-step narrative: sequence, dataflow, state machine, ER, or a curated tour of real code, depending on the question. See Agent Canvas for what the AI can render and how to drive it.

​
Next steps

Visualizer

Boards, inspect mode, search, auto-sync

Agent Canvas

What the AI cursor can draw on the canvas

Diff Analyze

AI-driven diff map with risk and blast radius

MCP Tools

The MCP server and the canvas tools it exposes