🧠 Mind Map Generator

An automatic mindmap generator built with Next.js, LangChain, and OpenAI GPT-5-Nano. The system analyzes input text, extracts key ideas, and generates a fully connected hierarchical mindmap, with nodes and edges automatically positioned.

---

🚀 Features

• ✅ Automatic hierarchical mindmap generation with a single root node.
• ✅ LangChain for embeddings and document retrieval.
• ✅ Supports OpenAI models (gpt-5-nano, text-embedding-3-small).
• ✅ Dynamically calculates number of nodes and hierarchy depth based on text length.
• ✅ Input validation (minimum 5 words, maximum 4000 characters).
• ✅ Automatic node positioning with Dagre.js.
• ✅ Output as structured JSON, ready for visualization.
• ✅ Mindmaps can be exported as images (PNG/JPEG).

---

⚙️ Tech Stack

• Next.js – React framework.
• LangChain – LLM and embeddings pipeline.
• OpenAI – gpt-5-nano and text-embedding-3-small.
• Dagre.js – Hierarchical graph layout.
• TypeScript – Strong typing.

---

📂 Project Structure

src/
├── app/
│ ├── api/route.ts # Main API endpoint (mindmap generation)
│ └── [locale]/ # Routing & layout configs
├── lib/
│ ├── constants.ts # Layout configuration & node dimensions
│ ├── types.ts # TypeScript types (MindmapNode, RawMindmapData, etc.)
│ └── utils.ts # Utilities: validation, chunking, positioning
├── components/
│ ├── atoms/ # Atoms (Button, Textarea, etc.)
│ ├── molecules/ # Molecules (DownloadButton, GenerateForm, etc.)
│ └── organisms/ # Organisms (Header, MindMapDisplay, etc.)
├── data/
│ └── mockData.ts # Sample mock data
├── i18n/ # Internationalization
└── globals.css # Global styles

---

🧩 Atomic Design in the Frontend

The frontend follows Atomic Design principles:

⚛️ Atoms (/components/atoms)

Smallest UI building blocks:

• Button.tsx → Reusable button.
• Textarea.tsx → Text input.

🧬 Molecules (/components/molecules)

Groups of atoms that form a unit:

• DownloadButton.tsx → Button to export results.
• GenerateForm.tsx → Form to submit text to the API.
• SummaryList.tsx → List of extracted key points.

🌱 Organisms (/components/organisms)

Complete UI sections:

• Header.tsx → App header.
• MainCard.tsx → Main container.
• MindMapDisplay.tsx → Interactive mindmap viewer.
• SummaryCard.tsx → Summary of extracted points.

---

🛠️ Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/mental-map-generator.git
   cd mental-map-generator

2. Install dependencies:

   npm install

3. Configure environment variables in .env.local:

   OPENAI_API_KEY=your_openai_api_key
   

4. Run in development mode:

   npm run dev

---

📌 API Example

Request

POST /api/mindmap
{
  "text": "Artificial intelligence is transforming industries such as healthcare, education, and transportation. Its applications range from medical diagnostics to self-driving cars."
}

Response

{
  "key_points": ["AI in healthcare", "AI in education", "AI in transportation"],
  "mindmap": {
    "nodes": [
      { "id": "1", "data": { "label": "Artificial Intelligence" }, "position": {} },
      { "id": "2", "data": { "label": "Healthcare" }, "position": {} },
      { "id": "3", "data": { "label": "Education" }, "position": {} },
      { "id": "4", "data": { "label": "Transportation" }, "position": {} }
    ],
    "edges": [
      { "id": "e1-2", "source": "1", "target": "2" },
      { "id": "e1-3", "source": "1", "target": "3" },
      { "id": "e1-4", "source": "1", "target": "4" }
    ]
  }
}

---

🖼️ Exporting the Mindmap as an Image

The generated mindmap can be exported as PNG or JPEG using frontend utilities.

The DownloadButton.tsx molecule triggers the export.

The visualization (MindMapDisplay.tsx) can be rendered inside a <canvas> or using a library like html-to-image or dom-to-image.

Users can download the mindmap for presentations, documentation, or reports.

---

📘 Learnings: Embeddings & Chunking

🔹 Embeddings

Convert text into numerical vectors representing semantic meaning.

Used for semantic search and context retrieval.

Implemented with:

new OpenAIEmbeddings({ model: "text-embedding-3-small" })

🔹 Chunking

Long texts are split into chunks to fit within LLM token limits.

In this project:

chunkSize = 1000, chunkOverlap = 200

This prevents loss of context between chunks.

🔹 Balance

• Large chunks → risk exceeding token limits.
• Small chunks → too many embeddings → slower + more expensive.

Best practice: 500–1000 characters with ~200 overlap.

🔹 Retrieval Chain

Combines embeddings + LLM.

Retrieves the most relevant chunks before generating the final mindmap.

🔹 Input validation

• Minimum: 5 words
• Maximum: 4000 characters

---

🔮 Roadmap

• 🌐 Interactive UI to edit & customize mindmaps.
• 📊 Export to graphic formats (PNG, PDF).
• 🔍 Advanced multilingual support.
• 🤝 Integration with external knowledge bases.