Damon Skelhorn

We are excited to announce the launch of our brand new documentation site for Online Wardley Maps (OWM). This site is designed to provide a comprehensive, easy-to-navigate resource for all things related to OWM, including our powerful DSL, plugins, and tools.

What’s New?​

• Detailed Documentation: Explore in-depth guides and references covering the Online Wardley Maps DSL, features, and usage.
• Visual Examples: See screenshots and GIFs demonstrating how to use the VSCode and Obsidian plugins, as well as the web editor.
• Getting Started Guides: Step-by-step instructions to help you quickly create and share your own Wardley Maps.
• Open Source Focus: Learn about our open source philosophy and how you can contribute to the project.
• Cross-Platform Support: Documentation for using OWM in your browser, VSCode, and Obsidian.

Why This Matters​

OnlineWardleyMaps is more than just a website — it is a comprehensive platform consisting of a powerful tool, its own language/DSL, a set of plugins, and the free (open source) OnlineWardleyMaps website. Together, these components empower strategic thinking through visual mapping. Our new documentation site reflects this by making it easier than ever to learn, use, and contribute.

Get Involved​

We encourage you to explore the documentation, try out the examples, and join the community. Your feedback and contributions help shape the future of Online Wardley Maps.

Thank you for being part of this journey!

Wardley Maps in Obsidian​

I’m excited to announce a new project aimed at expanding access to Wardley mapping across even more tools, next up - Obsidian.md. For anyone who hasn't used it, Obsidian.md is a powerful, local-first note-taking tool loved by researchers, thinkers, and creators. Its flexibility and extendability make it a great home for Wardley maps—allowing you to visualise strategic landscapes directly within your notes.

As always, it's open-source by default. This new open-source plugin brings the popular, open format (OnlineWardleyMaps or OWM) for Wardley maps right into Obsidian. With it, you can create and interact with maps as part of your markdown files, offering a new way to keep maps tightly integrated with your workflows. While it’s still in early stages and requires a manual installation, the goal is to publish it soon for easy access.

Thanks for supporting this journey to make Wardley maps available in more tools. I hope this plugin inspires new ways of working with strategy and mapping in your daily notes!

Installation​

From within Obsidian.

1. Open Obsidian Settings
2. Navigate to "Community plugins" and click "Browse"
3. Search for "Wardley Maps" and click Install
4. Enable the plugin in Community plugins

License & Source​

This project is licensed under the AGPL-3.0 license and the source code can be found at github.com/damonsk/obsidian-wardley-maps.

Support the Project​

If you find obsidian-wardley-maps, OnlineWardleyMaps or vscode-wardley-maps valuable, consider supporting its development:

Follow on X (Twitter) @MapsAsCode for updates and announcements!

Your support helps maintain and improve this plugin as well as OnlineWardleyMaps and vscode-wardley-maps. Every contribution is appreciated. Thank you for your support!

Welcome to the January 2024 release of OnlineWardleyMaps. Minor release to bring new features.

Accelerator / Deaccelerator​

accelerator uniquename [0.1, 0.9]

Deaccelerator

deaccelerator someuniquename [0.1, 0.9]

Welcome to the December release of OnlineWardleyMaps. Major release to bring Quality of Life improvements and new features.

New Features​

Pipelines V2​

We've revamped the pipeline components to enhance the positioning of choice components. This improvement introduces a new syntax, detailed below.

Key Highlights:​

Improved Positioning:​

Experience enhanced placement of choice components within your pipelines for a more streamlined and intuitive workflow.

New Syntax:​

Explore the updated syntax that accompanies this change, providing you with a more expressive and efficient way to define your pipeline components.

Backward Compatibility:​

Fear not! Both the new and old syntax will be supported, ensuring a smooth transition for all users.

Legacy syntax & view​

The old syntax created a view which positioned two components at the given maturity.

pipeline Kettle [0.1, 0.9]

Version 2 syntax & view​

New version allows nested components which only require their maturity to be specified as they will inherit visibility position from the parent pipeline.

component Kettle [0.45, 0.57]
pipeline Kettle
{
  component Campfire Kettle [0.50]
  component Electric Kettle [0.63]
}

View an example map which highlights the changes

Annotate value chain links​

You can now specify additional context to links by using the optional operator. This will allow you to highlight which links are "limited by", "constraint" or "feedback loop" without using notes. Example below.

Hot Water->Kettle; limited by 

Evolve name changes​

It may be the case that the evolved component will need to represent something new.

Like Physical Space to Virtual Space.

You can now specify the new name of the evolved component using the syntax below. Virtual Space will be the new component name.

component Physical Space [0.91, 0.46]
evolve Physical Space->Virtual Space 0.8

View an example map which highlights the changes

Map Iterations​

Iterations represent a significant evolution in the way you interact with your Wardley Maps. They allow you to capture the dynamic nature of your landscape over time, enabling a richer and more detailed representation of the evolution of your strategic elements.

Possible uses:​

Time-Phased Evolution:​

With Iterations, you can now create snapshots of your Wardley Map at different points in time, capturing the evolution of components, relationships, and strategies.

Enhanced Strategic Planning:​

Plan and visualize the future states of your landscape by creating iterations that depict the expected evolution of your components and their interdependencies.

Historical Insights:​

Gain valuable insights into the historical development of your landscape by navigating through different iterations, allowing you to analyze trends, patterns, and the effectiveness of strategic decisions over time.

Improved Collaboration:​

Collaborate seamlessly with your team by sharing and discussing specific iterations, fostering a shared understanding of the evolving landscape and supporting strategic decision-making.

Effortless Mapping Updates:​

Easily update and modify your Wardley Map in each iteration, reflecting changes and adaptations as your landscape evolves.

Iterations empower you to move beyond static representations, allowing you to embrace the dynamic nature of strategic planning. By incorporating time-phased evolution into your Wardley Maps, you can make informed decisions, adapt to change, and drive success in an ever-evolving landscape.

Quality of Life Improvements​

Facelift & Light/Dark Themes​

OWM has moved away from Bootstrap and now using MaterialUI. With this change comes a more modern look and feel.

Dark / Light modes.​

By default, OWM will load using a dark theme, including the editor. You can also take advantage of dark maps by using the style dark.

You can toggle light/dark theme from the left hand menu.

Classic Online Wardley Maps​

Not ready to move across? You can still access the old website - https://classic.onlinewardleymaps.com

Unsaved Changes​

Using the browser, the user will be prompted if they navigate away when there are outstanding map changes. This one gets me all the time.

Presentation / Editor Mode​

This will allow you to hide the map text / editor to give a fullscreen view of the map. This will also allow maps to be viewed from a mobile device in portrait mode.

Fullscreen mode.​

Remove the header and iterations and go fullscreen with your map and editor. You can also use this with Presentation mode leaving you with just your map.

Export as SVG​

Now you can take your maps and load them directly into your favorite SVG editor. This feature empowers you to further customise and refine your maps using the tools you love.

Bugfixes​

Changes to drag/drop​

A bug manifested after elements on the map are moved followed by a ESC key press later on. The keypress would incorrectly revert the moved element often making the map appear broken.

Usage Guide​

Until today, the documentation website (this website) was not accessible via the onlinewardleymaps.com website. A navigational link has been added into the "More" menu (top right) and in the footer.

Welcome to the May release of OnlineWardleyMaps. Minor release to bring Quality of Life improvements.

Quality of Life Improvements​

Quick Adding Components​

Until today, the only way to add new map components is via the editor. This QoL improvement will allow you to double click anywhere on the map to quickly place a component. Key bindings are present, Press Enter to add or Escape to cancel.

Quick Linking Components​

Until today, the only way to link components was via the editor. This QoL improvement will allow you to click and point to create a new link. To do this, first press CTRL or CMD if MacOS. You'll notice component that can be linked will have a blue drop shadow. Whilst keeping CTRL/CMD pressed, Click the component and begin to move your mouse. You'll notice a line will start to draw. Next, go to the compoent you'd like to connect (whilst keeping CTRL/CMD pressed) and finally click to complete the link.

1. Press and hold CTRL/CMD throughout the process.
2. Click the start component.
3. Move your mouse to the end component.
4. Click the end component.
5. Release CTRL/CMD.
6. Done.

At any point, you can release CTRL/CMD and the linking process will cancel.

Bugfixes​

A small bug presented itself when dragging/dropping components (the maptext was not correctly updated with new coordinates) when the first line of the maptext was either a comment or blank line

Wardley Maps for Visual Studio Code is a Wardley Map generator. It takes map code written in the editor and renders it as a Wardley Map. You can interact with the map by repositioning components by dragging or dropping. Changes made via the rendered map are reflected back into your map code.

Quick Links​

• Getting Started
• Get the extension
• Using the extension
  • Syntax Highlighting
  • Displaying Maps
  • Auto Completions
  • Snippets

Getting Started​

First, you need to make sure you have Visual Studio Code installed. Skip ahead if you're already setup.

Head over to https://code.visualstudio.com/download and download and install the version for your operating system.

Get the extension​

Once Visual Studio Code is installed and running, search and install Wardley Maps extension from the Extensions panel. To get to the Extensions panel, from the file menu, select View -> Extensions. You can also use the keyboard shortcut (Windows) Ctrl+Shift+X (macOS) Cmd+Shift+X.

Simply search for and install the extension Wardley Maps shown below.

Alternatively, if you are familiar with VSCode, you can shortcut this process by entering the following command into the Command Palette ((Windows) Ctrl+Shift+P / (macOS) Cmd+Shift+P). ext install damonsk.vscode-wardley-maps

Using the extension​

• Syntax Highlighting
• Displaying Maps
• Auto Completions
• Snippets

Syntax Highlighting​

To reduce the cognitive load when reading maps as code, this extension brings with it syntax highlighting.

To enable syntax highlighting, you have two options. By default, any file with an extenion of .wm or .owm will auto enable the syntax highlighting.

For existing files, or new unsaved files, you can set the Language Mode.

Using the Command Palette (keyboard shortcut: (Windows) Ctrl+Shift+P (macOS) Cmd+Shift+P) enter Change Language Mode, press enter and then select Wardley Map

Displaying Maps​

Using the Command Palette (keyboard shortcut: (Windows) Ctrl+Shift+P (macOS) Cmd+Shift+P) enter Wardley Maps: Display Map and then press enter.

Auto Completions​

To access the code completions (or intellisense) within the text editor, press Ctrl+Space. Code completions (shown in red below) will contain both the keywords (such as component anchor ecosystem) as well as any variables specific to your map. For example, component Hot Water [...] will result in a variable Hot Water. Variables can be used to link components in a value chain. Hot Water->Water

Snippets​

Similar to code completions, to access snippets within the text editor, press Ctrl+Space. Snippets (shown in yellow below) are complete examples which you can modify, you may tab between placeholders for quick editing.

The following snippet anchor name [0.9, 0.1] has three placeholders.

anchor <initial text cursor> [<tab to edit>, <tab again to edit>]

License & Source​

This project is licensed under the MIT license and the source code can be found at github.com/damonsk/vscode-wardley-maps.

Support the Project​

If you find obsidian-wardley-maps, OnlineWardleyMaps or vscode-wardley-maps valuable, consider supporting its development:

Follow on X (Twitter) @MapsAsCode for updates and announcements!

Your support helps maintain and improve this plugin as well as OnlineWardleyMaps and vscode-wardley-maps. Every contribution is appreciated. Thank you for your support!

Pioneers, Settlers and Town Planners Example​

Notes are generic pieces of text that you can place anywhere on a map. They can be versatile and allow you to add more context.

Here is an example of using note elements combined with pioneers, settlers and townplanners elements to create a legend in the top right of the map.

Template (copy and paste into your map)​

// PST Legend Top Right
pioneers [0.95, 0.83] 120 30
settlers [0.88, 0.83] 120 30
townplanners [0.81, 0.83] 120 30

note Pioneers [0.91, 0.85]
note Settlers [0.84, 0.85]
note Town Planners [0.77, 0.85]

Output​

To get started with this template click here to clone this example.

Maturity Mapping Example​

Notes are generic pieces of text that you can place anywhere on a map. They can be versatile and allow you to add more context.

Here is an example of using adding additional context from Maturity Mapping onto the map. The evolution axis has been changed to Novel, Emerging, Good and Best.

Template (copy and paste into your map)​

// Map setup.
evolution Novel->Emerging->Good->Best
note New to us [0.035, 0.01]
note Not well understood [0.01, 0.01]
note Trying this out [0.035, 0.18]
note Can begin to explain [0.01, 0.18]
note Getting to grips with this [0.035, 0.41]
note Room for improvement [0.01, 0.41]
note Nailed it [0.035, 0.71]
note A practice we've established [0.01, 0.71]

note Unmodeled [0.06, 0.01]
note Divergent [0.06, 0.18]
note Convergent [0.06, 0.41]
note Modeled [0.06, 0.71]

Output​

To get started with this template click here to clone this example.

Usage​

pioneers [<visibility>, <maturity>] <width> <height>
settlers [<visibility>, <maturity>] <width> <height>
townplanners [<visibility>, <maturity>] <width> <height>

Let's look at each part​

pioneers, settlers and townplanners are keywords. Each new line in your editor should begin with one of these keywords.

<visibility> and <maturity> are the co-ordinates of where you want the block to appear on your map. For example 0.9, 0.2 would translate roughly to Visible and Custom Built.

As we build it up it should now look like

pioneers [0.9, 0.2]

Next up are the width and height properties. These are numbers. A good starter would be 150 80.

pioneers [0.9, 0.2] 150 80

An example of a Web Site component with pioneers would look like:

component Web Site [0.82, 0.25]
build Web Site
pioneers [0.9, 0.2] 150 80

Output​