draw.io is a free online diagramming application that, amongst other things, let's you draw Amazon Web Services (AWS). No registration or sign-up is required and draw.io integrates with common web storage services, like Google Drive and Dropbox. See the section on selecting your storage option for more details.



At the bottom left of the draw.io editor interface you will see "More shapes...", click this and in the dialog that appear select the AWS shapes. You can deselect any other shapes you don't require and press the apply button. On the left hand side the AWS libraries will appear, each one collapsed. Click on the library titles to expand them and you'll find the following icons available:

Let's put together an AWS diagram. We're going to need some large rounded rectangles to contain things logically. draw.io has the concept of z-order, the depth an object is in the direction you are looking into the screen. New objects are dropped at the front of the screen, we can right click on the object (or touch, pause, touch on touch devices) and select "to back"


You might want to indicate some of the logical boundaries with dashed lines to make the diagram easier to read. Select the shapes you want to dash and on the menu select Format->Dashed



We're going to wrap the whole diagram with a large AWS labelled rounded rect. The AWS cloud icon needs to move along with the rectangle, so we'll need to group them. We select both, right-click to bring up the context menu and select "Group" to combine them into one entity that moves as a single shape.



We're also going to put some vertical text against the public entry to our architecture, a couple of reverse proxies in this case. To do this we'll create rectangles, enter the text normally (select them then type), then rotate them, using the rotation handle at the top of the shape, by 90 degrees.



We'll need some orthogonal lines between the Elastic Load Balancer and our Elastic IPs. On the left-hand of the editor, in the libraries, open the Connection section. Click on the "Manual Line", that will make it the default line from now on.



Each shape generally has two places you can start and end connections. The first are via the small crosses "x" you see around a shape when you hover over it. These fix the location in/out of the shapes that the connections terminate on the shape's perimeter.

The second option is dragging from the "+" icon you see to the right of selected shapes and dragging and releasing into the center of target shapes (you'll see a blue outline to the shape when the connector is droppable). These connections, we term them connections between "floating ports", connect to the perimeter of the shape at the point where they are incident to the perimeter of that shape, regardless of the direction they are incoming/outgoing.

A connector connected at both ends with floating ports


In our case we're going to connect from the top right fixed port on the circle to the floating port on the rectangle. Connecting using a manual edge produces the above result, with the connector corner in the wrong place. We grab the handle on the horizontal section and move the connector up until we get the desired result.



The default fill colour of rectangles is white. We have a lot of rectangles overlapping, but we often don't want details underneath to be hidden.



You may be thinking setting the opacity of the shape to 0 (0% - 100%) in the Format menu fixes that, but this requires setting the fill colour to none (the transparency checked squares option top left of the second set of colours).



Et voilà, our load balanced, reverse proxy AWS implementation. Note, when there's lots of interlinking, some block colour to separate sections can aid readability.



Want to load this diagram up in draw.io? Save the above image to your filesystem and drag and drop it into a blank draw.io diagram in your browser.