How to use Hello Drawing

Start with a blank canvas, sketch an idea, and turn it into an editable diagram. This quick guide shows the actual editor, from your first shape to a temporary drawing session with someone else. No account needed.

New to the project? Read what Hello Drawing includes, how personal drawings are stored, and how to keep a downloaded backup.

1. Press a tool letter, then draw

Click empty canvas to focus it. Press R for a rectangle, C for a circle, A for an arrow, or P for freehand drawing. Drag to draw. Press V to select and move objects. You can also choose tools directly from the toolbar, including on a touchscreen.

Select a shape and press Enter to add a label, or double-click it. Draw arrows between shapes; bound arrow ends follow the shapes when you move them. Double-click an arrow to label its request or response. Undo with Ctrl+Z, or Cmd+Z on macOS.

Hold Space while dragging to pan, or choose the hand tool. Use the bottom-left zoom controls and press Shift+1 to fit your whole diagram on screen. See all keyboard shortcuts.

2. Turn a sketch into a shape

Press D or choose Draw to shape in the main toolbar. Sketch a simple outline or a straight stroke and release the pointer. The editor recognizes supported gestures and turns them into editable shapes or lines. It works best with clear, simple strokes; if a result is different from what you intended, undo and retry, or use the rectangle, circle, line, or arrow tool.

Use ordinary Draw when you want to keep your original freehand strokes. For a diamond, choose Diamond in More tools or press Shift + X.

3. Type to find technology logos

Place your pointer over empty canvas and type Redis, React, or Postgres. Keep typing to refine the results. Choose a logo with the mouse, or use the arrow keys and Enter. The image is inserted at the pointer with a separate editable label. Escape closes the suggestions.

A single tool letter selects that tool immediately; continued typing opens logo search. Typing inside a text label edits the label instead. Previews load from the SVGL, Devicon, and gilbarbara/logos repositories on GitHub. New logos require an internet connection; inserted images are embedded in saved drawings.

For generic components, use native rectangles, ellipses, text, and arrows. Try drawing a Client, Server, and Database, connect them, and label one request. For a complete starting diagram, use the editable URL shortener template or follow the system design guide.

4. Save an editable copy or export an image

Your personal board autosaves in this browser. Press Ctrl+S (Cmd+S on macOS) or choose Save work… below Export image in the hamburger menu to save an editable .draw file. You can edit its file name before saving. Open the hamburger menu and choose Export image… for PNG, SVG, or copying an image to the clipboard. Choose Open in the menu to reopen a .draw, .excalidraw, or JSON scene file, use Ctrl+O (Cmd+O on macOS), or drag the file onto the canvas.

Importing another scene replaces your current board, so download a backup first. Browser autosave is not a cloud backup: clearing browser data or switching browsers can leave you without that local drawing. Visit the FAQ for storage and browser details.

5. Draw together in a temporary session

1. Choose Collab at the top right, then Start session.
2. Copy the invite link from the collaboration dialog and send it to the people you want to draw with.
3. Wait for the connected status. Up to four people, including you, can edit together.
4. Before leaving or refreshing, choose Leave session, then Save work (.draw) for an editable copy, or save a PNG/SVG image.

Anyone with the invite link can join. Keep it private. Session drawings stay in memory and are not autosaved to browser storage or kept as cloud workspaces. They require an internet connection. Your personal board remains separate; leaving the session returns you to it.