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.
Open the Media category on the palette strip and pick Image (or press 9). Tap the canvas
to drop a default-size image, or drag to size it as you place it.
The image lands as an empty placeholder reading "No image yet", selected so you can move and resize it first. When you are ready, press its Select Image button (or double-click the placeholder) to open the Image picker.
On the Upload tab, drop 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 ⌘V or Ctrl+V, and it lands as a new image element.
To swap the picture later, double-click the image to reopen the picker and choose another. Remove from element at the bottom of the picker detaches the picture from the element and leaves the gallery copy in place.
An image is a boxed element, so it moves, locks, links, and layers like everything else. Resizing keeps the original aspect ratio by default so the picture is not squashed. To stretch it freely, turn off Lock Aspect Ratio (see Size); holding Shift never unlocks it, because Shift keeps the proportions of anything you resize.
Searching for an image
Don't have the picture you need? The image picker's Search tab finds openly licensed photos and illustrations from Openverse, a free search engine over Creative Commons and public-domain works.
Type what you're looking for, such as "server rack" or "team meeting", and press Enter. Hover a result to see who made it and its licence, and use Load more for further results.
Click a picture. It is added to your gallery and attached to the image, just like an upload.
- Safe to reuse. Search only shows pictures whose licence allows both commercial use and changes (CC0, public domain, CC BY and CC BY-SA), so you can use them in a diagram for work and crop or resize them freely.
- The credit comes with it. Many of these licences ask you to credit the creator. The Image section of the picture's right-click menu shows the credit, with links to the picture's source and its licence, so you can copy it into your diagram wherever you share it.
- Privacy. Your search goes straight from your browser to Openverse, so Openverse sees the words you search for and your IP address. livediagram's servers never see the search.
Accepted formats
The picker accepts the formats that display 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.
Other formats are turned away with a message listing the accepted ones. SVG is refused for safety; for an iPhone HEIC photo, save or export it as JPEG first. 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 document with.
Avatars
The Avatar tile, beside Image in the Media category, places a circular photo of a person: an image element that starts square, keeps its proportions as you resize it, and is cropped to a circle. Tap or drag to place it, then double-click it to pick or upload the photo through the same picker. It suits org charts, team pages and personas.
Your image gallery
Every image you upload is indexed in a personal gallery, shared across all your documents.
- 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.
- A gallery has a limit. On livediagram.app each person's gallery holds up to 100 images and 100 MB in total. Once either is reached, a new upload is turned away with "Your image gallery is full", and deleting images you no longer use makes room. A self-hosted deployment has no limit unless its operator sets one.
- Manage it from the Explorer. The Explorer's Image gallery lists every image with its size and dimensions, a "Used in N documents" 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.
- Unused uploads are cleared automatically. Once a day, livediagram removes images that are both more than 30 days old and used in no document, so abandoned uploads do not pile up. An image any document still uses is kept no matter its age, and recent uploads are left alone until the 30-day window passes.
Image uploads rely on storage that a self-hosted deployment may not have configured. When uploads are not available, the Image and Avatar tiles are hidden, and an upload attempt explains that uploads are not available on that server.
Before deleting from the gallery, open the "Used in N documents" 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?