Home Wardley Maps in drawio
Post
Cancel

Wardley Maps in drawio

I recently came across drawio, and I’ve been using it to make Wardley Maps. In addition to the online version, there’s also a desktop version that you can download and use.

It doesn’t require me to sign up for an account; it integrates well with common cloud storage options (dropbox, google drive, onedrive). As a result, I find myself using it more than I thought, especially when it comes to layers.

To see what I mean, I’ve placed the maps from the previous article on AWS S3 to try out. The output/export of drawio was a single html file that can also be saved locally and opened in the browser.

Interact with the map – using buttons

To interact with the Wardley Map mentioned above, you can use the buttons present or select which layers you’d like to see. The disadvantage of using the buttons is that pressing them out of sequence messes up what’s displayed.

Shows icon to make image occupy whole screen Shows icon to make image occupy whole screen

Use the “fullscreen” option to view the map. This abstracts away browser-specific behaviours.

The click through the buttons at the top in this sequence:

  • 1, 2, 3, then on 3 again (to make the selection disapper)
  • 4a, 4b
  • 5a, then click “back to map”
  • 6, then click “back to map”
  • 7, 8

Gif version

Animated version (with button clicks) of some Wardley Maps Animated version (with button clicks) of all Wardley Maps contained in previous article

Interact with the map – using layers

To select the layers, hover your mouse over the map’s page to reach the icon for layers. There, you’ll see several checkboxes that can be selected.

Shows layers contained within the diagram that, in order to be shown, have to be selected Select layers to display them

Gif Version

Animated using checkboxes to select specific layers Animated (gif) version (using checkboxes to select specific layers) of all Wardley Maps contained in previous article

Using drawio online with icons for Wardley Maps

If you’d like to try out drawio online for drawing Wardley Maps, I’ve created drawio specific template, or a set of icons, that should save us time. These are are saved online and made available through a URL [1] because draw-io online gives us the option of specifying URLs from which to load icons/symbols – see step 3 in the image below. For a quick try, see section titled “P.S. Update on 09-April 2019

URL is https://s3.eu-central-1.amazonaws.com/wardleymaps.prototypes.001.gerstner/Misc/WardleyMap-Icon-Library

Steps to add icons/symbols of Wardley Maps to drawio online Steps to add icons/symbols of Wardley Maps to drawio online

GIF Version

Gif version showing steps to add icons/symbols of Wardley Maps to drawio online Gif version showing steps to add icons/symbols of Wardley Maps to drawio online

Using drawio desktop with icons/symbols for Wardley Maps

If you prefer the desktop version of drawio, I saved the same icons on Dropbox ( https://www.dropbox.com/s/d1s4ua0rmnvdduw/WardleyMap-Icon-Library?dl=0 ) and GitHub (https://github.com/juliusgb/wardley-map-icons/tree/master/drawio )

In drawio, first click on File, then “Open Library,” and select where you saved the file.

Gif Version

Gif version showing steps to add icons/symbols of Wardley Maps to desktop version of drawio Animated (gif) steps to add Wardley Map icons/symbols to the desktop version of drawio

Adding to the collection of icons/symbols

If you’re interested in adding to these icons, there’s a GitHub repository where I keep them. You can also modify your local copy and send it to me.

Further reading and other tools

With respect to tools, Chris Daniel started us off with atlas2. Then Ben Mosoir summarises what’s being used, adding some reflection on tooling in general.

P.S. Update on 09-April 2019

I’m still discovering what drawio enables. E.g., with this link [1], the stencils are now linked to the corresponding github repo, meaning that you’ll always get the latest version of the stencils.
After updating the repo, I don’t need to copy them to s3 and dropbox. Whereas you, by getting the stencils from github (if you’re using the desktop version), always have the latest version. Win-win for all. wohoo!! 😎

URL – https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjuliusgb%2Fwardley-map-icons%2Fmaster%2Fdrawio%2FWardleyMap-Icon-Library

This post is licensed under CC BY 4.0 by the author.

Wardley Maps—an Illustration from Gerstner’s book

Adapting to PARA using GitLab