Julius Gamanyi

  • Blog
  • About
  • Contact
  • Category: Tools

    • Wardley Maps in drawio

      Posted at 23:14 by Julius Gamanyi, on March 25, 2019

      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 all Wardley Maps contained in previous article, i.e., https://juliusgamanyi.com/2018/12/28/wardley-maps-an-illustration-from-gerstners-book/
      Animated version (with button clicks) of all Wardley Maps contained in previous article, i.e., https://juliusgamanyi.com/2018/12/28/wardley-maps-an-illustration-from-gerstners-book/

      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
      Shows layers contained within the diagram that, in order to be shown, have to be selected

      Gif Version:

      Animated (gif) version (using checkboxes to select specific layers) of all Wardley Maps contained in previous article, i.e., https://juliusgamanyi.com/2018/12/28/wardley-maps-an-illustration-from-gerstners-book/
      Animated (gif) version (using checkboxes to select specific layers) of all Wardley Maps contained in previous article.

      Using drawio online with icons/symbols 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

      Animated (gif) steps to add Wardley Map icons/symbols to the 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 [1] – https://www.draw.io/?splash=0&clibs=Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjuliusgb%2Fwardley-map-icons%2Fmaster%2Fdrawio%2FWardleyMap-Icon-Library

      Posted in drawio, Tools, Wardley Maps | 0 Comments | Tagged drawio, Wardley Map Icons, Wardley Map Symbols, Wardley Mapping, Wardley Maps
    • Recent Posts

      • Run github actions workflows locally using act April 27, 2022
      • Swyx “Swipes file” strategy akin to Stratechery’s “ladder-up” March 30, 2022
      • Use books to practice Wardley Mapping December 16, 2021
      • Links to Wardley Maps for my Map Camp 2021 talk October 13, 2021
      • Wardley Maps—illustrated through Gerstner—Part 3, Loop 2 June 25, 2020
    • Browse by Categories

    • Archives

    • Creative Commons License
      Except where otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License.

Create a website or blog at WordPress.com

 

Loading Comments...