RAG Knowledge Map - Interaktive Web-App

Vollständiges Repository mit interaktiver Web-App und Prompt-Dokumentation für Retrieval Augmented Generation (RAG).

📁 Repository-Struktur

/workspace/
├── src/                            # React App Quellcode
│   ├── components/                 # React Komponenten
│   │   ├── KnowledgeMapFlow.jsx
│   │   └── Sidebar.jsx
│   ├── data/                       # Daten & Konfiguration
│   │   └── knowledgeMap.js
│   ├── assets/                     # Bilder & Icons
│   ├── App.jsx                     # Haupt-App-Komponente
│   └── main.jsx                    # Entry Point
│
├── public/                         # Statische Assets
├── docs/                           # Dokumentation
│   ├── RAG-Knowledge-Map-Master-Prompt.md
│   ├── RAG-Fachbereich-Variante.md
│   ├── RAG-Deep-Dive-Engineers.md
│   ├── RAG-Schulungsmodule.md
│   └── RAG-Knowledge-Map-README.md
│
├── index.html                      # HTML Entry Point
├── package.json                    # Dependencies
├── vite.config.js                  # Vite Konfiguration
├── vercel.json                     # Vercel Deployment Config
└── README.md                       # Diese Datei

🚀 Die Web-App

Features

✅ Interaktive Cluster-Visualisierung mit React Flow ✅ Drill-Down-Details - Klick auf Cluster für mehr Infos ✅ 6 Kern-Cluster + 4 Erweiterte Cluster ✅ Modernes Dark UI mit leuchtenden Akzenten ✅ Vollständig responsiv ✅ Zoom, Pan & MiniMap

Quick Start

npm install
npm run dev

Die App läuft auf http://localhost:5173

Production Build

npm run build
npm run preview

📚 Prompt-Dokumentation

1. Master-Prompt (Universal)

Datei: docs/RAG-Knowledge-Map-Master-Prompt.md

Für gemischte Teams (Tech & Business). Enthält alle Cluster mit Drill-Down-Logik.

2. Fachbereich-Variante

Datei: docs/RAG-Fachbereich-Variante.md

Business-fokussiert ohne tiefe Tech-Details. Ideal für Manager, Product Owner.

3. Deep-Dive für Engineers

Datei: docs/RAG-Deep-Dive-Engineers.md

Technische Pipeline-Architektur mit Code-Snippets. Für Developer & Architects.

4. Schulungsmodule

Datei: docs/RAG-Schulungsmodule.md

12 Module mit 3 Lernpfaden (Business/Engineers/Management).

🎯 Anwendungsfälle

Web-App verwenden für:

• 🎓 Schulungen - Live-Demos mit interaktiver Map
• 📊 Präsentationen - Beeindruckende Stakeholder-Meetings
• 📖 Dokumentation - Visuelle Referenz für Teams
• 🚀 Onboarding - Neue Mitarbeiter schnell einarbeiten

Prompts verwenden für:

• 🎨 Eigene Visualisierungen - In GPT-4, DALL·E, Midjourney, Figma AI, Miro, Whimsical
• 📝 Dokumentation erstellen - Als Basis für eigene Docs
• 🏢 Workshops - Als strukturierte Agenda

🛠️ Technologien

Web-App:

• React 18 + Vite
• React Flow (Visualisierung)
• Lucide React (Icons)
• CSS3 mit Animationen

Prompts:

• Markdown-Dokumentation
• Strukturiert für Visual AI Tools

📖 Dokumentation

Alle Dokumentation findest du im docs/ Ordner:

• App-Dokumentation: docs/RAG-Knowledge-Map-README.md
• Prompts: Siehe "📚 Prompt-Dokumentation" oben

🎨 Anpassungen

Web-App anpassen

1. Cluster hinzufügen/ändern: src/data/knowledgeMap.js
2. Design ändern: src/App.css
3. Layout anpassen: src/components/KnowledgeMapFlow.jsx

Prompts anpassen

Einfach die Markdown-Dateien im docs/ Ordner bearbeiten und in dein Visual AI Tool kopieren.

🚢 Deployment

Web-App deployen

Die App kann auf verschiedenen Plattformen gehostet werden:

Vercel:

npm run build
# Verbinde mit Vercel CLI oder GitHub

Netlify:

npm run build
# Drag & Drop dist/ Ordner zu Netlify

GitHub Pages:

npm run build
# Kopiere dist/ zu gh-pages Branch

💡 Tipps

Für beste Ergebnisse:

1. Web-App: Nutze Chrome/Edge für beste Performance
2. Prompts: Iteriere mit Visual AI Tools für optimale Ergebnisse
3. Kombiniere beide: Zeige die Web-App UND erkläre mit Prompts

📞 Support

Bei Fragen oder Problemen:

• Erstelle ein Issue im Repository
• Oder passe die Dateien direkt an deine Bedürfnisse an

🎓 Weitere Ressourcen

• React Flow Docs: https://reactflow.dev/
• Vite Docs: https://vitejs.dev/
• RAG Papers: Suche nach "Retrieval Augmented Generation" auf arXiv

📄 Lizenz

Dieses Projekt (App + Prompts) ist frei verwendbar für kommerzielle und nicht-kommerzielle Zwecke.

---

🎉 Los geht's!

# Starte die App
npm install
npm run dev

Öffne http://localhost:5173 und erkunde die RAG Knowledge Map!

---

Happy Exploring! 🚀