How to use diagrams in Google Docs

draw.io 27 Jan 2020

Share:

Export your draw.io diagrams to PNG image files and them import them into your Google Docs, Slides and Sheets - drag and drop the image file into your document.
Export a draw.io diagram to a PNG image, then import it into your Google document

Note: Google has applied new security limitations that limit how apps access files from Google Drive. If you have old, installed versions of these apps, you may be able to continue to embed and work with diagram files in your documents.

Learn more about the changes to the draw.io apps for Google documents

The now deprecated draw.io add-on for Google Docs (and Slides and Sheets) allowed you to embed draw.io diagrams stored in Google Drive into your documents. When the diagram files were updated on your Google Drive, you could update them inside your document to show those changes.

Currently, when you update a draw.io diagram stored on Google Drive or elsewhere, you will need to export an updated PNG image file, and then re-import that image into your Google document.

It's easy to import images of diagrams in Google Docs

Add an image of a diagram to a Google document

  1. Open your .drawio diagram file in the draw.io editor (either our online editor or drawio Desktop)
  2. In the draw.io menu, select File > Export As > PNG, then click Export to save your diagram as an image.
  3. In your Google Document, Slide, or Sheet select Insert Image from the menu, or drag and drop your image into your document.

You can embed images of diagrams in the same way in Google Docs, Sheets and Slides.

Export a draw.io diagram to a PNG image, then import it into your Google presentation slide

Change how your diagram is displayed

Change the text wrap around the diagram: Select the image of a diagram, then select one of the text-wrap symbols in the toolbar.

Change the whitespace around the diagram: Select the image then select a new value from the Margin dropdown.
Select a new margin or text-wrap style around your diagram in your Google Document

Crop your diagram: Select the image of a diagram, click the Crop Image tool in the toolbar, then drag the black borders that appear on your selected diagram to crop it.
Use the crop image tool to crop your diagram in your Google Document

Reposition your diagram: Drag the image to the right or the left to reposition it within your document.

Recolour the diagram: Select the image of your diagram, then click Image options in the toolbar. Click the Re-color dropdown and apply a colour filter.
Apply a new colour filter to your diagram in your Google document

Resize the diagram: Select the image, then drag any of the square handles around the edge of the diagram to resize it.

Rotate your diagram: Select the image of your diagram, then drag the circular handle at the top of the diagram to rotate it.
Apply a new colour filter to your diagram in your Google document

Follow us on GitHub, Twitter, Facebook.

Share: