Draw.io is one of my favourite tools and the one I use most for creating graphics and infographics. As someone who doesn’t draw very well and has only limited design abilities it has really helped me out a number of times and enabled me to produce professional looking illustrations, product mockups and teaching materials.
How it works
When you go to the Draw.io site you can either open an existing diagram or create a new one.
Click on Create New Diagram and you will have the option to either choose from a number of templates that you can edit or use a blank template.
Once you open a blank template you see the canvas in the centre and on the left of the screen there are a number of shapes and a search engine. If you scroll down the categories on the left and click on them you’ll see a vast range of shapes images and icons any of which you can use by simply dragging them onto the canvas.
The canvas appears to be A4, but to can drop images and shapes anywhere around it and it will expand in any direction to accommodate your graphic.
If you want something specific you can type a key word into the search engine and you’ll see images related to the word.
All shapes and images can be resized, dragged around and have text and colour added once they are on the canvas.
Going to the insert menu also enables you to add images from URLs or search Google for images to add to your graphic.
Once you have finished creating your graphic you can export it as an image or save it in a number of different format types including PDF, PNG, SVG and HTML. You can also save an XML file of the graphic and then open it at a later date or share it with someone else to edit it. This is a really useful if you spot an error or typo at a later date.
The files can be saved on the device you are working on or on Google Drive or DropBox, so they are easy to share with other people.
How to use it
Create time lines
Time lines are great for helping students to understand the concepts and time relationships in various statements. You can use the timeline to map out the events in the sentence and illustrate the order in which they happened. draw.io can help you to quickly produce visually appealing timelines with images to help illustrate the sentences.
Flashcards
Creating flashcards can be time consuming, especially if you can’t draw. You can very quickly create your own flashcards using the images from draw.io and add text or phonemic script (You can copy paste the phonemic text from: http://www.photransedit.com/Online/Text2Phonetics.aspx ) or you can find and add the images on Google Images.
Create infographics
Infographics are a great way to convey dense statistical information in an accessible way for the computer screen. draw.io is a great way to create your own infographics for students or you can get students to create the infographics themselves. draw.io makes it easy to add images and colour to the graphics.
You can find lots more tasks and suggestions for exploiting infographics in my ebook.
Process maps
draw.io is great for creating process maps students can create these to demonstrate their understanding of the processes described in a text or you could create them to show students different process, such as visually explaining a the writing process.
Mindmaps
Mindmaps are a great way to support memory and show connections between different topics. They are also great for helping students to remember and review vocabulary. draw.io makes these very easy to create and you can also add images to illustrate them. If you save the xml file created by draw.io you can also share it so that others can edit it and create their own version.
Grammar summaries
You can use draw.io to create illustrated grammar summaries or get students to create them. You can have a section for meaning, form, pronunciation and appropriacy and use icons or illustrations to help clarify and make the summaries more attractive and memorable.
Conversation/ dialogue maps
Many transactional conversations follow very similar patterns. You can use draw.io to create dialogue maps to illustrate this for students or get them to map out a conversation themselves. They can use the dialogue map to show the purpose of each part of the conversation.
Visual story summaries
You or your students can use draw.io to create visual summaries of stories. These can show the characters and the main events in the plot. For longer stories, students can build the visual as they read each section or paragraph. This is a great way to get students to demonstrate their understanding of the text.
Lifeline maps
Students can create lifeline maps of themselves showing the main events in their lives. These can be really useful as prompts for speaking activities and to help students get to know each other better. They can also create lifelines for famous people or historical figures or events.
Illustrations for materials
If you create your own texts or worksheets you can use draw.io to add illustrations graphs and images to them to make them look a bit more attractive and professional.
What I like about it
As a tool for creating graphics, infographics and illustrations there isn’t much that can be improved. I guess some people might prefer a freehand creation tool but I’ve personally never had much success with these. For me draw.io is great the way it is. I hope you and your students find it useful too.
Related links
How it works
When you go to the Draw.io site you can either open an existing diagram or create a new one.
Click on Create New Diagram and you will have the option to either choose from a number of templates that you can edit or use a blank template.
Once you open a blank template you see the canvas in the centre and on the left of the screen there are a number of shapes and a search engine. If you scroll down the categories on the left and click on them you’ll see a vast range of shapes images and icons any of which you can use by simply dragging them onto the canvas.
If you want something specific you can type a key word into the search engine and you’ll see images related to the word.
Going to the insert menu also enables you to add images from URLs or search Google for images to add to your graphic.
How to use it
Create time lines
Time lines are great for helping students to understand the concepts and time relationships in various statements. You can use the timeline to map out the events in the sentence and illustrate the order in which they happened. draw.io can help you to quickly produce visually appealing timelines with images to help illustrate the sentences.
Flashcards
Creating flashcards can be time consuming, especially if you can’t draw. You can very quickly create your own flashcards using the images from draw.io and add text or phonemic script (You can copy paste the phonemic text from: http://www.photransedit.com/Online/Text2Phonetics.aspx ) or you can find and add the images on Google Images.
Create infographics
Infographics are a great way to convey dense statistical information in an accessible way for the computer screen. draw.io is a great way to create your own infographics for students or you can get students to create the infographics themselves. draw.io makes it easy to add images and colour to the graphics.
You can find lots more tasks and suggestions for exploiting infographics in my ebook.
My eBookProcess maps
draw.io is great for creating process maps students can create these to demonstrate their understanding of the processes described in a text or you could create them to show students different process, such as visually explaining a the writing process.
Mindmaps
Mindmaps are a great way to support memory and show connections between different topics. They are also great for helping students to remember and review vocabulary. draw.io makes these very easy to create and you can also add images to illustrate them. If you save the xml file created by draw.io you can also share it so that others can edit it and create their own version.
Grammar summaries
You can use draw.io to create illustrated grammar summaries or get students to create them. You can have a section for meaning, form, pronunciation and appropriacy and use icons or illustrations to help clarify and make the summaries more attractive and memorable.
Conversation/ dialogue maps
Many transactional conversations follow very similar patterns. You can use draw.io to create dialogue maps to illustrate this for students or get them to map out a conversation themselves. They can use the dialogue map to show the purpose of each part of the conversation.
Visual story summaries
You or your students can use draw.io to create visual summaries of stories. These can show the characters and the main events in the plot. For longer stories, students can build the visual as they read each section or paragraph. This is a great way to get students to demonstrate their understanding of the text.
Lifeline maps
Students can create lifeline maps of themselves showing the main events in their lives. These can be really useful as prompts for speaking activities and to help students get to know each other better. They can also create lifelines for famous people or historical figures or events.
Illustrations for materials
If you create your own texts or worksheets you can use draw.io to add illustrations graphs and images to them to make them look a bit more attractive and professional.
What I like about it
- It’s free and runs in the web-browser so no need to download anything.
- Great selection of images and icons to add to illustrations
- Great to be able to save to Google Drive and share with others
- Great range of formats for download
- Love the unlimited canvas space
- Doesn’t require any login or registration
- Quick to learn so usable with students
- Great that photographic images can be imported in too
As a tool for creating graphics, infographics and illustrations there isn’t much that can be improved. I guess some people might prefer a freehand creation tool but I’ve personally never had much success with these. For me draw.io is great the way it is. I hope you and your students find it useful too.
Related links
- My infographic lesson plans
- Exploiting Infographics for ELT
- Digital Video - A manual for language teachers
- Managing the digital classroom - Using a backchannel
- Managing the digital classroom - Getting students' attention
- 20 + Things you can do with QR codes in your school
- Brainstorming and polling with AnswerGarden
