Wardley Maps are the most underused diagram in strategy. They plot components along two axes — value chain (top = visible to the user) by evolution (Genesis → Custom → Product → Commodity) — and connect them by dependency. Used well, they make build-vs-buy decisions and platform bets obvious in a way slides never do.

So why doesn't Lucidchart support them? Or draw.io? Or Miro? They don't. You either go to a single-purpose tool like onlinewardleymaps.com, screenshot the output, and paste it into a deck — or you fake it with rectangles in Mermaid.

We made them a first-class engine in Glyph.

The DSL

We adopted the onlinewardleymaps.com syntax subset because it's the de-facto standard among Wardley practitioners and is reassuringly small:

title B2B SaaS platform

anchor    Customer            [0.96, 0.55]
component Product UX          [0.85, 0.50]
component Workflow engine     [0.70, 0.45]
component Feature store       [0.45, 0.55] inertia
component Compute             [0.30, 0.80] commodity
note      +Strategic moat     [0.78, 0.20]

Customer        -> Product UX
Product UX      -> Workflow engine
Workflow engine -> Feature store
Feature store   -> Compute

Two-axis coordinates are 0–1. inertia draws the red bar that means "we keep dragging this back". commodity adds an italic caption. note becomes an amber callout. Arrows are dependencies.

200 lines of TypeScript

The implementation is pure TypeScript with no dependencies. Two passes:

1. Directive pass — parse title, component, anchor, note, pipeline, evolve, market, build, buy, outsource, plus accepted-but-ignored style and annotations lines. Every coordinate gets clamped to 0..1 with a NaN-safe fallback.
2. Edge pass — for every remaining non-empty line, look for an arrow (->, -->, ->>, =>, →). Both sides must match a known component name (case-insensitive). If either side doesn't, the line goes to doc.warnings and a small footer count surfaces in the SVG. Phantom edges that broke v1 are gone.

Rendering

The SVG is 1100×640 by default and grows with component count. Components are coloured dots; anchors are rounded pills; notes are amber-stickered chips; pipelines are horizontal rects spanning an evolution range; evolve is rendered as a red dashed arrow with a ghost endpoint dot at the new position.

Label collision is the hard part. We pick from six candidate positions around each dot (right-up, right-down, left-up, left-down, above-centred, below-centred) and accept the first one that doesn't overlap any already-placed label rect. Text width is estimated cheaply without measuring the DOM.

Why it's tractable

Wardley Maps don't need physics simulation, layout solvers, or auto-routing. The author specifies the coordinates because that's the diagram — the position is the strategic statement. All the renderer has to do is project, decorate, and not lie.

That's the thread running through every Glyph engine. We're not trying to be smart on the user's behalf. We're trying to put their thinking on screen as cleanly as possible.