We're excited to announce a major milestone in Online Wardley Maps' internationalisation journey! We've just completed a comprehensive overhaul of our React UI components to provide seamless multilingual support across all 10 supported languages.
Welcome to the June 2025 release of OnlineWardleyMaps! This is our most significant modernisation update to date, featuring a complete TypeScript migration, enhanced user interface, and streamlined DSL syntax.
We've introduced a brand new resizable split pane interface that puts you in control of your workspace layout. Now you can dynamically adjust the space between the text editor and map canvas to suit your working style.
How it works:
Perfect for different workflows:
The resize feature works seamlessly across light and dark themes, with the divider automatically adapting to your chosen interface style.
We've simplified and modernised the Domain Specific Language (DSL) to make it more consistent and intuitive.
Legacy syntax (now removed):
market CustomerBase [0.9, 0.3]
ecosystem TechPlatform [0.4, 0.7]
New unified syntax:
component CustomerBase [0.9, 0.3] (market)
component TechPlatform [0.4, 0.7] (ecosystem)
Benefits of the new approach:
The new syntax enables powerful combinations:
component SupplierMarket [0.8, 0.4] (market, outsource)
component TechEcosystem [0.6, 0.2] (ecosystem, build)
component Platform [0.5, 0.8] (market, buy)
Migration Guide: Existing maps using the legacy market and ecosystem syntax will continue to work, but we recommend updating to the new decorator syntax for future compatibility and enhanced features.
OnlineWardleyMaps has undergone a complete migration from JavaScript to TypeScript, bringing significant improvements to code quality, developer experience, and application reliability.
The new TypeScript architecture introduces a unified component system that treats all map elements consistently:
interface UnifiedComponent {
id: string;
name: string;
type: string; // 'component' | 'anchor' | 'market' | 'ecosystem'
maturity: number;
visibility: number;
decorators?: ComponentDecorator;
// ... additional properties
}
Enhanced link strategies provide more reliable component connections:
All map symbols have been modernised with:
The TypeScript migration brings noticeable performance improvements:
This release establishes a solid foundation for future enhancements:
Our documentation has been updated to reflect all changes:
OnlineWardleyMaps remains free and open-source. If you find it valuable, consider supporting its development:
Follow @MapsAsCode on X (Twitter) for updates and Wardley mapping insights!
Ready to explore the new features? Visit OnlineWardleyMaps and experience the modernised interface and enhanced DSL capabilities. Your maps have never looked better or been easier to create!
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.
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.
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!
Check out the Getting Started guide to begin creating your own Wardley Maps today.
The documentation site is continuously evolving. Stay tuned for more updates and new features.
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!
From within Obsidian.
This project is licensed under the AGPL-3.0 license and the source code can be found at github.com/damonsk/obsidian-wardley-maps.
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 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.
We've revamped the pipeline components to enhance the positioning of choice components. This improvement introduces a new syntax, detailed below.
Experience enhanced placement of choice components within your pipelines for a more streamlined and intuitive workflow.
Explore the updated syntax that accompanies this change, providing you with a more expressive and efficient way to define your pipeline components.
Fear not! Both the new and old syntax will be supported, ensuring a smooth transition for all users.
The old syntax created a view which positioned two components at the given maturity.
pipeline Kettle [0.1, 0.9]
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
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
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
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.
With Iterations, you can now create snapshots of your Wardley Map at different points in time, capturing the evolution of components, relationships, and strategies.
Plan and visualize the future states of your landscape by creating iterations that depict the expected evolution of your components and their interdependencies.
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.
Collaborate seamlessly with your team by sharing and discussing specific iterations, fostering a shared understanding of the evolving landscape and supporting strategic decision-making.
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.
OWM has moved away from Bootstrap and now using MaterialUI. With this change comes a more modern look and feel.
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.
Not ready to move across? You can still access the old website - https://classic.onlinewardleymaps.com
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.
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.
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.
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.
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.
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.
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.
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.
At any point, you can release CTRL/CMD and the linking process will cancel.
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.
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.
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
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
Using the Command Palette (keyboard shortcut: (Windows) Ctrl+Shift+P (macOS) Cmd+Shift+P) enter Wardley Maps: Display Map and then press enter.
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
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>]
This project is licensed under the MIT license and the source code can be found at github.com/damonsk/vscode-wardley-maps.
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 [<visibility>, <maturity>] <width> <height>
settlers [<visibility>, <maturity>] <width> <height>
townplanners [<visibility>, <maturity>] <width> <height>
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
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.
// 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]
To get started with this template click here to clone this example.