MindMesh Board

The problem

Most mind-map tools make you click, drag and link every idea by hand, so the map falls behind the thinking, and the result is stuck in that app. This board also had its own bugs: an idea removed in one tab came back as soon as another tab synced, and nothing kept a growing board from turning into overlapping circles.

• Shapiro et al. (2011): last-writer-wins element sets for replicated data
• Fruchterman and Reingold (1991): force-directed graph drawing
• Card, Moran and Newell (1980): the keystroke-level model
• Lester et al. (1997): the persona effect of animated guides

How I approached it

Tabs share snapshots over BroadcastChannel. Removing an idea leaves a timestamped tombstone, the last-writer-wins element set from Shapiro et al., so an older copy from another tab can't bring it back, while an edit made after the removal still wins; undo restamps what it restores so the other tab follows. Tidy up is a seeded Fruchterman-Reingold spring layout with the spring length capped at 150 px and repulsion cut off past 2k so small maps stay compact, then a pass that pulls apart any circles still touching. Tab places a new linked idea on a free spot facing away from its parent's other links and opens an inline name box, and arrow keys hop to the nearest idea in a 90 degree cone. Lists go in and out by CommonMark nesting rules. Pip is an inline SVG whose face follows the board's state, whose eyes track the pointer and the picked idea, and who speaks through an aria-live bubble.

The outcome

A board you can fill from the keyboard: Tab, type, Tab again. One key tidies it so linked ideas sit together with no overlaps, Copy as list turns it into bullet points, and pasting a list builds a map. Long names wrap inside their circles. 35 tests with no dependencies cover tab merging and tombstones, undo restore, the layout, keyboard placement, label wrapping, list round trips and Pip's tips.