Add images to your diagram

JPEG, PNG, and SVG images can all be inserted into the draw.io editor with drag and drop or via the menu.

Image files in diagrams work in the same way as in documents - you can resize, rotate and flip them as a single image, but you can’t resize any components within the image.

Insert an image into a diagram

Drag and drop

Drag the image file on your computer, or drag the image from a web page in your browser window, and drop it onto the drawing canvas.

Drag and drop your image onto the diagram editor or use the menu to insert it from a URL

Once the image file has been loaded into the editor, you can resize it or rotate it just like a shape, or crop the image into a variety of shapes.

Via the menu

  1. Select Arrange > Insert > Image. Alternatively, click the + icon in the toolbar, then select Image.
    Select Arrange > Insert > Image in the draw.io editor
  2. Paste the URL to your image file, or drag it from your desktop onto the dialog.
    Paste the URL to your image file, or drag it onto the dialog and click Apply to add an image to your diagram

Note: Larger image files may take a few moments before they are visible in the diagram editor.

See all of the elements you can insert into your diagram

Alternatively, you can access the Insert tool (+) via the toolbar that is just above the drawing canvas.

You can insert a wide range of shapes, text, links, layouts, images, templates and more via the Insert tool on the toolbar in draw.io

Image quality and size

Large images slow down the browser and editor, especially when autosaving your diagram. If you are using a cloud platform like Google Drive or One Drive, the file size of the image you insert into the editor counts towards your account’s

  1. When you first drag an image into the diagram editor, select whether you want to resample/resize an image so that it is not so large, or keep the image quality and size the same as the original file.
  2. Click on the Remember this setting checkbox so you are not prompted every time you add an image to your diagram.
    Choose whether you want to keep your image quality and size the same as the original file, or resize/resample it to reduce the resources necessary to edit and store your diagram

To change this setting again, you will need to delete two entries from your browser’s internal storage.

Reset the image quality and size setting

As your browser remembers this setting in its internal storage, you will need to clear that to reset the image quality and size settings for the online version of the draw.io editor.

If you are using Firefox, follow the steps below. These steps are similar in other browsers.

  1. Press Ctrl+Alt+I on Windows or Cmd+Option+I on macOS to open the browser debugger console.
  2. On the Storage tab, right-click on the database (default) entry under https://app.diagrams.net in the Indexed DB section and select Delete “database (default).
    Delete the database entry for app.diagrams.net in your browser's debugger console
  3. Right-click on the https://app.diagrams.net entry under the Local Storage section and select Delete All.
    Delete the app.diagrams.net local storage entry via your browser's debugger console

When you next add an image to your diagram, you will be prompted to choose the image quality and size behaviour.