search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
72.08k stars 6.55k forks source link

Wardley Maps - Feature Request #1661

Open alexkrolick opened 4 years ago

alexkrolick commented 4 years ago

Wardley Maps are diagrams that map the maturity of different parts in a value chain. They are basically a dependency chart with defined X-Y coordinates (which differentiates them from other graphs which can freely arrange the nodes)

https://en.wikipedia.org/wiki/Wardley_map

image

https://duckduckgo.com/?t=ffab&q=wardley+map&iax=images&ia=images

Proposed syntax: node definitions take (x,y) coordinates on a scale of 0-100

wardley
  Customer(30, 100) --> Print(60, 80)
  Print --> Website(70, 70)
  Customer --> Website
  Website --> CRM(60, 75)
  Website --> Platform(50,50)

There are also more advanced features, like arrows showing direction of trends, that could use roughly the same syntax.

  Website -.- (90, 100)

There would also need to be a syntax for labelling the axes, which could be similar to the subgraph syntax.

chloebrett commented 3 years ago

For anyone thinking of taking this task on, this site might help for playing around with Wardley maps and understanding how they work: https://www.onlinewardleymaps.com/

Source code: https://github.com/damonsk/onlinewardleymaps

kurtseifried commented 2 years ago

especially now that github supports mermaid having this would be a killer feature all around.

Ritesh007 commented 2 years ago

Is this something planned to be implemented soon?

chriseyre2000 commented 2 years ago

This might be a good starting point:

https://github.com/chriseyre2000/livebooks/blob/main/d3wardleymap.livemd

I have a basic d3 implementation of wardley maps.

chriseyre2000 commented 2 years ago

I have a javscript implementation of wardley maps here: https://github.com/chriseyre2000/kino_wardley

This should be a good starting point as it uses d3.js to render this.