An interactive VSCode extension that visualizes Django project structure as a connected graph of functions, classes, and URL patterns.
- Interactive Graph Visualization: See your Django project's structure as an interactive graph
- Function & Class Navigation: Click on any node to open the corresponding file
- Relationship Mapping: View connections between classes, methods, and URL patterns
- Drag & Drop Layout: Arrange nodes visually to understand relationships better
- VS Code 1.60.0 or higher
- Python 3.6 or higher
- A Django project in your workspace
- Open a folder containing a Django project
- Run the command
Django: Open Project Visualizerfrom the Command Palette (Ctrl+Shift+P) - Click "Analyze Django Project" in the visualizer panel
- Interact with the graph by:
- Dragging nodes to arrange them
- Clicking on nodes to navigate to source code
- Zooming and panning with mouse/trackpad
- Hovering over nodes for details
The extension:
- Scans your Django project using Python's AST (Abstract Syntax Tree) analysis
- Identifies functions, classes, methods, and URL patterns
- Maps the relationships between these elements
- Renders an interactive D3.js visualization in a VSCode webview panel
The extension doesn't require configuration, but future versions may include settings for:
- Graph layout algorithms
- Node color schemes
- File exclusion patterns
- Large Django projects may have slow initial analysis
- Some complex URL routing patterns might not be correctly identified
# Clone this repository
git clone https://github.com/yourusername/django-visualizer.git
# Install dependencies
cd django-visualizer
npm install
# Compile the extension
npm run compile
# Package the extension
vsce packagesrc/extension.ts: Main extension codemedia/: Static assets- Built using the VS Code Extension API and D3.js for visualization
Contributions are welcome! Please feel free to submit a Pull Request.
This extension is licensed under the MIT License.
