Merge pull request #277 from jgraph/drawio-google-updates

Changes for deprecated add-ons

Author: davidjgraph

_includes/home.html

@@ -176,11 +176,7 @@ <h2 class="font-weight-medium">Our range of draw.io branded integrations</h2>
               <h4 class="h6 mb-0">Google Workplace and Google Drive</h4>
             </div>
           </div>
-          <p>Works with <a href="https://app.diagrams.net/?mode=google" target="_blank">Google Drive</a> and <a href="https://gsuite.diagrams.net/" target="_blank">Google Workplace</a> (G Suite). Use add-ons for
-            <a href="https://docsaddon.diagrams.net/" target="_blank">Docs</a>,
-            <a href="https://sheetsaddon.diagrams.net/" target="_blank">Sheets</a>
-            and
-            <a href="https://slidesaddon.diagrams.net/" target="_blank">Slides</a>.</p>
+          <p>Works with <a href="https://app.diagrams.net/?mode=google" target="_blank">Google Drive</a> and <a href="https://gsuite.diagrams.net/" target="_blank">Google Workplace</a> (G Suite). </p>
           <!-- End Icon Block -->
         </div>
 

_posts/2020-01-27-diagrams-google-docs.md

@@ -8,63 +8,47 @@ tags: [integrations]
 categories: [integrations, features]
 ---
 
-The free [draw.io add-on for Google Docs](https://gsuite.google.com/u/0/marketplace/app/drawio_diagrams_for_docs/224440279306?hl=en&pann=docs_addon_widget) 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.
+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. 
+<br /><img src="/assets/img/blog/drawio-google-image.gif" style="width=100%;max-width:500px;height:auto;" alt="Export a draw.io diagram to a PNG image, then import it into your Google document">
 
-## Install the draw.io Google Docs add-on
+**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. 
 
-1. Open a document, or create a new document. Click _Add-ons > Get Add-ons_.
-2. Search for diagrams and click on [_draw.io for Docs_](https://gsuite.google.com/u/0/marketplace/app/drawio_diagrams_for_docs/224440279306?hl=en&pann=docs_addon_widget).
-<br /><img src="/assets/img/blog/diagrams-docs-google-marketplace.png" style="width=100%;max-width:400px;height:auto;" alt="Install the draw.io for Docs add-on from the Google Marketplace">
-1. Follow the prompts to grant the editor permission to access your Google Documents and files on Google Drive.
-<br /><img src="/assets/img/blog/diagrams-docs-grant-permission.png" style="width=100%;max-width:200px;height:auto;" alt="Grant permission for the editor to access your Google Drive files and Google Docs">
-1. Once the draw.io add-on has been successfully installed, you can start using it via the _Add-ons > draw.io for Docs_ submenu.
+[Learn more about the changes to the draw.io apps for Google documents](/blog/diagrams-google.html)
 
-Note that your diagram data is only ever stored in your browser and on your Google Drive account.
-* [See why draw.io needs permission for these scopes](/doc/faq/gsuite-permissions.html)
-* [Read more about how draw.io keeps your data secure and private](/blog/data-protection.html)
+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. 
 
-## Using diagrams in Google Docs
+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. 
 
-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.
+<img src="/assets/img/blog/google-docs-examples.png" style="max-width:100%;height:auto;"  alt="It's easy to import images of diagrams in Google Docs">
 
-**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.
+## Add an image of a diagram to a Google document
 
-### Embed a diagram in a Google doc
+1. Open your ``.drawio`` diagram file in the draw.io editor (either our [online editor](https://app.diagrams.net) or [drawio Desktop](https://get.diagrams.net/))
+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. 
 
-1. 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](/doc/faq/gsuite-permissions.html).
-2. 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.
-3. Navigate to your diagram file, select it, then click _Select_.
-<br /><img src="/assets/img/blog/addon-google-select-diagram.png" style="width=100%;max-width:400px;height:auto;" alt="Select your diagram file from Google Drive to insert into your document">
-4. Select which page you want to display, if your diagram has multiple pages, then click _Insert_.
-<br /><img src="/assets/img/blog/addon-google-select-page.png" style="width=100%;max-width:400px;height:auto;" alt="Select the diagram page you want to embed in your Google Document">
+You can embed images of diagrams in the same way in Google Docs, Sheets and Slides.
 
-<img src="/assets/img/blog/addon-google-docs-examples.png" style="max-width:100%;height:auto;"  alt="It's easy to embed diagrams in Google Docs">
+<img src="/assets/img/blog/drawio-google-slide.gif" style="width=100%;max-width:500px;height:auto;" alt="Export a draw.io diagram to a PNG image, then import it into your Google presentation slide">
 
-### Change how your diagram is displayed
+## 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 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 a diagram then select a new value from the _Margin_ dropdown.
-<br /><img src="/assets/img/blog/addon-google-docs-margin.png" style="max-width:100%;height:auto;" alt="Select a new magin or text-wrap style around your diagram in your Google Document">
+**Change the whitespace around the diagram:** Select the image then select a new value from the _Margin_ dropdown.
+<br /><img src="/assets/img/blog/google-docs-margin.png" style="width=100%;max-width:600px;height:auto;" alt="Select a new margin or text-wrap style around your diagram in your Google Document">
 
-**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.
-<br /><img src="/assets/img/blog/addon-google-docs-crop.png" style="width=100%;max-width:400px;height:auto;" alt="Use the crop image tool to crop 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. 
+<br /><img src="/assets/img/blog/google-docs-crop.png" style="width=100%;max-width:600px;height:auto;" alt="Use the crop image tool to crop your diagram in your Google Document">
 
-**Reposition your diagram:** Drag the diagram to the right or the left to reposition it within your document.
+**Reposition your diagram:** Drag the image 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.
-<br /><img src="/assets/img/blog/addon-google-docs-recolour.png" style="max-width:100%;height:auto;" alt="Apply a new colour filter to your diagram in your Google 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. 
+<br /><img src="/assets/img/blog/google-docs-recolour.png" style="width=100%;max-width:600px;height:auto;" alt="Apply a new colour filter to your diagram in your Google document">
 
-**Resize the diagram:** Select a diagram, then drag any of the square handles around the edge of the diagram to resize it.
+**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 a diagram, then drag the circular handle at the top of the diagram to rotate it.
-<br /><img src="/assets/img/blog/addon-google-docs-rotate.png" style="width=100%;max-width:400px;height:auto;" alt="Apply a new colour filter to your diagram in your Google document">
+**Rotate your diagram:** Select the image of your diagram, then drag the circular handle at the top of the diagram to rotate it.
+<br /><img src="/assets/img/blog/google-docs-rotate.png" style="width=100%;max-width:400px;height:auto;" alt="Apply a new colour filter to your diagram in your Google document">
 
-### 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.
-
-1. Select the diagram inside your Google Document.
-2. 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_.

_posts/2021-02-16-google-classroom-diagrams.md

@@ -89,15 +89,11 @@ It happens rarely, but you may see an error along the lines of ``Log in attempts
 
 ## Embed diagrams in Docs, Slides and Sheets
 
-To conveniently include diagram files in written assignments, you can also install the draw.io add-ons for Google Docs, Slides and Sheets. Search for [_``draw.io``_ or _``diagrams.net``_ in the Google Workspace Marketplace](https://gsuite.google.com/u/0/marketplace/search/diagrams.net%20diagram?hl=en) to see all of the draw.io add-ons.
+1. Export the diagram from with our free online draw.io editor at [app.diagrams.net](https://app.diagrams.net) to a PNG image.
+2. Then import that image file into your Google Doc, Slide or Sheet to embed their diagram.
 
-The draw.io add-ons are useful when a group has diagrams for a project but needs to write individual reports. One student (or the teacher) can host the diagram file, and the students simply embed it in their document. After making changes to the diagram in the draw.io editor and saving it, the students only need to update the diagrams in their documents.
+<img src="/assets/img/blog/diagram-google-docs-examples.png" style="max-width:100%;height:auto;"  alt="It's easy to import images of diagrams in Google Docs">
 
-1. Select the diagram in your Google Doc.
-2. Click _Add-ons > draw.io for Docs > Update Selected_.
+**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. 
 
-If you want to update all of the diagrams, click _Add-ons > draw.io Diagrams for Docs > Update All_.
-
-[Learn more about working with diagrams within Google documents](/blog/diagrams-google-docs.html)
-
-<img src="/assets/img/blog/addon-google-docs-examples.png" style="max-width:100%;height:auto;" alt="Embed a diagram in Google Docs">
+[Learn more about the changes to the draw.io apps for Google documents](/blog/diagrams-google.html)

_posts/2025-07-03-search-omnibox.md

@@ -60,6 +60,9 @@ Some menu options are also available in the search omnibox. For example:
 * Search for ``Clear`` when you have selected a connector to see the _Clear Waypoints_ option.
 <br /><img src="/assets/img/blog/search-omnibox-clear.png" style="width=100%;max-width:600px;height:auto;" alt="Search for draw.io features in the new search omnibox to avoid having to hunt through the menus">
 
+* Search for the name of a diagram page that is not the one you are currently editing. Click on the name to open that diagram page in the editor. This is useful for diagram that contain a large number of diagram pages.
+<br /><img src="/assets/img/blog/search-omnibox-page.png" style="width=100%;max-width:350px;height:auto;" alt="Search for the name of a draw.io diagram page and click on it to open that page in the editor">
+
 This list remembers and shows you the last five search actions you selected - an ideal way to 'bookmark' the tools and menu options that you use often. 
 
 **Note:** Only a limited number of tools are available in the new search field at the moment. Raise a feature request to suggest the features you'd like us to add to the search omnibox over on the [JGraph/drawio repository](https://github.com/jgraph/drawio/issues). 

_posts/2025-07-10-diagrams-google.md

@@ -0,0 +1,46 @@
+---
+layout: post
+author: draw.io
+slug: diagrams-google
+date: 2025-07-10 09:54:00
+title: Use draw.io diagrams in Google Docs, Slides and Sheets
+tags: [features, integrations]
+categories: [features]
+---
+
+Diagrams help you convey complex information faster and more accurately, helping your audience understand your documents more easily. Export your draw.io diagrams to PNG image files and then import them into your Google Docs, Slides and Sheets - drag and drop the image file into your document. 
+<br /><img src="/assets/img/blog/drawio-google-image.gif" style="width=100%;max-width:500px;height:auto;" alt="Export a draw.io diagram to a PNG image, then import it into your Google document">
+
+1. Open your ``.drawio`` diagram file in the draw.io editor (either our [online editor](https://app.diagrams.net) or [draw.io Desktop](https://get.diagrams.net/))
+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. 
+
+<img src="/assets/img/blog/drawio-google-slide.gif" style="width=100%;max-width:500px;height:auto;" alt="Export a draw.io diagram to a PNG image, then import it into your Google presentation slide">
+
+You can work with the image of your diagram in your Google document (Docs, Slides or Sheets) as you would any other image - you can move, resize, rotate, and style it as needed.
+
+## Reopen your diagram from a draw.io image file
+
+If you export your diagram from draw.io to a PNG image with _Include a copy of my diagram_ enabled, you will be able to drop that image file onto the draw.io editor to load the diagram data embedded in that file and continue diagramming. 
+<br /><img src="/assets/img/blog/export-png-options.png" style="width=100%;max-width:200px;height:auto;" alt="Choose the export settings for the PNG image">
+
+**Note:** You cannot reopen images from within Google documents as diagrams as Google strips the embedded diagram data.
+
+## Diagrams in Google Sheets
+
+In Google Sheets, you can either import an image of your diagram into a cell or overlay the cells. 
+<br /><img src="/assets/img/blog/drawio-google-sheet.gif" style="width=100%;max-width:500px;height:auto;" alt="Export a draw.io diagram to a PNG image, then import it into your Google spreadsheet">
+
+## Deprecated: draw.io apps for Docs, Sheets and Slides
+
+Previously, the [draw.io apps for Google Docs, Slides and Sheets](/doc/faq/google-docs-diagrams.html) allowed you to embed the diagrams directly into your documents. Unfortunately, Google has instituted [new security permissions limitations](https://github.com/jgraph/drawio/issues/4589#issuecomment-2857181827) that limit access to your files stored on Google Drive. This means that new installations of the draw.io apps for Docs, Slides or Sheets are unable to access the diagram data in those files. 
+
+If you have older, installed versions of these apps, you may be able to continue to embed and work with diagram file in your documents. 
+
+**Important:** We have not disabled the Google Store listings for these apps as that would immediately disable all existing installations. Currently, those older installed versions of these apps still work. 
+
+We recommend you convert your embedded diagrams to images in those documents. 
+
+The [draw.io apps for Google Workspace](https://gsuite.diagrams.net/) and the [draw.io Chrome app for Google Drive](/blog/drawio-chrome-app.html) are unaffected - you can continue to store your ``.drawio`` diagram files in Google Drive and work with them in our [free online editor](https://app.diagrams.net).  
+
+<img src="/assets/img/blog/google-docs-examples.png" style="max-width:100%;height:auto;"  alt="It's easy to import images of diagrams in Google Docs">