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  (all the code is available on this GitHub repo https://github.com/pbx-gs/wardley-maps-generator 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:

image.jpg1200x750 156 KB

     2. Here are the nodes positioned by row and col

image.jpg1200x750 137 KB

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

image.jpg1200x750 154 KB

4. 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)

image.jpg1200x750 169 KB

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

image.jpg1200x750 160 KB

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

image.jpg1200x750 157 KB

7. version that just about looks like the original version of the ‘tea’ map 

image.jpg1200x750 158 KB

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

image.jpg1200x750 150 KB

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

image.jpg1200x928 144 KB

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

(This was originally posted at https://community.z-developers.com/t/creating-wardley-maps-using-lambda-functions/48, please go there and add your comments to it)