How to use diagrams in Google Docs
The free draw.io add-on for Google Docs lets you embed your diagrams into your documents. When the diagram files have been updated via your Google Drive, all you need to do is update them inside your document to show those changes.
Install the draw.io Google Docs add-on
- Open a document, or create a new document. Click Add-ons > Get Add-ons.
- Search for diagrams and click on draw.io for Docs.
- Follow the prompts to grant the editor permission to access your Google Documents and files on Google Drive.
- Once the draw.io add-on has been successfully installed, you can start using it via the Add-ons > draw.io for Docs submenu.
Note that your diagram data is only ever stored in your browser and on your Google Drive account.
Using diagrams in Google Docs
You don’t need to export an image from your diagram to paste into the Google Doc - use the add-on to embed the diagram file directly into your document.
Tip: Make sure you allow pop-ups in your browser. When you create a new diagram, this will open a new tab or window in your browser and go to draw.io. When you save your diagram, make sure you save it to your Google Drive.
Embed a diagram in a Google doc
- Click Add-ons > draw.io for Docs > New Diagram to create a new diagram, which is saved to your Google Drive. You may need to grant additional permissions to draw.io to use your Google Drive account.
- When you want to embed an existing diagram, including a new diagram you have created and saved to your Google Drive, click Add-ons > draw.io for Docs > Insert Diagrams. Select multiple diagrams by holding down
Shift when you click on each diagram file.
- Navigate to your diagram file, select it, then click Select.
- Select which page you want to display, if your diagram has multiple pages, then click Insert.
Change how your diagram is displayed
Change the text wrap around the diagram: Select a diagram, then select one of the text-wrap symbols in the toolbar that appears.
Change the whitespace around the diagram: Select a diagram then select a new value from the Margin dropdown.
Crop your diagram: Select a diagram, click the Crop Image tool in the toolbar, then drag the black borders that appear on your selected diagram to crop it. Note that this only crops how the diagram is displayed in your document, it does not change your diagram file.
Reposition your diagram: Drag the diagram to the right or the left to reposition it within your document.
Recolour the diagram: Select a diagram, then click Image options in the toolbar. Click the Re-color dropdown and apply a colour filter. This only changes how your diagram is displayed in your document, it does not change your diagram file.
Resize the diagram: Select a diagram, then drag any of the square handles around the edge of the diagram to resize it.
Rotate your diagram: Select a diagram, then drag the circular handle at the top of the diagram to rotate it.
Update the embedded diagrams to see changes
Your diagram is displayed as an image inside your Google Document. If you make changes to the diagram file stored in your Google Drive, you’ll need to regenerate the images to see those changes inside your document.
- Select the diagram inside your Google Document.
- Click Add-ons > draw.io for Docs > Update Selected.
If you want to update all of the diagrams, click Add-ons > draw.io for Docs > Update All.