CP1402/CP5631 – NETWORK

DIAGRAMS
CONTENTS

Getting Started ........................................................................................................... 1

Creating a New Network Diagram ........................................................................... 2

Adding routers ......................................................................................................... 5

Creating WAN links ................................................................................................. 6

Adding switches ...................................................................................................... 7

Adding labels ........................................................................................................... 8

Resize canvas ......................................................................................................... 9

Exporting ................................................................................................................. 9

Task 1 – Have a go .................................................................................................. 11

Diagram checklist .................................................................................................. 12

Task 2 – Starting the assignment ............................................................................. 12

GETTING STARTED

draw.io is a free and easy-to-use web application for creating

diagrams and flowcharts. It is a good alternative to Microsoft Visio
that we can use to draw network diagrams.

Head to https://www.draw.io to get started.

The first thing you’re likely to see is a menu of choices where you can
save your diagrams. I recommend choosing Google Drive or
OneDrive, so you have automatic backups, but local storage is also
available by choosing “Device”.

1
CREATING A NEW NETWORK DIAGRAM
After selecting your storage location, or upon reopening https://www.draw.io you’ll
have the option of creating a new diagram.

Create a new diagram, and then click “Network” on the left, then select
“network/cisco1.xml” choice on the right (as circled below):

2
Click the blue “Create” button in the corner and choose a suitable folder in which to
save your diagram. You should see a screen similar to the following:

Our first job is to clear away this example network so that we can draw our own.
Use the magnifying glass in the toolbar to zoom out and show the whole diagram.
We’ll keep the Internet cloud (wouldn’t want to delete the whole Internet…) but the
rest we’ll replace. Click on the Internet cloud and drag it to a corner away from the
other elements.

Move the Internet

out of harm’s way

3
Now we’ll clear out the other elements. Click a blank part of the grid, then drag to
highlight a group of elements. If you start from a good position, you’ll be able to
select all elements except the Internet cloud. Now press the delete key.

Click and
drag

Selected elements
ready to delete

4
You may find some lines left over. Click to select then delete these.

Finally, we’ll have a nice canvas where we can draw our network.

ADDING ROUTERS
Adding new components to your
diagram is easy. Just drag and
drop.

We may have just got through

deleting them, but we want
some routers for our diagram.
Scroll down the shapes bar on
the left until you reach the Cisco
menu items. Click on “Cisco /
Routers” to expand.

We just want the plain router for

our diagrams, nothing fancy.
Click and drag to drop two
routers in your diagram.

5
CREATING WAN LINKS
So, you have two routers that
need a connection. You,
sir/madam, are in need of a
WAN link.

A common way to depict a WAN

link in network diagrams is to
use a jagged red line. Move
your mouse to the “Waypoints”
icon in the toolbar, then click to
open a dropdown box. Select
the “Isometric” option.

Now create a link between the

two routers. Hover your mouse
over the side anchor of the left
router and click and drag when
you see the green circle to
create a line to the other router.

6
Now we need to change the
properties of the line. Click on
the line which will bring up the
“Style” panel on the right of the
page. Change the colour to red,
the thickness to 3 pt and the
end arrow style to “None”.
colour
thickness
end arrow style

Your WAN link should now look

like this:

ADDING SWITCHES
Go to “Cisco / Switches” in the
shapes menu and click-and-
drag a “Workgroup Switch” onto
your diagram. Place it below
one of the routers.

7
Select the “Straight” waypoint
option and connect the router to
the switch. A plain black line will
do for this connection, so select
the line and change the colour
to black, and thickness to 1 pt.

ADDING LABELS
There are several ways to add
text, but the easiest is to simply
doubleclick on a blank area of
the diagram. Add the text
“Example LAN” below your
switch. Click and drag the text
to centre it below your switch.

Now we’ll create a label for the

first router. Doubleclick to create
an “Example” label, and then
drag-and-drop the text on top of
the router. To make the text
more visible, change its colour
to white by doubleclicking and
going to the “Text” menu on the
right of the page. To nicely
center the text, you can zoom in
and use the arrow keys on your
keyboard.

For our network diagrams we

want to label our router
interfaces (ports) to know where
everything is connected. Router
ports often come in modules,
and use numbers starting with
zero. So “S0/0” means Serial
connection (used for WAN
connections between routers),
module 0, port 0. “Fa0/0” means
a Fast Ethernet (used for LAN
connections between a router
and a switch), module 0, port 0.

8
To save space, set the text size
for interface labels to 10 pt. To
save yourself time, you can
copy and paste text to multiple
places. Be careful pasting too
close to a line though, as
sometimes it can cause the line
to move. If this happens use the
undo command, and paste
further away from the line. Then
use the arrow keys on the
keyboard to move the text into
proper position.

RESIZE CANVAS
The diagrams you’ll create for
this task are wider than they are
tall. With no elements selected,
you should see a “Document”
pane on the right. Go down to
“Paper Size” and choose
“Landscape”.

EXPORTING
To get a copy of your diagram to add
to a Word doc, export it as a .PNG
file and download to your computer.

Go to FileExport asPNG…
and then click “Export”

9
 Now click “Download” to download
your file.

Task 1 is on the next page.

10
TASK 1 – HAVE A GO

Your first task is to replicate the network diagram, shown in the figure below:

Use the checklist below to make sure you’ve got the fine details covered.

11
DIAGRAM CHECKLIST
Are all the icons in the same place? (routers, switches, WAN links, etc.) ☐
Have all the connections been made? ☐
Are the connections at the correct angle? (WAN links either vertical, ☐
horizontal, or 45°)
Are all the icons named (Beijing LAN, etc.)? ☐
Have all the interfaces been declared (S0/0, Fa0/0, Fa0/1, etc.)? ☐
Do the interfaces have the correct port numbers? ☐
Is the floating text correct and in the right position? ☐
Do the text fields have the correct fonts, sizes, and colours? ☐

TASK 2 – STARTING THE ASSIGNMENT (OPTIONAL)

Your next task will start you on your path to finishing the networking case study
assignment. It’s good to start securing marks early, after all. If you haven’t read through
the assignment yet, now would be an excellent time to start. You may not understand
all of the tasks just yet, but do not worry; you’ll be learning the skills as you go.

However, one section should look familiar (the network diagram part).

Your final task for this practical is to start your network diagram.

1) Add the routers, switches, and servers to the diagram

2) Make the appropriate connections
3) Label the devices, links, and interfaces

That will do for now. Save your work and (optionally) submit your diagrams on
LearnJCU.

You will eventually need to revisit your network diagram to add IP addresses to the
interfaces, but that’s a little further in the semester.

12