4 posts tagged with "onlinewardleymaps"

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.

🎯 Key Highlights​

✨ Resizable Editor and Map Interface​

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:

• Hover over the divider between editor and map to see the resize cursor
• Click and drag left or right to adjust panel sizes
• Automatic persistence - your preferred layout is saved in your browser
• Smart constraints - 20% minimum to 60% maximum editor width to keep both panels functional

Perfect for different workflows:

• More editor space (50-60%): Ideal for complex maps with detailed annotations
• Balanced layout (33% default): Great for most mapping tasks
• More map space (20-25%): Perfect when you primarily interact with the visual map

🔧 DSL Syntax Modernisation​

We've simplified and modernised the Domain Specific Language (DSL) to make it more consistent and intuitive.

Market and Ecosystem Components​

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:

• Consistent syntax across all component types
• Decorator support - combine market/ecosystem with build/buy/outsource
• Better tooling - improved syntax highlighting and auto-completion
• Enhanced semantics - markets and ecosystems are clearly specialised components

Enhanced Decorator Combinations​

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)

🚀 Complete TypeScript Migration​

OnlineWardleyMaps has undergone a complete migration from JavaScript to TypeScript, bringing significant improvements to code quality, developer experience, and application reliability.

What This Means for Users​

• Enhanced Performance - Better optimisation and faster rendering
• Improved Reliability - Stronger type checking prevents runtime errors
• Better Error Messages - More helpful feedback when something goes wrong
• Future-Proof Architecture - Foundation for upcoming features and improvements

Technical Improvements​

• Unified Component Architecture - Consistent interfaces across all map elements
• Type-Safe Link Strategies - Robust handling of component relationships
• Modern React Patterns - Improved state management and component lifecycle
• Enhanced Symbol System - Modular, performant SVG-based map elements

🛠️ Architecture Enhancements​

Unified Map Elements​

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
}

Improved Link Processing​

Enhanced link strategies provide more reliable component connections:

• Strategy Pattern Implementation - Clean separation of link determination logic
• Evolution State Handling - Elegant support for evolved and evolving components
• Performance Optimised - Efficient filtering and processing of complex maps

Modern Symbol Components​

All map symbols have been modernised with:

• React.memo Optimisation - Prevents unnecessary re-renders
• Consistent Theming - Better support for light/dark modes
• Type Safety - Full TypeScript coverage with proper interfaces
• Modular Design - Easy to extend and maintain

📈 Performance Improvements​

The TypeScript migration brings noticeable performance improvements:

• Faster Map Rendering - Optimised component lifecycle and memoisation
• Reduced Memory Usage - Better garbage collection and state management
• Improved Responsiveness - Smoother interactions and transitions
• Enhanced Scalability - Better performance with large, complex maps

🔮 Looking Forward​

This release establishes a solid foundation for future enhancements:

• Plugin Architecture - Framework for community extensions
• Advanced Analytics - Enhanced map analysis and insights
• Collaboration Features - Real-time collaborative editing capabilities
• Mobile Optimisation - Improved experience on tablets and mobile devices

📚 Documentation Updates​

Our documentation has been updated to reflect all changes:

• Editor and Map Resizing Guide
• Updated DSL Reference
• Component Syntax Guide
• Market & Ecosystem Elements

🔗 Supporting the Project​

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!

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