Skip to content

README.md

Latest commit

 

History

History
80 lines (58 loc) · 2.86 KB

README.md

File metadata and controls

80 lines (58 loc) · 2.86 KB
Raw

FlowMind – Problem to Flowchart (AI-DSA-Visualizer).

FlowMind is an AI-powered platform that transforms data structure and algorithm (DSA) problems into multi-language code solutions, step-by-step AI explanations, and interactive flowchart visualizations.
Built with React, Express.js, and powered by Google Gemini, FlowMind is designed to make DSA learning intuitive, visual, and interactive.

Features

🤖 Gemini-Powered Intelligence

  • Accepts plain-text DSA problem statements.
  • Uses Gemini to generate:
    • Multiple solutions in C++, Python, Java, JavaScript.
    • Time & space complexity analysis.
    • Pros and cons of each approach.
    • Step-by-step logic breakdown.

🧠 Visual Algorithm Flow

  • Dynamically generated interactive flowcharts for each solution.
  • Visual representation of control flow using React-based rendering and Mermaid.js-style parsing.
  • Clear logical paths and decisions are mapped directly from Gemini's response.

👑 N-Queen Problem Visualizer

  • Specialized visualization for the N-Queen problem.
  • See each queen's placement step-by-step.
  • Real-time updates as the algorithm backtracks and explores new configurations.

🌐 API-Driven Architecture

  • Backend built with Express.js.
  • Gemini API used to handle prompt crafting and AI response parsing.
  • Postman used extensively for testing and documenting all API endpoints.

🧪 Technologies Used

Layer Tech Stack
Frontend React.js, Tailwind CSS, Mermaid
Backend Node.js, Express.js
AI Integration Google Gemini API
Testing Postman

How It Works...

  1. User Input:

    • Enter your DSA problem and choose a programming language.

  2. Gemini Processing:

    • The backend sends structured prompts to Gemini API.
    • Gemini returns multiple code solutions, complexity analysis, pros/cons, and a detailed explanation.

  3. Flowchart Generation:

    • The response is parsed and translated into Mermaid-compatible syntax.
    • React renders the flowchart using a custom visualization engine.

  4. Visualization (N-Queen Example):

    • If finds the problem is n queen then, it enables.
    • A custom recursive visualizer built in React shows how the N-Queen problem is solved step-by-step.
    • Great for understanding backtracking algorithms visually.

Installation

Prerequisites

  • Node.js & npm
  • Google Gemini API Key
  • Postman (for API testing)

🔄 Clone the Repository

git clone https://github.com/Mansi07sharma/ai-dsa-visualizer.git
cd ai-dsa-visualizer/flowmind
npm install
npm run dev

On going learning and projects...
Thanks for reaching out.