Environment and Society in a Changing World

Creating Diagrams or Concept Maps with Google Docs


Many times, visual descriptions help us understand things that are difficult to understand through narrative text alone. Visual system diagrams or concept maps are two means of adding value to messages you are sharing. A concept map is a type of diagram which shows various relationships between concepts. See the Wikipedia Concept Map entry for an expanded overview.

Using Google docs is one option for creating concept maps. If you are not familiar with how to access Google docs or how to create a new Google Doc, check out the directions in the Course Orientation for Creating your Google Account. Once you feel confident in these basic skills, the next step would be to create a diagram or concept map using this online tool set.

Getting Started

The first step is to login to your Google Docs account and Create a New document.

Once this document is opened, click on the Insert menu and select 'Drawing' to get started.

screen caps: to insert a drawing go to "Insert" > "Drawing"Google Docs: Insert Drawing

A new window will appear on top of your Google Document with menus for a variety of different tools that you can use to construct your diagram - including menus to create shapes, nodes, lines, and arrows.

screen capture of google docs with the shapes menu open.Google Docs: Drawing arrow types
Google Draw Shapes and Arrow Types

Add a Shape/Node:

  • Click on the shape icon in the menu bar.
  • Select the shape (or node) that you would like to use.
  • Click on the drawing window to display the shape in your document.
  • Use the 'handles' on the corners or sides to resize each element to meet your needs.

Add a Line or Arrow:

  • Click on the line or arrow icon in the menu bar.
  • Click on the drawing window to set the beginning point.
  • Drag your mouse and unclick to set the end point.
  • Add or change the end shapes by selecting a line (if you have more than one line on your diagram, click on the slect icon in the menu bar and then select the line you want to modify).
  • Add or change the ends of the line/arrow by selecting one of the last two icons in the menu bar.

Add Text:

  • Selecting the text 'T' icon from the menu bar.
  • Clicking on the drawing window approximately where you want your text to appear.
  • Type your text into the small window and hit enter to set this into the drawing.
  • Select and move this around with your mouse or arrow keys to meet your needs.

You can also add text to an already existing shape by double clicking on the shape and then typing in the resulting text box.

Saving Your Work - Save & Close

Once your diagram or concept map is complete, you can click the 'Save & Close' button in the upper right hand corner. This will embed your drawing within the Google document that you opened in the beginning. You can then add text around this drawing as if it were an image that you uploaded to the document.

You can click on the drawing to find the 'Edit' button and update your drawing at any time.

Drawing Save
Google Docs: Drawing Save

Saving Your Work - Saving a jpeg Image

You may also want to add an image of your drawing to something else you are working on in another application, for instance, adding your diagram to a post (you will want to resize this image so that the entire thing fits nicely into your post - so read all the way through these directions!). In this case, before you 'Save & Close' select under the 'Actions' menu > 'Download as' > JPEG.

sscreenshot of saving a jpg. See paragraph above for details.
Google Docs: Drawing Save As

This option will allow you to save a .jpeg image of your drawing to your downloads folder on your computer.

IMPORTANT: Use a unique identifier in the file name when saving!

When saving files to be uploaded into the Canvas Space be sure to add a unique identifier to the filename so that your file does not overwrite someone else's file with the same name!

For example, save the diagram for Lesson 2 as biogas_diagram_sdb244.jpg where the sdb244 is your unique userid.

Resizing Images to 500 pixels wide

When you are writing your post, select this image as the one that you would like to include in your post. But remember, this image is going to be pretty big. You will want to resize the image that is posted in the Penn State Sites tool to 500 pixels wide so that it fits in its entirety within your post AND all texts in the image still legible.

Creating Diagrams or Concept Maps Using Google Docs (and saving as JPEG file) - The Movie

Here is a movie that will walk you through all of the features you will need to know about Google Docs drawing and others that will get ideas spinning!

Click here for the text description of the How to create flow diagrams in Google Drawing video.

Insert transcript here

Credit: Y. Hong

Resizing When you Upload Diagrams or Concept Maps - The Movie

Here is a movie that will walk you through some tips about how to upload your Google Docs drawing so that others can see the entire diagram in your entry. Please try to make texts in your image still legible when shrunk to 500-750 pixels width range. Use the thumbnails option to resize and/or the pop-up windows option to allow your readers to see your entire diagram!

Click here for the text description of the How to upload and resize an image (to Penn State Sites blog) video.

Insert transcript here

Credit: Y Hong