🚀 Problem Statement
Currently, EduFlow-AI excels at generating highly detailed, structured text markdown for course content, summaries, and roadmaps. However, visual learners often struggle to grasp complex relationships between subtopics when reading linear text. There is no native way for students to visualize how core concepts connect to their underlying principles dynamically.
💡 Proposed Solution
Introduce an AI-Powered Visual Mind Map Generator. Instead of just outputting standard markdown, the LLM will generate a hierarchical representation of a study topic, which the frontend will dynamically render into an interactive, zoomable concept map using a library like reactflow or mermaid.js.
Users should be able to:
- Visually explore course relationships (pan, zoom, and drag nodes).
- Click on a specific node to reveal an AI-generated brief explanation in a side panel.
- Save their generated mind maps for later revision.
🛠 Proposed Technical Implementation
- Prompt Engineering & API Layer:
- Create a specialized prompt wrapper that forces the AI provider to output a strict JSON array representing nodes and edges (e.g.,
id, label, parentId, description).
- Frontend Integration:
- Integrate
reactflow to map the returned JSON into an interactive canvas interface.
- Build custom Tailwind-styled nodes that match the EduFlow-AI dark/light design system.
- Database Integration (Supabase):
- Create a new table or append a
mind_mapsJSON column to existing study modules so users can retrieve their generated maps instantly without re-pinging the AI endpoint.
Code Example Concept:
// Sample expected AI Output structure mapped to React Flow
const initialNodes = [
{ id: '1', position: { x: 250, y: 0 }, data: { label: 'Data Structures' } },
{ id: '2', position: { x: 100, y: 100 }, data: { label: 'Linear' } },
{ id: '3', position: { x: 400, y: 100 }, data: { label: 'Non-Linear' } },
];
const initialEdges = [
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e1-3', source: '1', target: '3', animated: true },
];
🚀 Problem Statement
Currently, EduFlow-AI excels at generating highly detailed, structured text markdown for course content, summaries, and roadmaps. However, visual learners often struggle to grasp complex relationships between subtopics when reading linear text. There is no native way for students to visualize how core concepts connect to their underlying principles dynamically.
💡 Proposed Solution
Introduce an AI-Powered Visual Mind Map Generator. Instead of just outputting standard markdown, the LLM will generate a hierarchical representation of a study topic, which the frontend will dynamically render into an interactive, zoomable concept map using a library like
reactflowormermaid.js.Users should be able to:
🛠 Proposed Technical Implementation
id,label,parentId,description).reactflowto map the returned JSON into an interactive canvas interface.mind_mapsJSON column to existing study modules so users can retrieve their generated maps instantly without re-pinging the AI endpoint.Code Example Concept: