Nogic
Visualize your codebase structure with interactive diagrams.
Beta
This extension is currently in beta testing. Bugs are expected, and we are constantly iterating to improve the experience.
Supported Languages
- TypeScript / JavaScript - Full support including classes, functions, imports, and call graphs
- Python - Classes, methods, decorators, and module imports
Usage
- Open the Command Palette (
Cmd+Shift+P / Ctrl+Shift+P)
- Run
Nogic: Scan Workspace to analyze your codebase
- Run
Nogic: Open Visualizer to view the interactive diagram
Features
- Unified View: Browse files, classes, and functions in an interactive hierarchical graph
- Boards: Create custom boards to organize and focus on specific code elements
- Class Diagrams: View class relationships, inheritance, and method structures
- Call Graphs: Trace function calls and dependencies across your codebase
- Search: Find specific elements using the search bar (
Cmd/Ctrl+K)
- Collapsible Nodes: Expand/collapse folders, files, and classes to focus on what matters
- Decorator Support: Python decorators are displayed on methods for better context
Tips
- Right-click files/folders in the Explorer to add them to a board
- Use
Cmd/Ctrl+K to quickly search and navigate large codebases
- Click nodes to expand methods and see details
- Double-click to open files in the editor
- Drag to pan, scroll to zoom
- Re-run
Nogic: Scan Workspace after code changes to refresh the visualization
Commands
Nogic: Scan Workspace - Scan the workspace and parse all supported filesNogic: Open Visualizer - Open the interactive visualizerNogic: Create New Board - Create a new boardAdd to Nogic Board - Add a file to an existing board (context menu)
| |
