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
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 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.
Select layers to display them
Gif Version
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
GIF Version
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
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!! 😎