Wednesday, 12 December 2018

Creating Wardley Maps using Lambda Functions

One of the biggest limitations that I had when trying to use/create Wardley Maps was my inability to programatically create the maps (ideally via and DSL or something like DOT language).

What I really wanted was to be able to create Maps from an serverless environment, namely from an Lambda Function.

After some research, I was able to find a nice way to do just that :slight_smile: (all the code is available on this GitHub repo 7)

After playing with a number of scenarios and techniques I zoomed in on the following tech stack:

  • AWS API Gateway exposes an url that calls an
  • Lambda function, which saves the data supplied (coffeescript) in a file that will be loaded by an HTML page
  • the html will load up visjs 1 which is what will render the graph (in the browser)
  • start a local python web server, that
  • uses pyppeteer to open up a headless version of chrome, and
  • opens the page exposed by the web server in the headless browser, and
  • takes screenshot of the page, and
  • returns png value (to the browser or lambda caller)
  • Hugo was also used locally during develpment

     1. Here is the first ‘kinda useful’ version of the programatically generated map:

     2. Here are the nodes positioned by row and col

  1. Here is the next evolution, now with the ability to control the position of the components by row and col

  1. Setting the springConstant to a low value seems to have the least side effects when adding the connections between components (note how it possible to overwrite specific node positions using the node_fixed_x_y method)

  1. Here is the first working(ish) POC trhat shows the value chain

  1. Since we are drawing the map in an HTML 5 canvas, we can start to add shapes and text

  1. version that just about looks like the original version of the ‘tea’ map :slight_smile:

  1. Here is the first pass at running the transformation inside a lambda function

  1. here is the first PDF of an swardley Map generated inside an Lambda function (with all values provided programatically)

See also : 
3 Wardley Maps Templates I’m using to talk to Generation Z Developers 

(This was originally posted at, please go there and add your comments to it)