FloatDraw

# 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** · [[email protected]](mailto:[email protected])
**Developed by Nhi Le**