Tube Map — Make your own

Stéphanie Krus
Nov 19 · 4 min read
template elements to make a London style tube map, with colour code for the lines, icon on a grid paper view
template elements to make a London style tube map, with colour code for the lines, icon on a grid paper view
Created with Draw.io

A while ago, I saw Sanjay Poyzer’s journey to become a service designer. I decided to use the same idea to map my professional journey for LinkedIn. I didn’t have any fancy software, so I used draw.io as it’s free.

tube map with 3 lines from schools journey with subjects studied to starting at GDS
tube map with 3 lines from schools journey with subjects studied to starting at GDS
From the blog post “Become a service designer in government: step by step” or on his website directly

Draw.io is not the easiest tool but the result is good once you get used to it. Here is a French version of my LinkedIn profile background. I’ll share with you how to do your own.

my professional journey represented as a tube map, from France to Scotland, from IT to design via video game support
my professional journey represented as a tube map, from France to Scotland, from IT to design via video game support

People love the London Tube map iconography

It’s been adapted in various ways. Some examples:

Metro map on a drawing of a human face and neck with lines for arteries and nerves
Metro map on a drawing of a human face and neck with lines for arteries and nerves
From this Evening Standard Edition
map of London Tube with number of minutes to walk from one station to the next on the same line
map of London Tube with number of minutes to walk from one station to the next on the same line
From Transport of London PDF map

Glasgow tube map

I hope your professional journey doesn’t look like that, even though looking at it is very calming

Circle orange line outside and grey line inside with animated metro circling in opposite directions
Circle orange line outside and grey line inside with animated metro circling in opposite directions
From Glasgow subway stories

How to make your own 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. Don’t use the fancy tools just yet.

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:

hexadecimal colour codes of 10 lines (not enough space to type them all here — sorry!)
hexadecimal colour codes of 10 lines (not enough space to type them all here — sorry!)

Get the template, it will be quicker

I’ve made a template to make it easy for you. I can’t share the file here but you can find it in my Github repository using this link, then select Raw and your screen will look like the Matrix:

screenshot of github repo showing the raw button with a red arrow
screenshot of github repo showing the raw button with a red arrow
screen full of characters showing some xml unreadable code
screen full of characters showing some xml unreadable code
  • in your browser menu, select File, then Save as

Using Draw.io

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

menu on screen once you start draw.io
menu on screen once you start draw.io

Select the file you have just created and this should open the template which looks like the top photo of this story.

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
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 my 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
show the selected options for the line. It should be rounded and the shape of connection is a straight line at a 45 degree

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.

this is a animated gif showing the steps stated above in the instructions
this is a animated gif showing the steps stated above in the instructions
Ctrl C, Ctrl P, to deselect the red line: click elsewhere, then drag the line where you want, select an ending and drag where you want it to go, click the middle and drag to make the first elbow, then click again and drag to male the second elbow.

How did you make this video?

In case you wonder: I used a free Google Chrome extension called Nimbus to record my video, then download it as a .webm which I converted into a .gif using Cloud Convert (also free). This 30 seconds video is now a 2.6MB gif.

Other things you can do with tube maps

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

tube map showing how the customer find a service: 1line for face to face one for phone, another online and various outcomes
tube map showing how the customer find a service: 1line for face to face one for phone, another online and various outcomes

Now make your own!


Disclaimer: this is not an ad for draw.io, I’m not affiliated with them in any way, just simply like to use it as it’s free. You can reach similar results with other software.

Stéphanie Krus

Written by

Service Designer | Web Developer | Permaculture & Accessibility advocate | French in Scotland

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade