Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Wardley Maps for MarkdownNew to Visual Studio Code? Get it now.
Wardley Maps for Markdown

Wardley Maps for Markdown

Volkan Unsal

|
2 installs
| (0) | Free
Render Wardley maps inline in the VS Code Markdown preview
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Wardley Maps for Markdown logo

Wardley Maps for Markdown

Visual Studio Marketplace Version Visual Studio Marketplace Installs CI License: MIT

Renders Wardley maps written in the OnlineWardleyMaps (OWM) text format directly inside the VS Code Markdown preview, from an ```owm (or ```wardley) fenced code block.

This is a different extension from damonsk.vscode-wardley-maps, the established .owm/.wm file editor with SVG/PNG export and publish-to-onlinewardleymaps.com support. The two are complementary and safe to install together: this extension never claims the .owm or .wm file extension, and only activates on Markdown fences. Use damonsk.vscode-wardley-maps to author and export standalone map files; use this extension to see a map render inline wherever it's embedded in prose — a strategy doc, a research report, a vault note.

Usage

Fence a map with owm or wardley and preview the Markdown document as usual (Cmd+Shift+V / Ctrl+Shift+V):

```owm
title Tea Shop
anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61]
Business->Cup of Tea
```

That fence renders inline, in place, as an SVG:

A rendered Wardley map: Tea Shop, showing Business and Public anchors evolving down through Cup of Tea, Cup, Tea, Hot Water, Water, Kettle, and Power components.

Any other fence info (```js, ```yaml, etc.) is untouched and falls through to markdown-it's default renderer.

Configuration header

An optional YAML-style header before the map body sets render options:

```owm
---
theme: dark
width: 900
---
title Tea Shop
anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61]
Business->Cup of Tea
```
Key Values Default
theme plain, handwritten, wardley, dark, colour auto — dark under a dark VS Code theme, plain otherwise
width integer px renderer default
height integer px renderer default

An unknown key is reported as a diagnostic on the host document; the map still renders.

Map syntax

The renderer supports the OWM DSL: title, anchor/component with [visibility, maturity] coordinates and optional label [x, y] offsets, build/buy/outsource/(market)/(ecosystem)/inertia decorators, evolve (with an optional -> rename and target maturity), pipeline in both header form (pipeline Name [maturity]) and block form (pipeline Name { component ... }), submap with a url, note, annotation/annotations, custom x-axis labels (evolution A->B->C->D), pioneers/settlers/townplanners attitude boxes, accelerator/deaccelerator, size, style, and both // and /* */ comments.

Coordinates are visibility first, maturity second. In component Cup of Tea [0.79, 0.61], 0.79 is visibility (the vertical value-chain axis) and 0.61 is maturity (the horizontal evolution axis).

market and ecosystem work as the decorator forms (market) and (ecosystem) on a component line. The standalone statement forms (market Users [0.5, 0.5]) are not: the OWM parser reports the line as a parse error and it contributes nothing to the map.

examples/fidelity-corpus.md in this repo has one worked fence per construct, useful as a reference or a copy-paste starting point.

Diagnostics report on the host document's real line numbers: parse errors from the OWM parser as errors, our own checks (out-of-range or non-numeric coordinates, a link or evolve referencing an undeclared component, duplicate component names) as warnings, and unknown config-header keys as informational.

Known limitation: y-axis

Custom y-axis labels (y-axis Profit|Low|High) are recognized and syntax-highlighted but not rendered — the underlying renderer has no support for relabeling the vertical axis, so a map using this line renders with the default "Value Chain" caption instead. A fence containing y-axis gets an informational diagnostic noting this. Every other construct listed above, including block-form pipelines and the attitude boxes, renders correctly.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft