Draw.io

Introduction

Draw.io is a diagramming tool that works as a 3rd party Google app. This means that while it’s not created by Google, it’s designed to seamlessly work with the other Google apps and to have a very similar visual flow.

Why to use it:

  • Free!
  • Saves directly to drive, and can be exported and displayed in a variety of methods
  • Huge assortment of built in shapes, clip art, and images, and allows for importing of images
  • Very flexible
Things You'll Need
  • An internet connection

  • A Google account (recommended)

Steps
  1. 1

    Go to draw.io

  2. 2

    If you’re signed into Google a pop-up will appear giving the option of creating a new diagram or opening a previous one. Click “Create New Diagram” to get started.

    Create New diagram | Open existing diagram menu options

  3. 3

    If you’re not signed into Google, a pop-up will appear asking where you want to save to. Select your location, then click “Create New Diagram” to get started.

    Save diagrams to: Drive, Dropbox, OneDrive, Device

     

  4. 4

    When creating a new diagram, a window will pop up asking for the diagram name and giving a list of template options. Draw.io has a lot to offer for technical documentation, but if that’s not what you’re interested in chances are good a blank diagram will fit your needs.

    Diagram name and template options

     

  5. 5

    You’re now ready to start diagramming! If nothing is selected the pane on the right side of the screen allows for adjusting the display, or if an object is selected you can change the properties of that object from there. From the left, a huge list of shapes are available to be dragged and dropped onto the canvas. Once you have two objects on the canvas, connecting them is as simple as clicking and dragging from one of the blue triangles or blue “x”s that pop up around the object to your desired object.

    2 ovals on grid

  6. 6

    When you’re complete, you have a variety of options for sharing your diagram. From the File menu you can export it as an image, HTML, or XML, you can embed it into a website, or you can publish it straight to GitHub, Imgur, or as a link.

    Menu options for "embed"

     

Tips
  • Because Draw.io is designed to work with Google apps, all of the usual sharing and collaboration features that are available in other Google apps (Docs, Sheets, etc) are available here.

  • If you’ve got an image that you’re going to use repeatedly, you can drag it into the scratchpad on the left side, and from there you can pull it repeatedly out again just like any of the built in shapes.

    scratchpad options

  • By clicking “More Shapes” at the bottom left you can adjust which groups of shapes show up in the left pane. This can be helpful to remove objects you’ll never use and to see if they have more helpful items for you built in. 

    shape options

     

  • New diagrams are automatically saved to the top level of your Google Drive. Remember to place them where you want to by going into Google Drive and organizing through there.

  • Double clicking anywhere allows you to start typing text. This is true on objects, connectors, and blank canvas.

  • To import an image from your computer, just drag it from where it’s saved onto the canvas. Or, click File -> Import From -> Device.

Get Support