Showing your users journeys as a Tube map

Reading Time: 3 minutes

Tube maps are a good way to layout a user journey. Draw.io is not the easiest tool for this, but if you want to try, here’s how.

You can explain the various ways a customer can find your service and the different journeys depending on the channels used for example:

map of a service as a tube map

First, draft it on paper

It’s not that easy to plan for enough space for labels, lines crossing and making sense of the things you will group together and why. So, like for any design, start with pen and paper.

Ready? ok, do it with draw.io now

You can chose any colours, but if you want it to look like the London tube map, here are the colour codes:

 #000000 black

 #0616B4 dark blue

 #0198D4 light blue

 #980059 purple

 #E22219 red

 #F7AABA pink

 #FDF01B yellow

 #037B35 green

 #AD6300 brown

 #A3A2A5 grey

Get the template, it will be quicker

We have a template to make it easy for you. The file is in this Github repository, select Raw

show where button raw is in the github interface

and your screen will look like the Matrix:

show what the screen looks like when you read xml text
  • in your browser menu, select ‘File’, then ‘Save as’
  • give your file the name of your project and the extension .drawio

Using Draw.io

In your browser, open draw.io, and select ‘Open Existing Diagram’

Draw io Menu with option to either create a new diagram or open an existing diagram

Select the file you have just created and this should open the template.

Simply select a line in the colour you need in the template, copy paste it where you want on screen and play with it, to make your tube map.

Or modify the existing templated map if you prefer.

If you want something really clean, you will have to link elements, like ‘lines’ to ‘circles’ so when you move one, the rest moves as well. The documentation can help.

Some tips

When you copy/paste an element and want to move it next, it’s easier to deselect it (click somewhere else) and then move it. It avoids transforming it when you don’t mean to.

When lines endings are ‘covering’ your connection circle, simple select the circle, then in the right column, select the ‘Arrange’ tab, and then ‘To Front’. This should sort it.

Menu showing the Arrange tab selected and the button To Front

To make an ‘elbow’ in a line, make sure the line is the type selected below (it should be if you’re using the lines in the template)

show the selected options for the line. It should be rounded and the shape of connection is a straight line at a 45 degree angle

Select one ending of the line and take it where you want it to go. Then click in the middle of the line, hold and drag to form the angle you want. You can do that again to form another elbow, select again the middle of the second part of the line as shown on the video below.

Video showing how to do an elbow
To see the video, click or tap on the picture first to open it in a new tab

Alternative way to do it

Draw.io (now Diagrams.net) is not the only tools to do that. but it’s one of the good free ones.

If you have Illustrator, this video explains how to create a tube map using it:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.