Ein interaktives Werkzeug zur Visualisierung von Beziehungen
Kontext:
Im Rahmen eines selbst initiierten Nebenprojekts entwickelte ich eine webbasierte Mindmap-Anwendung, die komplexe Beziehungen und Hierarchien visuell und interaktiv darstellbar macht. Das Tool ist sowohl für persönliche Notizen als auch für strategische Planungsprozesse einsetzbar.
Funktionen und Besonderheiten
Zwei Darstellungsmodi:
Nutzer:innen können zwischen einer hierarchischen Baumstruktur (Tree) und einem relationellen Netzwerk (Graph) wechseln. Beide Modi unterstützen die gleichen Interaktionen.
Markdown-Editor:
Die Mindmap lässt sich direkt als strukturierte Liste im Markdown-Format bearbeiten – inklusive Auto-Bullet, Ein-/Ausrücken (Tab/Shift+Tab), Undo/Redo und Echtzeit-Visualisierung.
Import & Export:
Dateien können im Markdown- oder JSON-Format importiert und exportiert werden. Relationen zwischen Knoten werden ebenfalls erkannt und visualisiert.
Suche & Navigation:
Eine Suchleiste mit Live-Highlighting und Trefferanzeige erleichtert die Navigation innerhalb komplexer Strukturen.
Darstellung & Animation:
Knotenabstände, Größen, Schriftgrößen und Animationen lassen sich über ein Einstellungsmenü individuell anpassen.
Darkmode & Farbschemata:
Ein Umschaltbarer Darkmode sowie mehrere Farbschemata verbessern die visuelle Lesbarkeit – auch in Präsentationen.
Lokale Speicherung:
Die App speichert automatisch den aktuellen Zustand und lädt beim nächsten Aufruf genau dort weiter.
Anwendung & Code
Das gesamte Projekt wurde mit D3.js, HTML5, CSS und Vanilla JavaScript umgesetzt. Der Markdown-Parser basiert auf marked.js. Ziel war es, eine flexible, performante und vollständig clientseitige Lösung zu schaffen – ohne Serverabhängigkeiten.
Link zur Live-Demo
GitHub-Repository
→ zum Code