Images bring screenshots, photos, logos, and mockups onto the canvas alongside your shapes and arrows. You drop an image element, attach a file, and it renders right there in the diagram. Anything you upload is kept in a personal gallery, so the second time you need the same picture you pick it instead of uploading it again.
Adding an image
The Image tool drops an image element you then attach a file to.
Pick the Image tool from the palette, then tap the canvas to drop a default-size image, or drag to size it as you place it.
The empty placeholder shows a "Click to upload" prompt. Click it to open the image picker.
Drag a file in, click to browse, or paste from your clipboard. The image attaches and the placeholder becomes the picture.
You can also paste an image straight onto the canvas with the usual paste shortcut, and it lands as a new image element.
An image is a boxed element, so it moves, locks, groups, links, and layers like everything else. Resizing keeps the original aspect ratio by default so the picture is not squashed. Hold Shift while dragging a corner to resize freely.
Accepted formats
The picker accepts the formats that render reliably in every browser:
- PNG, JPEG, WebP, and GIF (animated GIFs play automatically).
- The per-file limit is 10 MB, comfortably above a typical phone photo or 4K screenshot.
Some formats are turned away with a helpful hint, including SVG (for safety) and HEIC from iPhones (save as JPEG and re-upload). For privacy, identifying metadata such as GPS location and camera details is stripped from JPEG uploads before the file is stored, so it never reaches anyone you share the diagram with.
Your image gallery
Every image you upload is indexed in a personal gallery, shared across all your diagrams.
- Reuse, no re-upload. The Gallery tab in the image picker shows everything you have uploaded. Pick a tile to reuse it. If you upload the same file twice, livediagram recognises it and reuses the existing copy rather than storing it again.
- Manage it from the Explorer. The Explorer's Image Gallery lists every image with its size and dimensions, a "Used in N diagrams" badge, and a delete action, so you can spot unused files and clean them up.
- Deleting an image from the gallery removes the stored file. Any element still pointing at it shows a broken-image fallback, so delete only what you are sure is unused.
Image uploads rely on storage that a self-hosted deployment may not have configured. When uploads are not available the Image tool is hidden and the picker explains that uploads are not enabled on that deployment.
Before deleting from the gallery, open the "Used in N diagrams" badge to see exactly where an image is referenced. It saves you from breaking a picture you forgot was in use.
Was this article helpful?