🧠 MindM

KI-gestütztes Mind-Mapping in 2D & 3D — Ideen denken, strukturieren und mit dem LLM erweitern.

Ein freies Open-Source-Werkzeug von CHOLO STUDIO.

Selbst hostbar · eigene API-Keys · kein Tracking · MIT-lizenziert.

---

Überblick

MindM ist eine browserbasierte Mind-Mapping-App, die klassisches Brainstorming mit einem LLM verbindet. Jeder Knoten ist ein Gesprächspartner: Stelle eine Frage, und die KI schlägt strukturierte Unterknoten vor, die automatisch als Kinder angelegt und per Auto-Layout angeordnet werden.

Die App bietet drei Ansichten auf dieselben Daten — eine 2D-Canvas, eine immersive 3D-Ansicht und eine Agent-Pipeline — und läuft komplett im Browser (localStorage-Persistenz, kein Backend nötig).

---

✨ Features

Mind-Mapping (2D)

• ReactFlow-Canvas mit eigenen Knoten- und Kanten-Komponenten
• Drag mit Hierarchie — beim Verschieben eines Knotens bewegen sich alle Nachfahren mit
• Automatische Farben — Erstebenen-Kinder zyklisch eingefärbt, tiefere Knoten erben die Elternfarbe
• Auto-Layout via ELK.js in 6 Richtungen: RIGHT, LEFT, DOWN, UP, RADIAL, TREE
• Semantische Kategorien — Problem, Lösung, Frage, Ressource, Aufgabe, Erkenntnis, Referenz
• Kontextmenü & Keyboard-Shortcuts für schnelles Bearbeiten

KI-Integration

• OpenRouter-Anbindung — Zugriff auf viele Modelle über eine API
• Streaming — Antworten erscheinen Token für Token (SSE)
• suggest_nodes-Tool — die KI liefert strukturierte Knoten, die automatisch als Kinder entstehen
• Hierarchie-bewusst — der Prompt berücksichtigt die Position des Knotens im Baum
• Pro-Knoten-Konversationen — jeder Knoten hat seinen eigenen Chat-Verlauf

3D-Ansicht

• Fünf 3D-Layouts: 🌪️ Tornado, 🔵 Zylinder, 🧬 Helix, 🌐 Sphäre, 🧠 Neural
• Three.js / react-three-fiber mit animierten Knoten und Kanten
• Immersive-Effekte — Partikel, Environment, Post-Processing (Bloom etc.)
• HUD & 3D-Steuerung mit eigenen Keyboard-Shortcuts
• Lazy-loaded — Three.js wird nur geladen, wenn die 3D-Ansicht geöffnet wird

Agent-Pipeline (Backend-Ansicht)

• Visuelle Pipeline der Agent-Stufen: System-Prompt → Kontext → Tools → Modell → Output
• Skills/Templates pro Stufe konfigurierbar
• Eigene Detail-Panels und Presets

Arbeiten mit Inhalten

• Sidebar mit drei Tabs: Details (TipTap/Markdown-Editor), Chat, Artefakte
• Artefakte pro Knoten — Text, Links, Bilder, Dateien (bis 2 MB)
• Tags und Knoten-Beschreibungen
• Volltextsuche über alle Knoten (Fuse.js)
• Explorer-Panel — Baumübersicht der gesamten Map

Multi-Map & Persistenz

• Tabs — mehrere Mind Maps parallel (Cmd+T / Cmd+W)
• Auto-Save — debounced Schreiben in localStorage
• Auto-Backup — regelmäßige Sicherungen
• Datei-Export/Import: .mindm.json, sowie Import von ReactFlow-JSX
• Export als Bild, JSON und Markdown

UI

• Dark/Light-Theme
• Deutsche Oberfläche
• CSS-Variablen-basiertes Theming, Outfit + JetBrains-Mono-Fonts

---

🎯 MVP-Umfang

Der funktionale Kern, der die App nutzbar macht:

#	MVP-Baustein	Status
1	2D-Mindmap erstellen, bearbeiten, verschieben (mit Hierarchie-Drag)	✅
2	Auto-Layout (ELK.js)	✅
3	KI-Knotenvorschläge per OpenRouter + Streaming	✅
4	Pro-Knoten-Chat	✅
5	Sidebar: Details / Chat / Artefakte	✅
6	Auto-Save + Datei-Speichern/-Laden (.mindm.json)	✅
7	Volltextsuche	✅
8	3D-Ansicht (mind. Tornado-Layout)	✅

Über den MVP hinaus bereits umgesetzt: Multi-Tab, 5 verschiedene 3D-Layouts, Agent-Pipeline-Ansicht, Auto-Backup, Markdown-/Bild-/JSON-Export, Explorer-Panel, semantische Kategorien.

---

🚀 Schnellstart

npm install      # Abhängigkeiten installieren
npm run dev      # Dev-Server (Vite, HMR) → http://localhost:5173

OpenRouter-Key hinterlegen: In den Einstellungen unter API & Modelle eintragen (wird in localStorage als mindm-openrouter-key gespeichert).

Weitere Befehle

npm run build    # tsc -b && vite build  → Production-Build nach dist/
npm run preview  # Production-Build lokal vorschauen
npm run lint     # ESLint

---

🛠️ Tech-Stack

Bereich	Technologie
Framework	React 19 + TypeScript (strict)
Build	Vite 7
State	Zustand (+ Immer)
2D-Canvas	@xyflow/react (ReactFlow)
3D	Three.js · @react-three/fiber · drei · postprocessing
Layout	ELK.js
Editor	TipTap
UI-Primitives	Radix UI · lucide-react · sonner
Suche	Fuse.js
LLM	OpenRouter API

---

🏗️ Architektur (Kurzfassung)

• Stores (src/stores/): mindMapStore, uiStore, chatStore, artifactStore, scene3dStore, backendStore, tabStore, settingsStore
• 2D (src/components/canvas/) · 3D (src/components/canvas3d/) · Backend (src/components/backend/)
• Services (src/services/): llm.ts (OpenRouter-Streaming), storage.ts, layout.ts, backup.ts, Exporter & 3D-Layouts
• IDs via nanoid, Theming über CSS-Variablen, kein Router (Single-Page)

Mehr Details: siehe CLAUDE.md.

---

📦 Deployment

Enthält Dockerfile, Caddyfile und nginx.conf für ein Container-Deployment der statischen dist/-Ausgabe. Läuft rein statisch — kein Backend, keine Datenbank, kein Server-Secret. Deine Daten bleiben im Browser (localStorage), dein OpenRouter-Key liegt ausschließlich lokal bei dir.

---

📇 Frei nutzbar

MindM ist die Visitenkarte von CHOLO STUDIO — offen gelegt, damit man sieht, wie wir bauen:

• MIT-Lizenz — frei nutzen, anpassen, weitergeben.
• Selbst hosten — npm run build, dist/ irgendwo statisch ausliefern. Fertig.
• Eigene Keys — keine geteilten Schlüssel, kein Konto bei uns. Du bringst deinen OpenRouter-Key mit, er verlässt deinen Browser nie.

Softwarestudio für Gastronomie und Mittelstand in Rhein-Main → cholo.studio

---

_{Gebaut mit React, Three.js & einer Prise KI · CHOLO STUDIO · MIT}