With most teachers and students now working virtually, as schools have been required to close due to the pandemic, the tools that support online teaching have been drastically improved. Many schools are now using Google Classroom to communicate with students, organise curriculum, and assign and submit assessment digitally.

Completing visual learning tasks is an important part of most subjects. Students will both have fun and extend their digital toolbox when creating visualisations in a rich diagramming app like draw.io.

With the draw.io add-on for Google Workplace (Google Drive), teachers and students can easily attach diagram files to announcements, assessment descriptions, and assignment submissions in Google Classroom. From there, it’s only a click or two to see a diagram preview, and open it in the free draw.io editor.

Install the draw.io add-on for Google Drive

1. Install the draw.io add-on from the Google Workspace Marketplace.
2. You will need to grant permission for draw.io to access the files in your Google Drive before you first create or edit a diagram stored on Google Drive.

Attach diagram files in Google Classroom

Google Classroom makes it easy to attach files, from Google Drive, on the web with a URL, or upload them from your computer.

For example, when you are writing an announcement on your subject’s Stream, click on Add, then select from the following locations.

• Google Drive - Attach a file that is stored in your Google Drive.
• Link - Attach a diagram that was published or exported as a URL.
• File - Attach a diagram that is stored on your local device.

Tip: When the diagram file is stored in Google Drive, you will also see a diagram thumbnail wherever it is attached.

Attach a diagram to an assignment

Adding a diagram to classwork - assignments, quiz assignments, questions, and course material can include file attachments. For assignments, you can select what should be done with the attached diagrams.

View diagram: To limit the diagram to view-only, leave the diagram file’s attachment behaviour as Students can view the file (it is the default behaviour).

Edit original diagram file: To allow all students to edit the file stored in your Google Drive account, select Students can edit the file from the attachment behaviour list on the right. This is a useful choice for group work, especially as you can see who has made which change in the diagram file’s revision history on Google Drive.

Give each student a copy of the diagram: To give each student their own copy of the file, select Make a copy for each student. When you Assign and distribute the assessment to the students, Google Classroom will automatically save a copy of the diagram into the subject’s folder on each student’s Google Drive.

As the teacher, you will be able to open all of the diagram files assigned to students from the Student work tab of the assignment detail page.

Open a diagram from Google Classroom

1. Click on the attached file to open a preview. If the diagram file is stored in Google Drive, you’ll see the diagram in the new tab.
2. If it was a file that was uploaded, and not stored in Google Drive, click on Open with draw.io at the top of the browser tab to open it in the draw.io editor.

Tip: Add comments to diagrams stored in Google Drive simply by dragging a selection pane around an element of the diagram, and add your comment. This is useful for group work or when providing feedback to students on their assignment submissions (see below).

Submit a diagram with an assignment

1. As a student, click on the assignment to see its details.
2. In the Your work section on the right, click Add or create.
3. Select Google Drive to attach a diagram file you have saved in your Google Drive. Alternatively, click File to attach a diagram file you have saved on your computer.
   
4. Finally click Hand in or Mark as done to submit your diagram with your assignment.

Troubleshooting

Things can go wrong, and diagram files may be accidentally deleted.

Restore a deleted copy of the diagram file

Even if the file is deleted from the student’s Google Drive, teachers will be able to see the last saved version of the student’s diagram file for some time. If the student has deleted their file by mistake, they can restore it from their Google Drive.

1. If you are a student, go to the Bin folder in your Google Drive account.
2. Fight-click on the deleted diagram file, and select Restore.
   

Restore a copy of the original assigned diagram

1. If you are a student, open the assignment in Google Classroom, and the Your work section will explain that the assigned diagram file was deleted.
2. Click on Make a copy to restore the diagram to its original form.
   

Fix a connection issue with Google Drive

It happens rarely, but you may see an error along the lines of Log in attempts failed. You may be able to fix such a Google Drive connection issue in your browser.

1. Unblock third-party cookies in your browser, remove browser extensions, and delete all Google cookies stored in your browser.
2. Log back into Google Classroom or Google Drive to continue working with your diagrams in draw.io.

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 to see all of the draw.io add-ons.

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.

1. Select the diagram in your Google Doc.
2. Click Add-ons > draw.io for Docs > Update Selected.

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

Follow us on GitHub, Twitter, Facebook.