Hello world! We're going to learn to draw a flowchart using draw.io When you start this webpage, we're going to create a new diagram since we haven't created anything to open yet. Create a new diagram and pick up blank diagram and, it says to give it a file name. I'm going to call this one age.xml and click create. If we go over here to this page we can scroll down, what we want to do is select flowchart. A flowchart always starts with an oval. and you can see it says, it doesn't say the word oval, it says start: I double-click that and then I can drag it to where I want to put it and (Let's get rid of that one, OK.) The next thing I want to do is assign a value to a variable An assignment is done with a rectangle and I would like to make that a letter and I'm just going to double-click and start typing: currentYear =2016 We don't add a semicolon in a flowchart. The next thing I want to do is draw an arrow. Let's call this one age. Just by double-clicking, and then I want to draw an arrow. If I click here I can make that arrow go down to that next box. What's interesting is if I drag this box down the arrow goes with it. and if I move it to the side the arrow turns corners. We never have diagonal lines in flowchart. Let's put that back over here. The next thing I want to do is input the year born. and I just double-click: input yearBorn. Let's make that one a little bit bigger. Let's balance that out. OK. The next thing would be another rectangle and we're going to do is calculate age: age= currentYear - yearBorn and then we want to output the age, and again the both IO ( I can line it up with those blue lines.) I need that just a little bigger and output age A flowchart always ends (both begin and end) and are that oval. Again using those blue arrows to line them up, and that's the end. Let's make sure we have all those arrows connected. That's important you can't not have the arrows because the whole idea of flowchart is to follow the arrows to see what happens next. That's my complete flowchart. What I want to do next is, I could just take a picture of that, take a screenshot of that, (What happened with that arrow, delete that arrow.) Let's try that again, there we go.) Get did of that arrow, just hit delete. and now it says unsaved changes click here to save, I'm going to save that. My flowchart is finished, what I'm going to do now is go to file and export as image and I'm going to simply pick export as image, Let me do that again: file; export as image and Make that 100% and export, and save as age.PNG and download that and now I can go into word and find that age.PNG and insert it into my Word document.