{"id":51026728,"url":"https://github.com/gitstq/codeviz-pro","last_synced_at":"2026-06-21T20:02:15.971Z","repository":{"id":360853642,"uuid":"1251993919","full_name":"gitstq/codeviz-pro","owner":"gitstq","description":"🕸️ Interactive code knowledge graph visualizer - turn any codebase into an explorable, interactive graph","archived":false,"fork":false,"pushed_at":"2026-05-28T05:10:22.000Z","size":26,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-28T07:09:01.463Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/gitstq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2026-05-28T05:07:38.000Z","updated_at":"2026-05-28T05:10:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gitstq/codeviz-pro","commit_stats":null,"previous_names":["gitstq/codeviz-pro"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gitstq/codeviz-pro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fcodeviz-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fcodeviz-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fcodeviz-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fcodeviz-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitstq","download_url":"https://codeload.github.com/gitstq/codeviz-pro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fcodeviz-pro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34623906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2026-06-21T20:02:15.157Z","updated_at":"2026-06-21T20:02:15.964Z","avatar_url":"https://github.com/gitstq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🕸️ CodeViz Pro\n\n**English** | [简体中文](README.zh-CN.md) | [繁體中文](README.zh-TW.md)\n\n\u003e Turn any codebase into an interactive, explorable knowledge graph\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/gitstq/codeviz-pro)](https://github.com/gitstq/codeviz-pro/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/gitstq/codeviz-pro)](https://github.com/gitstq/codeviz-pro/network)\n\n## 🎉 Introduction\n\n**CodeViz Pro** is a powerful, browser-based code visualization tool that transforms any codebase into an interactive knowledge graph. Unlike traditional code analysis tools that require complex setup, CodeViz Pro runs entirely in your browser with zero dependencies.\n\n### 🌟 Key Differentiators\n\n- **Pure Frontend**: No backend required, runs entirely in browser\n- **Multiple Layout Algorithms**: Force-directed, hierarchical, circular, and grid layouts\n- **Interactive Editing**: Drag nodes, zoom, pan, and explore your code structure\n- **GitHub Integration**: Directly analyze public repositories via GitHub API\n- **Export Options**: Save your graphs as PNG, SVG, or JSON\n- **Multi-language Support**: Full support for English, Simplified Chinese, and Traditional Chinese\n\n## ✨ Core Features\n\n### 🎨 Visual Exploration\n- **Interactive Graph**: Click, drag, zoom, and pan through your codebase\n- **Smart Layouts**: Choose from 4 different layout algorithms\n- **Node Highlighting**: Focus on specific components and their relationships\n- **Search \u0026 Filter**: Quickly find files, functions, or classes\n\n### 📊 Layout Algorithms\n| Layout | Description | Best For |\n|--------|-------------|----------|\n| **Force** | Physics-based force-directed layout | General exploration |\n| **Tree** | Hierarchical tree structure | Understanding inheritance |\n| **Circle** | Circular arrangement | Overview of components |\n| **Grid** | Grid-based organization | Structured comparison |\n\n### 🔧 Customization\n- **Node Sizing**: Adjust node sizes dynamically\n- **Link Distance**: Control spacing between nodes\n- **Charge Strength**: Modify repulsion/attraction forces\n- **Label Toggle**: Show/hide node labels\n- **Type Filtering**: Filter by files, functions, classes, or imports\n\n### 📥 Import Options\n- **JSON Import**: Load custom graph data\n- **GitHub URL**: Analyze public repositories directly\n- **Sample Data**: Try built-in examples\n\n### 📤 Export Options\n- **PNG Image**: High-resolution raster export\n- **SVG Vector**: Scalable vector graphics\n- **JSON Data**: Save graph structure for later\n\n## 🚀 Quick Start\n\n### Option 1: Online Demo\nVisit [https://gitstq.github.io/codeviz-pro](https://gitstq.github.io/codeviz-pro) to try it instantly.\n\n### Option 2: Local Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/gitstq/codeviz-pro.git\n\n# Navigate to project\ncd codeviz-pro\n\n# Start local server\nnpx serve . -p 3000\n\n# Or simply open index.html in your browser\n```\n\n### Option 3: Docker\n\n```bash\ndocker run -p 3000:80 gitstq/codeviz-pro\n```\n\n## 📖 Usage Guide\n\n### Basic Usage\n\n1. **Import Data**\n   - Click \"Import\" button\n   - Choose from JSON, GitHub URL, or Sample data\n\n2. **Explore the Graph**\n   - Click nodes to see details\n   - Drag to rearrange\n   - Scroll to zoom\n   - Right-click to pan\n\n3. **Customize View**\n   - Use sidebar to change layout\n   - Adjust settings for node size and spacing\n   - Filter by node types\n\n4. **Export Results**\n   - Click \"Export\" button\n   - Choose PNG, SVG, or JSON format\n\n### Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| `Ctrl/Cmd + O` | Open import dialog |\n| `Ctrl/Cmd + S` | Open export dialog |\n| `Ctrl/Cmd + F` | Focus search box |\n| `Ctrl/Cmd + 0` | Reset view |\n| `Esc` | Close dialogs |\n\n### GitHub Repository Analysis\n\n1. Click \"Import\" → \"GitHub URL\"\n2. Enter repository URL (e.g., `https://github.com/facebook/react`)\n3. Click \"Analyze\"\n4. Explore the generated graph\n\n⚠️ **Note**: GitHub API has rate limits. For private repositories, authentication is required.\n\n## 💡 Design Philosophy\n\n### Why CodeViz Pro?\n\nExisting code visualization tools often require:\n- Complex installation and configuration\n- Backend servers and databases\n- Command-line expertise\n- IDE plugins\n\nCodeViz Pro eliminates these barriers by providing a **zero-setup, browser-first** solution that anyone can use immediately.\n\n### Technical Choices\n\n- **D3.js**: Industry-standard for data visualization\n- **Vanilla JavaScript**: No framework dependencies\n- **Pure CSS**: Customizable and lightweight\n- **Font Awesome**: Consistent iconography\n\n## 📦 Deployment\n\n### GitHub Pages\n\n1. Fork this repository\n2. Go to Settings → Pages\n3. Select \"Deploy from a branch\"\n4. Choose `main` branch and `/ (root)` folder\n5. Your site will be live at `https://yourusername.github.io/codeviz-pro`\n\n### Netlify\n\n```bash\n# Install Netlify CLI\nnpm install -g netlify-cli\n\n# Deploy\nnetlify deploy --prod --dir=.\n```\n\n### Vercel\n\n```bash\n# Install Vercel CLI\nnpm install -g vercel\n\n# Deploy\nvercel --prod\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please follow these steps:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'feat: add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Commit Convention\n\nWe follow the [Angular Commit Convention](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit):\n\n- `feat:` New feature\n- `fix:` Bug fix\n- `docs:` Documentation changes\n- `style:` Code style changes (formatting)\n- `refactor:` Code refactoring\n- `test:` Test changes\n- `chore:` Build process or auxiliary tool changes\n\n## 🗺️ Roadmap\n\n- [ ] **v1.1.0**: Support for more programming languages\n- [ ] **v1.2.0**: Real-time collaboration\n- [ ] **v1.3.0**: AI-powered code analysis\n- [ ] **v1.4.0**: Custom themes and styling\n- [ ] **v2.0.0**: Plugin system for extensibility\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Inspired by [Understand-Anything](https://github.com/Lum1104/Understand-Anything)\n- Built with [D3.js](https://d3js.org/)\n- Icons by [Font Awesome](https://fontawesome.com/)\n\n## 📞 Support\n\n- 🐛 [Report Bug](https://github.com/gitstq/codeviz-pro/issues)\n- 💡 [Request Feature](https://github.com/gitstq/codeviz-pro/issues)\n- 💬 [Discussions](https://github.com/gitstq/codeviz-pro/discussions)\n\n---\n\n\u003cp align=\"center\"\u003e\n  Made with ❤️ for the developer community\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fcodeviz-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitstq%2Fcodeviz-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fcodeviz-pro/lists"}