WebSketch: GWT-Board für Mindmaps

WebSketch: Textbasierte Mindmaps für GWT-Entwickler

WebSketch ist eine GWT-basierte Webanwendung zur Erstellung strukturierter Textdiagramme. Sie ähnelt einem Mindmap mit Textfeldknoten, unterstützt Verschachtelung und automatische Layoutpositionierung. Exklusiv für den Desktop – keine Grafiken, nur Text und Verbindungen. Perfekt für Daily Stand-ups, Aufgabenplanung oder das Speichern von Links direkt im Git-Repository.

Kernprinzipien des Arbeitsablaufs

Benutzer beginnen mit einem zentralen Knoten und fügen neue Elemente über Strg+Ziehen hinzu. Verbindungen entstehen durch Umschalt+Ziehen. Doppelklick auf ein Textfeld öffnet ein verschachteltes Board mit diesem Knoten in der Mitte. Die Position der Knoten wird aus Text-Hashes generiert – beim Neuladen werden Layouts automatisch wiederhergestellt.

Um die Position eines Knotens zentral zu fixieren, fügt man das Haus-Symbol (Alt+127) ein, das Offset wie ⌂BUGS[+100,+0] speichert. Leerzeichen innerhalb von Textfeldern sind verboten, um ausschließlich Einzelwörter oder kurze Phrasen zu erzwingen.

Wichtige Regeln:

• Nur Desktop-Interface für Büro-Arbeitsabläufe.
• Keine Bearbeitung oder Löschung – nur Hinzufügen, wie beim Schreiben auf echtem Papier.
• Volltextsuche über das gesamte Mindmap, nicht nur die aktuelle Ansicht.
• Hash-Code in der rechten oberen Ecke zur Änderungstracking und Modifikationserkennung.

Datenspeicherformat

Daten werden in einfachen Textdateien mit einfacher Parsing-Logik gespeichert. Der Trenner ist entweder 0 0 oder fünf Leerzeichen. Beispiel-Basisstruktur:

0 0 0 BUGS

Dies definiert den Stammknoten »BUGS«. Ohne Trenner bilden benachbarte Wörter eine Kette:

BUGS FEATURES README TESTS

Ergebnis: eine flache Folge von Knoten. Mit Verschachtelung:

BUGS FEATURES README TESTS 0 0 BUGS FEATURES FEATURE#1

Der serverseitige Algorithmus extrahiert benachbarte Knoten nach Schlüsselwort, scannt die Datei ohne Datenbank. Zahlen in Klammern geben die Termhäufigkeit an.

Datei-Upload/Download ermöglicht manuelle Bearbeitung. Auf dem Tab »Start« wird der Rohcode angezeigt – ideal zum Experimentieren, ähnlich wie mermaid.live.

Praktische Anwendungsfälle

• Daily Stand-Up: Jira-Ticketnummern sofort eintragen, kein Warten auf Service-Ladezeit.
• Projektplanung: Technologien, Fristen und Abhängigkeiten verfolgen.
• Git-Integration: Mindmaps im Repository speichern – neue Entwickler erhalten über Link eine visuelle, verschachtelte Roadmap.
• Persönliche Notizen: Projektfehler, Codestrukturen, Vorlagen dokumentieren.

Beispiel für Entwicklung: zentraler Knoten »app.websketch«, Zweige für Bugs, Features, mit individuellen Koordinaten für präzise Platzierung.

Technische Umsetzung

Basierend auf GWT 2.12.2 (ursprünglich 2.4.0 unter Eclipse 3.5). Frontend parsen und rendert den Baum; Backend nutzt drei Servlets:

• Datei-Upload.
• Datei-Download.
• Nachbarschaftssuche nach Schlüsselwort (Textscan).

Das Update von GWT verlangsamte die Initial-Ladezeit um 10–20 %. Keine Datenbank – Server liest die gesamte Datei und filtert nach aktuellem Wort. Permalink-Teilen erfordert keine Authentifizierung – Link-Zugriff gewährt volle Lese-/Schreibrechte.

Beispiel mit Koordinaten:

BUGS FEATURES README TESTS 0 0 BUGS FEATURES FEATURE#1 ⌂BUGS[+100,+0]

Die GUI zeichnet Verbindungen und behandelt Wortketten als zusammenhängende Knoten.

Hauptvorteile

• Reiner Textformat-Unterstützung mit Notepad und Git – keine externen Abhängigkeiten.
• Hash-basierte Auto-Positionierung sorgt für konsistente Layout-Wiederherstellung.
• Verschachtelte Boards bewahren Hierarchie ohne Leistungseinbußen.
• Minimalistisches Stack: GWT + Servlets, null Datenbank-Overhead.
• Integritätskontrolle via Hash für Teamzusammenarbeit.

— Editorial Team