⚡ Code Flow Visualizer

Transform your code into beautiful, interactive flowcharts — instantly.

---

🌐 Live URL

Landing Page: https://anshmajumdar121.github.io/code-flow-visualizer/

---

---

🎬 Demo Preview

Try it instantly — no install needed. Paste any Python function and watch it become a flowchart in real time.

📝 Sample Input

def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n - 1)

📖 About

Code Flow Visualizer is a fully client-side, browser-based tool that converts your code into clean, interactive flowcharts in real time. No backend. No installation. Just open and start visualizing.

Built entirely with HTML, CSS, and vanilla JavaScript — zero frameworks, zero dependencies, zero runtime costs. Everything runs in your browser.

---

✨ Features

Feature	Description
🌐 Multi-Language Support	Python, JavaScript, Java, C++, and more
📐 Auto-Layout Engine	Smart automatic graph layout — no manual positioning
🐛 Step Debugger	Walk through loops and branches line by line
📤 Export & Share	Export as PNG, SVG, or generate a shareable link
💬 Annotations	Add notes to any node to explain logic
🔒 Secure by Default	All code processed in-memory — nothing stored
⚡ Zero Dependencies	Pure HTML + CSS + JS — works fully offline
📱 Responsive Design	Works on desktop, tablet, and mobile

---

🗂️ Project Structure

code-flow-visualizer/
├── index.html        # Landing / Hero page
├── playground.html   # Interactive visualizer app (full JS engine inside)
├── LICENSE           # Business Source License 1.1
└── README.md         # You are here

Note: All JavaScript logic — the flowchart engine, AST parser, step debugger, and canvas renderer — lives inside playground.html as self-contained <script> blocks. This keeps the project dependency-free and instantly deployable with zero build steps.

---

🚀 How It Works

Step 1 — Paste Code     →  Drop Python, JS, Java, C++ or pseudocode into the editor
Step 2 — Parse & Layout →  An AST (Abstract Syntax Tree) is built; flowchart auto-generates
Step 3 — Explore Steps  →  Click any node to inspect variable state and step through execution

---

🛠️ Tech Stack

Layer	Technology
Structure	HTML5
Styling	CSS3 (Glassmorphism, Grid, Animations)
Logic	Vanilla JavaScript (AST parser, canvas renderer, step debugger)
Hosting	GitHub Pages

No React. No Node.js. No build tools. Clone and open — it just works.

---

🧑‍💻 Running Locally

# Clone the repository
git clone https://github.com/anshmajumdar121/code-flow-visualizer.git

# Navigate into the project
cd code-flow-visualizer

# Open in your browser — no build step needed!
open index.html

Or simply visit the live GitHub Pages URL.

---

🔐 License & Usage Restrictions

This project is protected under the Business Source License 1.1 (BSL 1.1).

Permission	Status
View & study the code	✅ Allowed
Personal / non-production use	✅ Allowed
Copy or redistribute	❌ Not allowed
Re-host or public fork	❌ Not allowed
Commercial use without license	❌ Not allowed
Create derivative products	❌ Not allowed

Converts to MIT License four years after the first public release date.

📄 Full license: LICENSE

💼 Commercial licensing: majumdar82@gmail.com

---

💖 Support the Project

If Code Flow Visualizer saved you time or helped you learn, consider supporting:

Method	Details
🇮🇳 UPI	anshmajumdar100@okhdfcbank
💳 PayPal	majumdar82@gmail.com

Every contribution keeps this project free for everyone ❤️

---

👤 Author

Ansh Majumdar — Systems Thinker | Problem Solver | Builder

• 🔗 GitHub: @anshmajumdar121
• 💡 Focus: Scalable backends, data-driven systems, real-world impact
• 🧠 Philosophy: "I don't just write code — I architect solutions. Every line has a purpose."

---

Made with ❤️ by Ansh Majumdar  |  © 2026 Code-Visualizer