{"id":36964562,"url":"https://github.com/asian-mario/vizual","last_synced_at":"2026-01-13T19:39:24.843Z","repository":{"id":328330969,"uuid":"1115128051","full_name":"asian-mario/vizual","owner":"asian-mario","description":"A node graph-like visualizer for vscode. Filter, search and see what connects to what visualized.","archived":false,"fork":false,"pushed_at":"2025-12-25T15:55:26.000Z","size":101160,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-27T02:51:13.031Z","etag":null,"topics":["aesthetic-visual-analysis","aesthetics","extension","graph","node-graph","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asian-mario.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-12T11:34:24.000Z","updated_at":"2025-12-25T15:55:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/asian-mario/vizual","commit_stats":null,"previous_names":["asian-mario/vizual"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/asian-mario/vizual","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asian-mario%2Fvizual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asian-mario%2Fvizual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asian-mario%2Fvizual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asian-mario%2Fvizual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asian-mario","download_url":"https://codeload.github.com/asian-mario/vizual/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asian-mario%2Fvizual/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28397826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T14:36:09.778Z","status":"ssl_error","status_checked_at":"2026-01-13T14:35:19.697Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aesthetic-visual-analysis","aesthetics","extension","graph","node-graph","vscode","vscode-extension"],"created_at":"2026-01-13T19:39:24.244Z","updated_at":"2026-01-13T19:39:24.835Z","avatar_url":"https://github.com/asian-mario.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vizual\n\n**An interactive node-graph visualizer for VS Code projects**\n\n![Logo](./media/Vizual.png)\n\n![Demo](./media/demo.gif)\nDownload: [vizual-0.1.5(2).vsix](./Releases/vizual-0.1.5(2).vsix) \n\nAn interactive VS Code extension that visualizes your project structure as a node graph, showing folders, files, and code symbols (classes, functions, methods, etc.).\n\n![Release](https://img.shields.io/badge/Release-v0.1.5(2)-blue)\n\n\n## Features\n\n### Interactive Graph Exploration\n- **Incremental Expansion**: Click folders to reveal files, click files to show symbols (classes, functions, variables)\n- **Physics-Based Layout**: Nodes move naturally with Obsidian-style physics simulation\n- **Smart Navigation**: Ctrl+Click any node to open it in your editor with precise symbol positioning\n\n### Customizable Visualization\n- **Node Shapes**: Different shapes for files, folders, classes, functions, methods, variables, and more\n- **Color Rules**: Configure colors by node kind and file extension\n- **Physics Controls**: Adjust center force, link force, and link length to your preference\n\n### Powerful Filtering\n- **Glob Patterns**: Include/exclude files and folders using glob patterns\n- **Max Depth**: Limit graph depth to focus on specific areas\n- **Node Cap**: Performance safety with configurable node limits\n\n### Debug-Aware\n- **Active Mode**: Dims inactive files to highlight your current context\n- **Breakpoint Highlighting**: Files with breakpoints are shown in red\n- **Active File Tracking**: Currently open file is highlighted in green\n\n## Installation\n\n### From VSIX (Local Testing)\n1. Download the latest `.vsix` file from releases\n2. Open VS Code\n3. Press `Ctrl+Shift+P` and run \"Extensions: Install from VSIX...\"\n4. Select the downloaded `.vsix` file\n\n### From Marketplace (Coming Soon)\nSearch for \"Vizual\" in the VS Code Extensions marketplace\n\n## Usage\n\n### Opening the Graph\n1. Open your project in VS Code\n2. Press `F1` or `Ctrl+Shift+P`\n3. Type and select **\"Vizual: Open Project Graph\"**\n\n### Navigating\n- **Left-click folder/file node**: Expand/collapse its contents\n- **Ctrl+Left-click node**: Open the file or jump to symbol in editor\n- **Drag nodes**: Rearrange the graph manually\n- **Zoom**: Mouse wheel to zoom in/out\n- **Pan**: Click and drag empty space\n\n### Customizing\nClick the **Settings** icon in the toolbar to access:\n- **Physics Controls**: Adjust how nodes move and attract each other\n- **Filters**: Include/exclude patterns, max depth, node limits\n- **Colors**: Customize colors for different node types\n\n### Active Mode\nEnable **Active Mode** to focus on your current work:\n- Your active file is highlighted in **green**\n- Files with breakpoints are highlighted in **red**\n- All other nodes are dimmed to **gray**\n\n## Configuration\n\nSettings are stored per-workspace and persist across sessions:\n\n```json\n{\n  \"vizual.centerForce\": 0.05,\n  \"vizual.linkForce\": 0.03,\n  \"vizual.linkLength\": 180,\n  \"vizual.maxDepth\": 5,\n  \"vizual.maxNodes\": 500,\n  \"vizual.includePatterns\": [\"**/*\"],\n  \"vizual.excludePatterns\": [\"**/node_modules/**\", \"**/.git/**\"]\n}\n```\n\n## Node Types \u0026 Shapes\n\n| Type | Shape | Description |\n|------|-------|-------------|\n| Folder | 📁 Box | Directory nodes |\n| File | 📄 Dot | File nodes |\n| Class | ⬟ Hexagon | Class definitions |\n| Function | ⭐ Star | Top-level functions |\n| Method | 🔷 Diamond | Class methods |\n| Variable | ⏹ Square | Variables/constants |\n| Interface | △ Triangle | Interfaces |\n| Enum | △ Triangle | Enumerations |\n\n## Development\n\n### Prerequisites\n- Node.js 22.x or higher\n- VS Code 1.107.0 or higher\n\n### Building from Source\n```bash\ngit clone https://github.com/yourusername/vizual.git\ncd vizual/vizual\nnpm install\nnpm run compile\n```\n\n### Running in Development\n1. Open the `vizual/vizual` folder in VS Code\n2. Press `F5` to launch Extension Development Host\n3. In the new window, run \"Vizual: Open Project Graph\"\n\n### Testing Changes\n```bash\nnpm run watch    # Auto-compile on file changes\nnpm run lint     # Check code style\nnpm run test     # Run unit tests\n```\n\n## Architecture\n\nVizual is built with:\n- **Extension Host (TypeScript)**: File system scanning, symbol extraction via VS Code API, breakpoint tracking\n- **Webview (JavaScript)**: Graph rendering with [vis-network](https://visjs.github.io/vis-network/), physics simulation, user interactions\n- **Message Protocol**: Bidirectional communication for graph updates, expansion, navigation, and settings\n\n## Roadmap\n\n- [ ] Import/dependency edge visualization\n- [ ] Multi-root workspace support\n- [ ] Call graph and reference tracking\n- [ ] Custom color themes\n- [ ] Export graph as image\n- [ ] Search and filter UI enhancements\n\n## Contributing\n\nContributions are welcome! Please feel free to submit issues or pull requests.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the terms found in [LICENSE.md](LICENSE.md).\n\n## Credits\n\nBuilt with:\n- [vis-network](https://visjs.github.io/vis-network/) for graph visualization\n- [VS Code Extension API](https://code.visualstudio.com/api)\n\n---\n\n**Tip**: For best results, enable Active Mode while debugging to keep your focus on the files that matter!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasian-mario%2Fvizual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasian-mario%2Fvizual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasian-mario%2Fvizual/lists"}