ForgeDraw User Guide

Quick Start

Go to forgedraw.vercel.app — no install needed, it runs entirely in your browser.
Start drawing! Pick a shape tool from the left sidebar and click-drag on the canvas.

Your diagrams live in your browser session only — nothing is stored on a server.

Save: click “Save” in the top bar to download your diagram as a file. Re-open it later with “Load”.
Important: if you close or refresh the tab without saving, your work is lost. Always save before leaving.
Export as image: use “Ex PNG”, “Copy PNG”, or “SVG” in the top bar to export your diagram as a picture.
Your chosen theme (light/dark) is remembered between visits.

Pan: hold the middle mouse button (scroll wheel) and drag to move around the canvas.
Zoom: scroll the mouse wheel to zoom in and out.
Fit: click “Fit” in the top bar to zoom so the entire diagram fits on screen.
Reset: click “Reset” to return to the default zoom and position.

Select: left-click a shape or text to select it.
Move: drag the selected item to reposition it.
Multi-select: hold Shift and click to add/remove items, or hold Shift and drag on empty canvas to draw a selection box.
Sweep select: click the “ptr/swp” toggle under Select in the sidebar to switch to Sweep mode — drag across items to select them without releasing the mouse.
Group move: when multiple items are selected, dragging one moves them all.
Nudge: use arrow keys to move selected items in small steps (hold Shift for bigger steps).
Snap guides: when you drag shapes near each other, alignment guides appear automatically.
Grid snap: toggle the “Grid” button in the top bar to snap items to a grid. You can adjust the grid size next to the button.
Tidy: select 2 or more items and click “Tidy” to arrange them in a neat row or grid.
Fit Text: select a shape that has text inside it and click “Fit Text” to resize the shape to match the text.
Equalize: select 2 or more shapes and click “Equalize” to make them all the same size.

Pick a tool from the left sidebar, then click-drag on the canvas to draw.

Rectangle, Ellipse, Diamond, Triangle, Hexagon: click-drag to draw the shape.
Pen: click-drag to draw freehand sketches.
Arrow: click-drag from one shape to another to connect them. Small dot markers show where connectors will attach.
Text: click to place a text box, then type. Press Enter to save (Shift+Enter for a new line, Esc to cancel). Double-click existing text to edit it.
Eraser: click any shape, arrow, or text to delete it. Use the “clk/swp” toggle under Eraser in the sidebar for sweep erase — drag across items to erase everything the cursor touches.

Stroke color: when a drawing tool is active, click the colored circle in the top bar to pick a stroke color.
Stroke width: click a thickness button in the top bar to change line weight (1, 2, 3, 5, or 8).
Bold / Italic: select text and press Ctrl+B or Ctrl+I (or use the B / I buttons in the top bar).
Text alignment: select text and click “Align” in the top bar to cycle between left, center, and right.

Edit endpoints: select an arrow, then drag its endpoint handles to reattach to different shapes.
Labels: select an arrow and click its label area to add or edit text on the arrow.
Move: select an arrow and drag to reposition it.

Click “Undo” or “Redo” in the top bar, or press Ctrl+Z / Ctrl+Y (Cmd+Z / Cmd+Y on Mac).

This feature is under active development. You can import an existing image and convert it into editable shapes — results may vary.

Click “Import” in the top bar and choose a PNG file.
Local detection works instantly, no setup needed — best with simple black-and-white images.
AI detection can recognize shapes in more complex or colored images. It requires a free API key from OpenRouter — the import dialog walks you through the setup.
After detection, review the results and toggle shapes on/off before adding them to your canvas.

Select 2 or more items and press Ctrl+G to group them. Selecting one item in a group selects all of them.
Press Ctrl+Shift+G to ungroup.

Theme: click the Light/Dark toggle in the header to switch themes.
Help: click the “?” button in the header for quick tips. You can drag the help panel by its title bar to move it, or click ⧉ to pop it out as a floating, resizable panel.
All shapes render with a sketchy, hand-drawn style.