Code Visualizer 🖥️🔍

Introduction 👨‍🏫

Thanks for checking out Code Visualizer! 🎉 This extension helps developers visualize their code by generating a flowchart that represents the call hierarchy of functions and methods in your codebase. It transforms the often complex structure of code into an easy-to-understand visual format, making it simpler to navigate large projects. 🗺️

Features 🌟

• Flowchart Generation: 📊 Right-click on any function or method, and select 'Visualize' to create a visual representation of its call hierarchy.
• Interactive Visuals: 🖱️ Zoom in, zoom out, and interact with the flowchart to explore different parts of your code.
• Customizable Views: 🎨 Tailor the flowchart to focus on specific function calls, and adjust the layout for better readability.
• Searchable: 🔍 Search for any function or method in the flowchart to quickly navigate to it.
• Multi-Language Support: 🌐 Currently supports C, C++, Python.
  • At least that's the goal of this project. Contributions are welcome! 🤝

How It Works 🛠️

1. Install the extension from the VS Code Marketplace.
2. Right-click on any function or method, and select 'Visualize' to create a visual representation of its call hierarchy.
3. Watch as the extension creates an interactive diagram of function calls 🎭
4. Click on nodes to explore deeper into the call hierarchy 🕵️‍♂️

Code Visualizer uses VS Code's built-in call hierarchy API, making it language-agnostic and powerful across various programming languages. 💪

Features 🚀

• Interactive node-based diagrams 🕸️
• Direct navigation to function definitions 🔗
• Multiple connection visualization for repeated function calls 🔄

How to Contribute 🤝

We're excited to welcome contributors to the Code Visualizer project! Here's how you can get involved:

1. Fork the repository 🍴
2. Clone your fork: https://github.com/Ganjai-Labs/code-visualizer.git 📥
3. Create a new branch: git checkout -b your-feature-name 🌿
4. Make your changes ✏️
5. Run tests: npm test 🧪
6. Commit your changes: git commit -m "Add some feature" 💾
7. Push to the branch: git push origin your-feature-name 🚀
8. Submit a pull request with the description of your changes 🙏

Before contributing, please read our Contributing Guidelines and Code of Conduct. 📚

Features to be Implemented 🔮

We're always looking to improve Code Visualizer. Here are some features we'd love to see:

1. Detect cycles in the generated diagrams, and highlight them in red 🔴

2. Draw multiple connections between nodes when a function is called multiple times 🔄

3. Export diagrams as images or SVGs. Currently, the generated diargams are html files that are not viewable outside of VS Code. 📸

4. Integration with version control to show changes in call hierarchy over time 🕰️

5. Performance optimizations for large codebases ⚡

6. Enhanced filtering options for complex diagrams 🔍

Moon shot 🌙

• Conditional highlighting of nodes based on certain conditions 🎨
• Integration with LLMs to provide more context for the generated diagrams 🤖

Feel free to tackle any of these or propose your own ideas! 💡

Get Started 🚀

Ready to dive in? Install Code Visualizer from the VS Code Marketplace and start visualizing your code today! 😊👨‍💻👩‍💻