A Web Component for Wardley Maps

This is a simple Web Component that allows Wardley maps to be created in HTML.

To use it, first import the module into the HTML document: 

<script type="module" src="https://jamesaduncan.github.io/Wardley-map/index.mjs"></script>

Then write out the Wardley Map using the <wardley-map> tag anywhere in the document's body.

Inside the wardley-map tag, add <wardley-component> tags to represent the components of your map. Wardley components should have a name attribute that is used to label the component, and an id attribute that is used to identify the component.

The evolution attribute of the <wardley-component> tag can be set to one of the following values to alter where on the map the component is placed:

To link components together, use the <wardley-dependency> tag. The dependency should have a target attribute that specifies the id of the component that it depends on.

Example

The following example demonstrates the canonical hot cup of tea map that is frequently used as an example in the mapping community:

License

The Wardley Map web component is open source, licensed under the GNU GPL v3.0 and is on GitHub.

Map Editor

This editor is just to demonstrate that you can update the map in the DOM and have it update the Wardley Map svg that gets displayed by the browser. The map doesn't depend on the editor, and this editor isn't a tool that should be used to create Wardley maps - there are enough of those already.

New Component
product
Add Dependency

Frequently Asked Questions

  1. Why don't you just use (mapkeep|online wardley maps|miro|.+$)?

    Those tools are all pretty decent, but I don't want to learn another DSL to draw a map. I want to be able to write an HTML document with a Wardley map in it, have the browser render it, and have the HTML be semantically meaningful.

    It can also be entirely self-contained, and work offline if needed.

    The web is beautiful, and a web component to do this keeps it beautiful.

Change Log

  1. Updated so that the size of the y-step varies slightly each component, while doing so predictably. This stops the overlapping line problem, which makes it look as if the map is not showing the dependencies correctly.

  2. First release of the Wardley Map component