Use diagrams.net with Google Classroom

diagrams.net 16 Feb 2021

Share:

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 diagrams.net.

With the diagrams.net 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 diagrams.net editor.

Install the diagrams.net Add-on for Google Drive

  1. Install the diagrams.net Add-on from the Google Workspace Marketplace.
  2. You will need to grant permission for diagrams.net 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 announcemnt on your subject’s Stream, click on Add, then select from the following locations.

Attach a diagram file to an announcment in Google Classroom

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.

Select whether students can view or edit the diagram file, or if they automatically get their own copy in their Google Drives on diagrams attached to assignments in Google Classroom

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 diagrams.net at the top of the browser tab to open it in the diagrams.net 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).

Preview, add comments to and open diagrams in the diagrams.net editor from Google Classroom

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.
    Submit a diagram file from Google Drive as part of your assignment in Google Classroom
  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.
    Students can restore the deleted diagram file themselves, via the Bin in their Google Drive

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.
    Students can restore the original assigned diagram file themselves, via their assignment in Google Classroom

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 diagrams.net.

Embed diagrams in Docs, Slides and Sheets

To conveniently include diagram files in written assignments, you can also install the diagrams.net add-ons for Google Docs, Slides and Sheets. Search for diagrams.net in the Google Workspace Marketplace to see all of the diagrams.net (draw.io) add-ons.

The diagrams.net 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 diagrams.net 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 > diagrams.net for Docs > Update Selected.

If you want to update all of the diagrams, click Add-ons > diagrams.net Diagrams for Docs > Update All.

Learn more about working with diagrams within Google documents

Embed a diagram in Google Docs

Follow us on GitHub, Twitter, Facebook, Discord.

Share: