🌟 Overview

Pro Whiteboard & Mind Map Studio is a world-class, browser-based creative suite designed for professional architects, developers, and visual thinkers. It bridges the gap between free-form artistic expression and structured logical mapping. Whether you are sketching a complex UI flow or brainstorming a multi-threaded system architecture, this studio provides the tools to visualize ideas with zero friction.

Tip

Use the Mode Toggle in the top bar to switch between a raster-style Whiteboard and a node-based Mind Map environment instantly.

---

🚀 Key Features

🎨 1. Professional Drawing Suite

• Precision Instruments: Pen, Brush, Highlighter, and Marker with adjustable opacity and size.
• Vector Shapes: Instant generation of Lines, Arrows, Rectangles, Circles, Triangles, Diamonds, and Stars.
• Smart Fill & Eyedropper: Advanced flood-fill algorithm and pixel-perfect color sampling.
• Dynamic Text & Notes: Overlay multi-line text and digital sticky notes for annotation.

🧠 2. Intelligent Mind Map Engine

• Node Hierarchy: Create Root and Child nodes with automatic connection logic.
• Auto-Layout: One-click radial layout algorithm to organize messy brainstorms.
• Styling Engine: Customize node shapes (Rounded, Rect, Pill) and color gradients.
• Interactive UI: Drag-and-drop nodes with real-time connection re-rendering.

🛠️ 3. Workflow & Export

• Multi-Page Support: Add, delete, and navigate through multiple canvas instances.
• History Engine: 60-step Undo/Redo buffer for mistake-proof creativity.
• Pro Exports: Save as PNG, JPG, WebP, or generate a Print-Ready PDF.
• Canvas Control: Grid overlays, Dark/Light modes, and 10% to 500% Zoom levels.

---

📐 Technical Architecture

Mental Model: The Dual-Layer System

The application operates on two distinct logical layers synchronized via a shared state.

graph LR
    A[User Input] --> B{Mode Selector}
    B -- Whiteboard --> C[Canvas 2D Context]
    B -- Mind Map --> D[Node Logic Engine]
    C --> E[Raster Buffer / History]
    D --> F[Object Array / Connections]
    E --> G[Final Export]
    F --> G

Loading

🔍 Line-by-Line Technical Analysis

Code Section	Functionality	Logic Breakdown
const history = []	State Management	Stores DataURLs of the canvas state to manage Undo/Redo operations.
floodFill()	Pixel Manipulation	Uses a Stack-based Seed Fill algorithm to traverse and recolor adjacent pixels.
mmAutoLayout()	Graph Theory	Uses a recursive radial distribution to calculate $(x, y)$ coordinates for nodes.
ctx.setLineDash()	Stroke Styling	Dynamically toggles between [15,10] (Dashed) and [3,8] (Dotted) arrays.
zoomLevel	Coordinate Mapping	Normalizes Mouse Events by dividing screen coordinates by the current scale factor.

---

⌨️ Keyboard Shortcuts (Power User Guide)

Important

Mastering these shortcuts will increase your workflow speed by up to 300%.

Category	Shortcut	Action
Tools	P, B, H, M	Pen, Brush, Highlighter, Marker
Shapes	L, A, R, C	Line, Arrow, Rectangle, Circle
Editing	Ctrl + Z / Y	Undo / Redo
Canvas	Space (Hold)	Pan / Hand Tool
System	Ctrl + S	Open Download Panel
Brush	[ or ]	Decrease / Increase Size

---

🏗️ Technical Analogies

• The Canvas is like a physical whiteboard, but with a "Time Machine" (Undo/Redo) and "Infinity Paper" (Multi-page).
• The Mind Map Engine acts like magnets on a board; when you move one, the strings (connections) automatically stretch and follow.
• Flood Fill is like pouring water into a container; it flows until it hits a "wall" (a different color pixel).

---

🧪 Challenges for Future Enhancement

1. Persistence: Implement localStorage to save drawing states so they survive a browser refresh.
2. Collaboration: Integrate WebSockets (Socket.io) to allow two users to draw on the same canvas simultaneously.
3. SVG Support: Convert the Whiteboard raster output into a true SVG path for infinite scalability.

Developed with ❤️ for Visual Thinkers

Designed for Performance. Built for Creativity.