Mapping educational systems – web friendly

educational diagram Burundi

Mapping educational systems – web friendly

“College – what age group is that in your country?” Conversations about education start with definitions. Every country has its own system. This is even more challenging for international policymakers. How do they compare investments and results? Does every child have equal possibilities to learn and fully take part in society?

So, how to map educational systems? The ISCED classification is the main part of the answer. It has eight ranges, from ISCED 1 (primary education) to ISCED 8 (doctorate). Countries categorize schools and institutes within these ranges. ‘Educational diagrams’ can thus show the buildup of a system – a framework for comparison. How to help editors to create such diagrams? And how to integrate them in a website? The UNESCO International Centre for Technical and Vocational Education and Training (UNEVOC) asked our help.

Educational diagrams

Usually, educational diagrams are vertical. University as literally the higher education. Examples are the detailed diagrams by the OECD (2020). Arrows show how a student can move up through the system. UNEVOC had made comparable diagrams (see image below). Their design highlights the position of vocational education. Alternatively, the UNESCO Institute for Statistics introduced a beautiful series of horizontal diagrams (2021). They invite you to look at education more as part of a life span. All of these are great ways to see the system at a glance.

Handcrafted educational diagram by UNEVOC
Educational diagram Sri Lanka, UNEVOC (2018).

UNEVOC created their diagrams one by one. Thus, the diagrams can easily show different types of institutes and complex flows. The process though is time intensive. Additionally, the result is a still image. It can be inserted in a publication or feature on a web page. But it lacks the potential of a dynamic component on a website. UNEVOC asked us to write an algorithm to help create the educational diagrams. And to make them web friendly. The resulting diagrams, launched in 2021, are part of the online TVET Country Profiles we developed earlier for this client.


Trade-offs are part of automation. A small set of general rules may be too blunt to handle individual cases. A wider set of rules will become too complex. We offered UNEVOC to find a balance that would work well for most countries and adequately for all. Another consideration was to allow for manual editing. But moderately so, as re-running the algorithm will override edits. The algorithm is entirely written in JavaScript.

As input, we defined an online editor. The client enters properties for each ‘block’ of an educational system – ISCED-range, year span, type and preceding blocks (flow). With these, the algorithm should be able to render a good diagram for the majority of countries. Two corrections are available to the editor. A flow override forces the horizontal position above a specified, lower block. And as a last resort, a position override lists a desired width and position.

Sample of editor content
Online editor, properties of each block in the diagram
Sample of editor content, immediate visualization of input.
Online editor, instant visualization of the blocks and input of text content per block.

Put to the test, the algorithm creates diagrams that come satisfactory close to the handcrafted ones. The editor can easily add or remove items, change dependencies and run a new version of the diagram.

Draft of curved lines
Straight lines between items may run across other items. To avoid confusion, we considered curves flowing around items. It would also look lively, like in this draft. This, though, would have demanded too much development effort. We settled for the design solution to mark start and end points on straight lines.


Having determined the size and position of all items, we embedded the diagrams seamlessly in the page architecture and visual design of the TVET Country Profiles. The code makes the diagram and each separate item a dynamic part of the web page.

Live educational diagram
Educational diagram in the UNEVOC TVET Country profiles.

Educational diagrams, like any chart or map, run the risk to contain too much information. Opposed to print, a web component has more ways to feed the information. The UNEVOC diagrams show less information in default state – flows are faded. But upon user interaction, the diagrams show more information, such as background information per item.

UNEVOC put the editor to good use. No less than 197 countries now have a dynamic, web based diagram available in the TVET Country Profiles. The diagrams can show in different languages and are responsive to screen width. Styling, categories and features can be easily changed or further developed. Users can export an image of the diagram. Or of course a PDF of the entire profile, with the diagram included.

Desmond Spruijt,
Mapping Worlds