A corkboard-style mindmap with subject clusters, note cards, shared tags, links, and expandable details.
Plan
Flat notes can hold information, but they do a poor job showing how ideas actually relate to each other.
The goal was to build a visual board where subjects, notes, tags, and shared ideas could be seen at once instead of being trapped inside separate entries.
I wanted the system to feel like a working corkboard, messy enough to show thought, but structured enough to be useful.
then
Build
Built a data-driven board that renders from structured note objects instead of hardcoded visual elements.
Added draggable navigation, zoom controls, center nodes, main subject nodes, smaller note nodes, red string connections, and dotted shared tag links.
Each node can expand into a detail view, allowing the user to move between the full board and individual note content without leaving the map.
next
Next
Make the board persistent and editable with saved positions, new notes, adjustable links, and direct editing.
Add filtering by tag, project state, subject, or priority so larger boards stay readable.
Turn the system into a flexible knowledge mapping tool for project planning, research notes, writing boards, and idea archives.
Screenshots show the working board layout, expanded note behavior, and relationship mapping. Click any frame to inspect the interface more closely.
Build Notes
The board is built from note data: subjects, tags, card text, positions, and links.
Scope and User Flow
The board gives users a visual way to inspect subjects, notes, tags, and shared relationships. A user can move around the board, zoom in or out, open nodes, and trace how ideas connect without reading through a flat list first.
Data Model
Main subject nodes with title, summary, tags, and connected notes.
Note cards with title, subject, tags, and written thought content.
Shared tags used to draw secondary relationships between notes.
Position data used for layout spacing and collision handling.
Interface Behavior
Drag the corkboard view to explore a larger workspace.
Zoom in, zoom out, and reset the board position.
Open subject nodes or note nodes to inspect stored details.
Render red string and dotted tag lines from structured relationships.
State and Validation
The professional board uses separate demo data from private notes. That split prevents private content from leaking into the professional side while proving the same interface can be reused with different data sets.
Build Notes
The board renders nodes, cards, tags, connectors, and expanded details from structured data. Collision handling keeps notes from stacking directly on top of each other.
Next
Next steps are saved positions, direct editing, tag filters, subject filters, and manual links between cards.