As promised here is the first cut of the Wardley Map Liveview component: https://github.com/chriseyre2000/kino_wardley
Its not quite ready for publication as I want to tidy up the input format and closer align to the contract defined by https://onlinewardleymaps.com/
The following is the current install block
Mix.install([{:kino_wardley, git: "https://github.com/chriseyre2000/kino_wardley"}])
You can then add a Kino Wardley component (I am going to change that to Wardley Map).

The following is the code block that I would like to render:
Kino.Wardley.new("""
{
"id": "myid7",
"height": "400",
"width": "800",
"map" : [
"anchor Business [0.95, 0.63]",
"anchor Public [0.95, 0.78]",
"component Cup of Tea [0.79, 0.61]",
"component Cup [0.73, 0.78]",
"component Tea [0.63, 0.81]",
"component Hot Water [0.52, 0.80]",
"component Water [0.38, 0.82]",
"component Kettle [0.43, 0.35]",
"evolve Kettle [0.43, 0.62]",
"component Power [0.10, 0.71]",
"evolve Power [0.10, 0.89]",
"Business->Cup of Tea",
"Public->Cup of Tea",
"Cup of Tea->Cup",
"Cup of Tea->Tea",
"Cup of Tea->Hot Water",
"Hot Water->Water",
"Hot Water->Kettle",
"Kettle->Power"
]
}
""")
Here is a livebook that uses the component: https://github.com/chriseyre2000/livebooks/blob/main/wardley-map.livemd