Skip to content
Mermaid Studio Logo Mermaid Studio
New Mermaid Studio Core — free Mermaid diagram support in JetBrains IDEs — Install now →

Wardley Map

Last updated:

Wardley Maps plot the components of a value chain against their stage of evolution, making them a popular tool for strategy and situational awareness. Components sit between a user-facing anchor and the underlying infrastructure they depend on, and each component’s horizontal position shows how commoditized it has become.

Syntax Highlighting

Section titled “Syntax Highlighting”

Syntax highlighting integrates directly with IntelliJ’s color scheme system, so diagram colors always match your editor theme.

Wardley Map syntax highlighting in Armada Dark theme

IDE Support

Section titled “IDE Support”

This is a basic-tier implementation focused on the essentials of editing Wardley Map source. Mermaid Studio provides:

  • Syntax highlighting for keywords, component labels, coordinates, and notes
  • Code folding to collapse pipeline blocks and multi-line sections
  • Brace matching for paired delimiters such as [...], {...}, and quotes
  • Comment toggling with Cmd+/ (macOS) or Ctrl+/ (Windows/Linux) using Mermaid’s %% comment syntax
  • Smart quote handling that auto-pairs quotes and behaves sensibly when typing inside string literals
  • Markdown code fence injection so Wardley Maps embedded in mermaid fenced code blocks get the same language support as standalone .mmd files

Advanced features such as completions, inspections, refactoring, structure view, and find usages are not yet available for Wardley Maps. See the Diagram Types overview for a full comparison across diagram types.

Quick Syntax Reference

Section titled “Quick Syntax Reference”
wardley-beta
title Tea Shop
size [1100, 800]


anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61] label [19, -4]
component Tea [0.63, 0.81]
component Hot Water [0.52, 0.80]
component Kettle [0.43, 0.35] label [-57, 4]
component Power [0.1, 0.7] label [-27, 20]


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]

Key elements:

  • Start with wardley-beta. Requires Mermaid.js 11.14.0+.
  • Use title for the map title and size [width, height] to set canvas dimensions.
  • Declare user-facing entry points with anchor <name> [x, y] where x is the value-chain axis (0 = invisible, 1 = visible to user) and y is the evolution axis (0 = genesis, 1 = commodity).
  • Declare components with component <name> [x, y]. Add label [dx, dy] to offset the label from the point.
  • Connect nodes with -> to show dependencies along the value chain.
  • Mark a target evolution stage with evolve <component> <x>.
  • Add free-form annotations with note "<text>" [x, y].
  • Use %% ... for comments.

For complete syntax details including pipelines, flow annotations, and custom evolution stages, see the Mermaid Wardley Map documentation.