Wardley Maps for VS Code

Wardley Maps chart the components of a business by user value and evolution, so you can see your landscape and reason about strategy. This extension lets you create and edit them directly inside VS Code: it opens .wmap / .owm files (a simple plain-text format, the Online-Wardley-Maps DSL) in a graphical editor, while the text file stays the source of truth, so save, Git, and diff keep working.

New to Wardley Mapping? Start with Learn Wardley Mapping.

Getting started

Install Wardley Mapping Modeler (publisher miragon-gmbh) from the VS Code Marketplace, then start from a filled-in Tea Shop example or a blank map. The built-in Get Started with Wardley Maps walkthrough is the recommended first stop: click its Create map from example button and you have a ready-made map to explore. From there you can open any .wmap or .owm file.

Prefer commands? Run these from the Command Palette (Cmd/Ctrl+Shift+P, type "Wardley"):

• Wardley: New Map from Example — pick a location, pre-filled with the Tea Shop example.
• Wardley: New Empty Map — same, but a blank map (also under File > New File…).

Reading a map

Every component sits on two axes:

• Up and down is the value chain: the higher a component sits, the more visible it is to your user.
• Left and right is evolution: components mature from genesis (brand-new, experimental) on the left, through custom-built and product, to commodity (standardised, ubiquitous) on the right.

Together they show what you depend on and how mature each piece is.

Editing a map

• Custom editor for .wmap / .owm. Open a map file and you get the full graphical editor, backed by the plain-text file. VS Code tracks dirty state, saving and undo as for any text file.
• Text and diagram side by side. The Open Source to the Side button in the editor title bar opens the text next to the diagram; in the text editor, Open Diagram to the Side does the reverse. Typing re-renders the canvas live, and a canvas edit rewrites only the lines it changes: comments, blank lines, statement order and number formatting stay as you wrote them, and the text editor's cursor stays where it is.
• Problems and highlighting. Lines the parser cannot read (a typo, a link to a missing component) are underlined in the text and listed in the Problems view; a pill in the diagram's bottom-left corner shows how many there are and opens the view. The text has syntax highlighting, and Ctrl/Cmd+/ toggles // comments.
• Full modeler: the tool palette at the top and the context pad on a selected element (append, connect, evolve, settings, color, delete). Double-click an element to rename it; placing a new one opens its name field right away. Enter on a palette entry places the element in the middle of the visible map. Drag a component left or right to evolve it, drag its label to move just the label (Alt+double-click puts it back).
• Map size: drag the plot's right or bottom edge or its corner to resize it (Shift keeps the ratio, Alt turns off snapping, double-click the corner to reset), or open Map size… in the menu for a preset or an exact width × height, previewed on the map as you choose.
• Menu (top left): Map size… and X-axis labels…, Export as PNG, Export as SVG and Export as PNG (4×, transparent), and Keyboard shortcuts…. Exports are pictures; the .wmap / .owm file stays the editable source.
• Zoom (bottom right): −, the zoom level (click for 100 %), + and Fit.
• Empty file: a new, empty map shows a hint and Insert example, which adds the tea shop example as one undoable edit.
• Invalid file: should a text ever fail to render, the diagram keeps the last valid map read-only until the text renders again.
• The Miragon modeler chrome (@miragon/modeler-shell): the same menu, palette, zoom panel and keys as every Miragon modeler. The diagram stays light in dark VS Code themes (high contrast themes get the high-contrast chrome) until all Miragon modelers turn dark together.
• Self-hosted fonts — no CDN, offline-capable. Third-party licenses: THIRD_PARTY_NOTICES.md.

Commands

Run these from the Command Palette (type "Wardley") or the editor title bar:

Keyboard shortcuts on the canvas

Keyboard shortcuts… in the menu lists every key and gesture.

Development

Building from source and the dev loop are documented in CONTRIBUTING.md.

License

MIT