WebSketch: GWT board for mind-map

WebSketch: Text-Based Mind Mapping for GWT Developers

WebSketch is a GWT-based web app designed to create structured text diagrams. It mimics a mind map with textbox nodes, supports nesting and automatic layout positioning. Built for desktop use only—no graphics, just text and connections. Perfect for daily stand-ups, task planning, or storing links directly in a git repository.

Core Workflow Principles

Users start with a central node, adding new elements via Ctrl+drag. Connections are created using Shift+drag. Double-clicking a textbox opens a nested board with that node at the center. Node positions are generated from text hashes—reloading restores layouts automatically.

To lock a node’s position in the center, add the home symbol (Alt+127), which saves offsets like ⌂BUGS[+100,+0]. Spaces inside textboxes are blocked to ensure only single words or short phrases are used.

Key rules:

• Desktop-only interface for office workflows.
• No editing or deletion—only additions, just like writing on real paper.
• Full-text search across the entire mind map, not just the current view.
• Hash code displayed in the top-right corner to track changes and detect modifications.

Data Storage Format

Data is stored in plain text files with simple parsing. The delimiter is either 0 0 or five spaces. Example base structure:

0 0 0 BUGS

This defines the root node "BUGS." Without delimiters, adjacent words form a chain:

BUGS FEATURES README TESTS

Result: a flat sequence of nodes. With nesting:

BUGS FEATURES README TESTS 0 0 BUGS FEATURES FEATURE#1

The server-side algorithm extracts neighboring nodes by keyword, scanning the file without a database. Numbers in parentheses indicate term frequency.

File upload/download enables manual editing. The "Start" tab displays raw code for experimentation—similar to mermaid.live.

Practical Use Cases

• Daily Stand-Up: Log Jira ticket numbers instantly, no waiting for service load.
• Project Planning: Track technologies, deadlines, and dependencies.
• Git Integration: Store mind maps in your repo—new developers get a visual, nested roadmap via link.
• Personal Notes: Document project bugs, code structures, templates.

Example for development: central node "app.websketch," branches for bugs, features, with custom coordinates for precise placement.

Technical Implementation

Built on GWT 2.12.2 (originally 2.4.0 under Eclipse 3.5). Frontend parses and renders the tree; backend uses three servlets:

• File upload.
• File download.
• Neighbor node lookup by keyword (text scan).

Updating GWT slowed initial load by 10–20%. No database—server reads the full file and filters by current word. Permalink sharing requires no authentication—link access grants full read/write rights.

Example with coordinates:

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

GUI draws connections and treats word chains as unified nodes.

Key Highlights

• Plain text format works with Notepad and Git—no external dependencies.
• Hash-based auto-positioning ensures consistent layout recovery.
• Nested boards maintain hierarchy without performance loss.
• Minimalist stack: GWT + servlets, zero database overhead.
• Integrity control via hash for team collaboration.

— Editorial Team