ForgeDraw User Guide

Quick Start

1. Go to forgedraw.dreamforgeworld.com and click Start Drawing, or open the editor directly at forgedraw.dreamforgeworld.com/app.
2. Start drawing! Pick a shape tool from the left sidebar and click-drag on the canvas.

Saving Your Work

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 JSON file. ForgeDraw shows a confirmation toast, and your browser saves it in your normal downloads location. Re-open it later with “Load”.
• Autosave: your diagram is automatically saved to browser storage every few seconds. If you accidentally close the tab, a recovery prompt will appear next time you open ForgeDraw.
• 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.

Canvas Navigation

• 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.

Selection and Movement

• 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.
• Delete: press Delete or Backspace to remove selected items.
• Select All: press Ctrl+A (Cmd+A on Mac) to select every shape, text, and arrow.

Drawing Tools

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. Text placed inside a shape automatically wraps to fit the shape width. You can also drag existing text onto a shape to attach and auto-fit 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.

Styling

• Stroke color: click the colored circle in the styling row to pick a stroke color. This sets the color for new shapes and also applies instantly to any selected shapes or arrows.
• Stroke width: click a thickness button in the styling row to change line weight (1, 2, 3, 5, or 8). Applies to new shapes and to any selected shapes or arrows.
• Stroke style: click the solid/dashed/dotted buttons in the styling row to change line style. Use dashed lines to indicate planned or optional elements. Applies to new shapes and to any selected shapes or arrows.
• Fill color: click the square swatch in the styling row to pick a fill color. Choose from pastels, saturated colors, or “no fill” (transparent). Fills render at 35% opacity to maintain the sketchy aesthetic. Applies to new shapes and to any selected shapes.
• Edit existing styles: select a shape or arrow, and the stroke/fill controls appear in the styling row showing the item’s current colors. Pick a new color, width, or style to update the selected items. Fully undoable.
• Font: choose from five handwriting fonts — Caveat (default), Patrick Hand, Kalam, Comic Neue, or Architects Daughter — using the dropdown in the styling row.
• Font size: click S / M / L / XL in the styling row to set font size. Applies to new text and any selected text.
• Text color: click the colored circle in the styling row to pick a text color. Applies to new text and any selected text.
• Bold / Italic: select text and press Ctrl+B or Ctrl+I (or use the B / I buttons in the styling row).
• Text alignment: select text and click “Align” in the styling row to cycle between left, center, and right.

Arrows

• Straight vs. Elbow: when the Arrow tool is active, click the “str/elb” toggle beneath it in the sidebar to switch between straight-line and orthogonal (right-angle) routing. You can also toggle an existing arrow by selecting it and clicking the “Straight/Elbow” button in the styling row.
• 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.

Icons

ForgeDraw includes the full Lucide icon library (~1,900 icons) you can drop onto the canvas to build system architecture diagrams, ERDs, and flowcharts.

Opening the icon panel

Click the panel icon in the top-right header (next to the theme toggle) to show or hide the right-side Icons panel. The panel’s open/closed state is remembered across reloads.

The panel auto-hides on narrow screens (below about 834 pixels wide).

Pinned icons

When the panel opens, you see a curated set of ~30 icons that work well in diagrams: server, database, cloud, user, lock, mail, globe, and more. These are always visible under the Pinned header.

Searching all icons

Type in the search box to filter across the entire Lucide library — try “server”, “lock”, “wifi”, “file”, “cloud”. The grid switches to a Results (N) view. Clear the search to return to pinned icons.

Dragging icons onto the canvas

Drag any tile from the panel onto the canvas. The icon appears at the drop point as a 48×48 shape, already selected.

Once on the canvas, an icon behaves like any other shape:

• Move, resize, rotate with the selection handles (minimum size 16×16).
• Recolor the outline via the stroke controls.
• Connect it with arrows — arrow endpoints snap to icon edges.
• Add a label by double-clicking inside the icon.
• Group with other shapes, copy/paste, undo/redo — all work the same.

Sketchy mode

Icons render with clean vector strokes by default — consistent with Lucide’s look.

Select an icon and look for the Sketchy button in the second topbar row. Click it to re-render the icon hand-drawn (matching the sketchy style of ForgeDraw’s shapes). Click again to go back to clean. Each icon has its own sketchy state, so you can mix both modes freely.

Undo / Redo

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

Copy / Paste

• Copy: select items and press Ctrl+C (Cmd+C on Mac) to copy them to the clipboard.
• Paste: press Ctrl+V (Cmd+V on Mac) to paste. Pasted items appear offset by 20px and become the new selection. You can also right-click on the canvas and choose Paste to place items at the click location.
• Duplicate: press Ctrl+D (Cmd+D on Mac) to duplicate selected items in one step.
• Arrows connected to copied shapes stay connected. Arrows referencing shapes not in the clipboard become free-floating.
• Grouped items retain their group relationships when pasted.

Grouping

• 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.

Right-Click Menu

• Right-click any shape, icon, arrow, or text to open a context menu. Right-clicking a target that isn't already selected auto-selects just that item (mirrors Figma / Finder). Right-clicking an item that's already part of a multi-selection keeps the whole selection intact.
• The top of the menu has quick Select mode and Arrow mode toggles — a ✓ marks the currently active tool. Clicking either switches the tool and closes the menu, so you can immediately draw an arrow between shapes or return to select mode without traversing to the sidebar.
• The menu includes Delete, Duplicate, Copy, Paste, Group, Ungroup, and inline color swatches for changing stroke and fill colors without going to the top bar.
  • Stroke row appears when the selection contains any shape, icon, or arrow.
  • Fill row appears only when the selection contains a non-icon shape (icons and arrows are outline-only).
• Right-click on empty canvas for Paste and Select All.
• The menu auto-clamps to stay on screen when you right-click near a viewport edge.

Command Palette

• Press Ctrl+K (Cmd+K on Mac) to open the command palette.
• Type to search for any tool or action, then press Enter to run it.

Minimap

• A minimap in the bottom-right corner shows an overview of your diagram.
• Click on the minimap to jump to that area of the canvas.
• Drag the minimap by its top edge to reposition it anywhere on screen.
• Click the × to hide it; click “Map” to show it again.

App Controls

• Logo: click the ForgeDraw logo to return to the production home page.
• Theme: click the Light/Dark toggle in the header to switch themes.
• Help: click the “?” button in the header for quick tips. Drag the title bar to move it, drag the bottom-right corner to resize, click ⧉ to pop it out as a floating panel, or press Esc to close.
• All shapes render with a sketchy, hand-drawn style.