Collaborative Wardley mapping in your browser. Open a link, start mapping, and see your team's edits and cursors live.
Three people on the same map, with a pipeline showing loose-leaf tea and tea bags at different stages of evolution. Everyone sees the others' cursors, and every edit, on the canvas and in the code, shows up for everyone at once.
A Wardley Map shows a value chain against how evolved each part is, from genesis to commodity. Its value comes from the conversation it starts, so a map should be something a team builds together, not a picture one person emails around.
- Multiplayer from the first click. Every map has its own URL. Share it and anyone with the link can edit with you. No accounts, no sign-up.
- Draw it or write it. Drag components around the canvas, or edit the plain text beside it. Both stay in sync, so you can sketch fast and fine-tune precisely.
- See who's there. Named, coloured cursors on the canvas and in the editor show where everyone is working. Hover the people count to see who's on the map.
- Export a picture. Download the map as a PNG for slides and docs, or as an SVG that stays sharp at any size, from the ⋮ menu.
- Saved automatically. Maps save as you go, with a status light that only turns green once the save is confirmed.
- Speaks Wardley. The evolution axis is marked Genesis, Custom, Product and Commodity; hover a stage to see what it's called for practices, data and knowledge. Pipelines show one need met at several stages of evolution.
- Fast. Edits go directly between browsers (peer to peer), and the canvas is drawn with WebGL.
- Go to maptogether.io. You land on a blank map. It is saved, with its own link, as soon as you edit it.
- Double-click the canvas, type a component name, and press Enter.
- Click Share to copy the link and send it to your team.
| To | With a mouse | On a touch screen |
|---|---|---|
| Add a component | Double-click the canvas, or pick the component tool (C) and click | Double-tap the canvas |
| Rename a component | Double-click it | Double-tap it |
| Link two components | Hold Ctrl/Cmd, or pick the link tool (L), then click both | Tap the link tool, then tap both |
| Move components | Drag them | Press and hold, then drag |
| Select | Click a component or link; drag on the empty canvas or hold Shift for several | Tap a component or link |
| Pan | Scroll, drag with Space held, or pick the pan tool (H) | Drag with one finger |
| Zoom | Ctrl/Cmd + scroll, or the zoom buttons | Pinch |
| Delete | Select, then press Delete or Backspace | Select, then tap the bin in the toolbar |
| Start a new map | Click New map | Tap + |
Paste examples/tea-shop.mt into the editor of a new
map to get the tea shop above, the classic first Wardley Map. A trimmed-down
version looks like this:
Business [95, 46]
Public [95, 72]
Cup of Tea [80, 62]
Tea [55, 73] {
Loose Leaf [55, 56]
Tea Bags [55, 90]
}
Kettle [33, 50]
Power [10, 86]
Business.Cup of Tea
Public.Cup of Tea
Cup of Tea.Tea
Cup of Tea.Kettle
Kettle.Power
The text syntax is small:
name [visibility, evolution]places a component. Both numbers run from 0 to 100: visibility from hidden infrastructure (0) up to the user (100), and evolution from genesis (0) across to commodity (100).needer.neededdraws a dependency between two components.name [v, e] { ... }makes a pipeline: put one child component per line inside the braces, each at its own evolution. Children sit on the pipeline's row, so their visibility is ignored, and they move with it when you drag it.// commentsare ignored.
Map text saved as a file uses the .mt extension (MapTogether script).
MapTogether is in alpha. Expect rough edges, and please open an issue when you hit one.
MapTogether is TypeScript and React, with the map drawn by PixiJS (WebGL) and the text edited in CodeMirror. A map is a Yjs document (a CRDT), so edits merge without conflicts. They travel between browsers over WebRTC, and a Cloudflare Worker with Durable Objects connects peers and saves each map.
Development setup, architecture, the multiplayer relay, and the code quality gate are covered in CONTRIBUTING.md.