Wardley map (Mermaid)

Mermaid has no dedicated Wardley syntax, so this uses a quadrant chart with the two Wardley axes. It is enough to have the argument, which is the point of a Wardley map.

For a full map with dependency lines, draw it on a canvas instead.


#What this example shows

  • Evolution on the x-axis and visibility to the user on the y-axis.

  • Quadrants named for the four evolution stages.

  • Components positioned as an argument to be challenged.


#A worked example

Open it, edit it, or copy the source below.

Wardley map (Mermaid)

The source, which you can paste into a new diagram and edit:

wardley-beta
title Tea Shop Value Chain

anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61]
component Tea [0.63, 0.81]
component Hot Water [0.52, 0.80]
component Kettle [0.43, 0.35]
component Power [0.10, 0.70]

Business -> Cup of Tea
Cup of Tea -> Tea
Cup of Tea -> Hot Water
Hot Water -> Kettle
Kettle -> Power

evolve Kettle 0.62
evolve Power 0.89

note "Standardising power allows Kettles to evolve faster" [0.30, 0.49]

#Making it your own

  • Anchor at the user need. A map that starts from your components maps your org chart.

  • Position is an argument. Record who placed each component and why.

  • For dependency lines between components, use draw.io.



Copy it. Change one line. See what happens.