FloatDraw

Lightweight floating canvas for any webpage

# FloatDraw — Floating Drawing Canvas for Any Webpage **Sketch. Diagram. Think. Right where you are.** Ever needed to quickly sketch a flowchart while reading documentation, map out an idea during a meeting, or visualize a concept without switching between apps? **FloatDraw** brings a powerful, lightweight drawing canvas directly on top of any webpage. Open it with a keyboard shortcut, position it anywhere on your screen, and start creating instantly. No accounts. No cloud sync. No distractions. **Just a fast, private canvas that stays with you.** ## ✨ Designed for Real Diagramming FloatDraw goes beyond simple doodling. It gives you the essential tools for creating structured diagrams, flowcharts, and visual notes. * **Shapes & Connectors** — Create rectangles, circles, diamonds, lines, arrows, and freehand curves. Smart connectors automatically adjust when you move connected elements. * **Quick-Connect** — Hover over a shape in Select mode to reveal directional handles. Click a handle to instantly create a connected rectangle, diamond, or text label. * **Text Tool** — Add text anywhere and customize it with **bold, italic, underline, font family, font size, color, and alignment**. * **Style Controls** — Quickly customize fill color, border color, stroke width, and dash style from the inline toolbar. * **Multi-Select** — Select multiple elements with a drag box, then move, resize, duplicate, or delete them together. Use **Ctrl+A** to select everything. ## ⚡ Keyboard-First Workflow Designed for speed, FloatDraw keeps your hands on the keyboard: `R` Rect · `O` Circle · `D` Diamond · `L` Line · `A` Arrow · `C` Curve · `T` Text · `V` Select · `H` Hand `Ctrl+Z` Undo · `Ctrl+D` Duplicate · `Delete` Remove · `ESC` Close Use **Scroll** to zoom, **Space + Drag** to pan, and **[ ]** to quickly step through zoom levels. ## 📤 Export Your Work When your diagram is ready, take it anywhere you need: * **PNG** — High-resolution images for documents, notes, and presentations * **SVG** — Scalable vector graphics for presentations and further editing * **JSON** — Save the raw diagram data and continue editing later ## 💾 Your Work, Always There FloatDraw automatically saves your canvas to your browser's **local storage whenever you make a change**. Close the canvas, switch to another webpage, or restart your browser — your diagram will be waiting for you the next time you open FloatDraw. ## 🔒 Private by Design Your ideas stay yours. FloatDraw runs **entirely in your browser**. No account is required, no data is sent to a server, and no cloud sync is involved. Your diagrams remain stored locally on your device. ## 🚀 Think Visually. Without Breaking Your Flow. Whether you're building a flowchart, explaining a concept, brainstorming an idea, or simply sketching something quickly, **FloatDraw keeps visual thinking just one shortcut away.** **No switching apps. No unnecessary setup. Just draw.** --- **Idea by Uyen Huynh** · [uyen.hnp02@gmail.com](mailto:uyen.hnp02@gmail.com) **Developed by Nhi Le**