Wardley Map Builder – Benutzerhandbuch

Was ist Wardley Mapping?

Wardley Mapping ist eine strategische Analysemethode, die Simon Wardley in den 2000er Jahren entwickelt hat. Eine Wardley Map visualisiert die Wertschöpfungskette einer Organisation als zweidimensionale Karte: Was braucht der Nutzer, und wie reif sind die Komponenten, die diesen Bedarf erfüllen?

Das Ergebnis ist eine strategische Landkarte, die zeigt, wo eine Organisation heute steht, wohin sich Technologien und Praktiken entwickeln — und welche Investitionen, Partnerschaften oder Eigenbau-Entscheidungen sich daraus ableiten.

Die zwei Achsen

Y-Achse — Sichtbarkeit: Oben stehen Komponenten, die der Nutzer direkt sieht (Kundenbedarf). Unten stehen unsichtbare Infrastruktur-Elemente.
X-Achse — Evolution: Von links (Genesis = einmalig, neu) über Custom und Product bis rechts (Commodity = Standard, austauschbar wie Strom).
Pfeile zeigen Abhängigkeiten: Komponente A hängt von Komponente B ab.

Kernfrage einer Wardley Map: Was braucht mein Nutzer wirklich — und welche der dafür nötigen Komponenten sollte ich selbst bauen, kaufen oder auslagern?

Benutzeroberfläche

Header

◆ Wardley Map Builder — Titel und Branding
Map-Selektor (Dropdown) — wechselt zwischen gespeicherten Maps
+ Neue Map — öffnet den Dialog zur Map-Erstellung
📋 Maps — öffnet die Map-Verwaltung (alle Maps, umbenennen, löschen)
↓ Export — öffnet Export-Dialog (JSON / SVG / PNG)
↑ Import — lädt eine JSON-Datei als neue Map
⬅ — zurück zur Startseite
? — öffnet dieses Handbuch in einem neuen Fenster

Toolbar

Die Toolbar enthält die vier Interaktionsmodi (Details in Abschnitt 4) und den Typ-Selektor für neue Komponenten. Der aktive Modus ist gold hinterlegt.

Canvas (Kartenbereich)

Der SVG-Canvas füllt den verbleibenden Bereich. Er zeigt die vier Evolutionsspalten, Achsenbeschriftungen und alle Komponenten mit ihren Verbindungen. Das Canvas ist vollständig responsiv und skaliert mit dem Browserfenster.

Komponenten-Popup

Beim Auswählen einer Komponente öffnet sich ein Popup in der Nähe der Komponente. Es enthält Namensfeld, Typ-Selektor, Inertia/Evolve-Schalter und die Löschen-Schaltfläche. Das Popup schließt mit Esc oder durch Klick auf den Canvas-Hintergrund.

Strategische Notizleiste

Unterhalb des Canvas befindet sich eine ausklappbare Notizleiste für die strategische Kernaussage der Map.

Geschlossen: 28px-Leiste mit 📝 Strategische Notizen. Sobald Inhalt vorhanden ist, erscheint der erste Satz als goldene Vorschau — auch ohne Aufklappen sichtbar.
Geöffnet: Textarea mit automatischer Speicherung bei jeder Eingabe und Zeichenzähler.
Beim Import: Enthält die importierte JSON-Datei ein notes-Feld, wird dessen Inhalt sofort in die Leiste geladen.
Im Export: Das notes-Feld wird in alle drei Exportformate (JSON, SVG, PNG) übernommen.

Empfohlener Inhalt: Strategische Kernaussage (2–3 Sätze), Hypothesen über zukünftige Evolution, Investitions- oder Build-vs-Buy-Implikationen — alles, was die Karte interpretiert und nicht nur beschreibt.

Komponenten-Typen

Jede Komponente gehört einem von fünf Typen an. Der Typ wird über das Komponenten-Popup oder den Typ-Selektor in der Toolbar gesetzt.

Typ	Darstellung	Typische Verwendung
User Need	Goldener Kreis (groß)	Kundenbedürfnisse, Nutzeranforderungen — steht immer oben in der Wertschöpfungskette
Capability	Weißer Kreis	Interne Fähigkeiten, Prozesse, Teams — das eigentliche Kerngeschäft
Practice	Türkiser Kreis	Methoden, Vorgehensweisen, Arbeitsweisen (z. B. Agile, DevOps, OEE-Monitoring)
Data	Grüner Kreis	Datenquellen, Datenassets, Informationsflüsse (z. B. Maschinendaten, ERP-Daten)
External	Grauer gestrichelter Kreis	Externe Dienste, SaaS, Plattformen, Infrastruktur-Utilities (z. B. Cloud, ERP-System)

Positionierungsregel: User Needs stehen grundsätzlich oben (hohe Sichtbarkeit). External-Komponenten stehen oft unten (niedrige Sichtbarkeit) und weit rechts (Commodity), da sie standardisierte Dienste repräsentieren.

Interaktionsmodi

Die vier Modi werden über die Toolbar-Schaltflächen oder Tastaturkürzel gewechselt. Der aktive Modus bestimmt, was ein Klick auf den Canvas oder eine Komponente bewirkt.

S · Auswählen

Auswählen & Verschieben

Klick auf Komponente → Popup öffnet sich. Komponente durch Ziehen verschieben. Klick auf leeren Canvas → Auswahl aufheben.

A · Hinzufügen

Komponente platzieren

Klick auf eine beliebige Stelle im Canvas → neue Komponente wird dort platziert. Typ richtet sich nach dem aktiven Typ-Selektor in der Toolbar.

L · Verbinden

Abhängigkeit zeichnen

Erste Komponente anklicken (türkiser Ring = Quelle). Zweite Komponente anklicken → Pfeil wird gezogen. Doppelte Verbindung wird verhindert.

D · Löschen

Löschen

Klick auf Komponente → Komponente und alle anliegenden Verbindungen werden gelöscht. Klick auf Verbindungslinie → nur diese Verbindung wird gelöscht.

Verbinden — Schritt für Schritt: Modus L wählen → Quell-Komponente klicken (türkise Hervorhebung + Toast-Hinweis) → Ziel-Komponente klicken. Der gestrichelte Gummiband-Pfeil zeigt die geplante Verbindung während des Zeigens an.

Inertia & Evolution

Diese beiden Optionen erweitern jede Komponente um strategische Zusatzinformationen. Sie werden im Komponenten-Popup über die Schalter ⊠ Inertia und → Evolve aktiviert.

⊠ Inertia

Ein gefülltes Dreieck rechts neben der Komponente signalisiert Widerstand gegen Evolution — z. B. durch hohe Migrationskosten, Abhängigkeiten oder politische Widerstände. Die Komponente ist evolutionsfähig, bewegt sich aber nicht von allein.

→ Evolve

Ein goldener gestrichelter Pfeil zeigt, wohin sich die Komponente entwickeln soll. Der runde Pfeilkopf ist ziehbar — verschiebe ihn horizontal, um das Evolutionsziel anzupassen. Nützlich, um geplante Investitionen oder strategische Richtungsentscheidungen zu visualisieren.

Kombination: Inertia + Evolve an derselben Komponente bedeutet: „Wir wollen dieses Element weiterentwickeln, aber es gibt erhebliche Hürden." Das ist eine klassische Situation bei Legacy-Systemen mit strategischem Ablösungsplan.

Map-Verwaltung

Der Builder speichert alle Maps lokal im Browser (localStorage). Es gibt keine Serververbindung — die Daten verlassen das Gerät nur beim manuellen JSON-Export.

Neue Map erstellen

Schaltfläche + Neue Map im Header klicken → Namen eingeben → Enter oder „Erstellen". Die neue Map ist sofort aktiv.

Zwischen Maps wechseln

Das Dropdown im Header listet alle gespeicherten Maps. Auswahl wechselt sofort zur entsprechenden Map. Der letzte Stand wird automatisch gespeichert.

Map umbenennen oder löschen

Schaltfläche 📋 Maps klicken → Map-Liste öffnet sich. ✏️ umbenennen, 🗑 löscht (mit Bestätigung). Die letzte Map kann nicht gelöscht werden.

Canvas leeren

Schaltfläche 🗑 Leeren in der Toolbar entfernt alle Komponenten und Verbindungen der aktiven Map nach Bestätigung. Die Map selbst bleibt bestehen.

Hinweis: localStorage ist browserspezifisch. Ein Wechsel des Browsers oder Gerätewechsel löscht die gespeicherten Maps. Für dauerhaftes Sichern regelmäßig JSON exportieren.

Export & Import

Schaltfläche ↓ Export öffnet den Export-Dialog mit drei Optionen:

Format	Inhalt	Verwendung
JSON	Vollständige Map-Daten (Komponenten, Links, Name)	Sicherung, Weitergabe, Re-Import in den Builder
SVG	Vektorgrafik des aktuellen Canvas-Zustands	Einbettung in Präsentationen, skalierbar ohne Qualitätsverlust
PNG	Rasterbild in 2× Auflösung (2000 × 1360 px)	Direkte Verwendung in Word, PowerPoint, E-Mails

JSON importieren

Schaltfläche ↑ Import im Header → Datei auswählen. Die importierte Map wird als neue Map angelegt (neue ID) und sofort aktiviert. Bestehende Maps werden nicht überschrieben.

Struktur einer JSON-Datei

Feld	Typ	Beschreibung
`name`	string	Anzeigename der Map
`notes`	string	Strategische Kernaussage / Notizen — wird in die Notizleiste geladen (optional, kann leer sein)
`components`	array	Liste aller Komponenten (siehe unten)
`links`	array	Liste aller Verbindungen (`from` → `to`)
Felder pro Komponente
`id`	string	Eindeutiger Bezeichner (beliebig, z. B. "c01")
`name`	string	Anzeigename auf der Karte
`x`	0.0 – 1.0	Position auf der Evolutionsachse (0 = Genesis, 1 = Commodity)
`y`	0.0 – 1.0	Sichtbarkeit (0 = unsichtbar/unten, 1 = sichtbar/oben)
`type`	string	`user` · `capability` · `practice` · `data` · `external`
`inertia`	boolean	Inertia-Dreieck anzeigen
`evolve`	boolean	Evolutions-Pfeil anzeigen
`evolveX`	0.0 – 1.0	Zielposition des Evolutions-Pfeils auf der X-Achse

Beispieldatensätze: Drei importierbare JSON-Dateien stehen zur Verfügung — alle enthalten ein befülltes notes-Feld:

wardley_example.json — Digitale Transformation Fertigung & IIoT (20 Komponenten, alle Typen)
teashop_wardley.json — Tea Shop, klassisches Lehrbeispiel (8 Komponenten)
onlinephoto_wardley.json — Online Photo Sharing mit Cloud-Evolution (8 Komponenten)

Tastaturkürzel

`S`	Modus: Auswählen & Verschieben
`A`	Modus: Komponente hinzufügen
`L`	Modus: Abhängigkeit zeichnen (Link)
`D`	Modus: Löschen
`Esc`	Auswahl aufheben · Popup schließen · Link-Modus zurücksetzen
`N`	Strategische Notizleiste auf-/zuklappen
`Del` / `Backspace`	Ausgewählte Komponente löschen (wenn Popup aktiv und kein Textfeld fokussiert)
`Enter`	Popup schließen (wenn Namensfeld fokussiert)

Tipp: Shortcuts sind nur aktiv, wenn kein Textfeld (Namenseingabe, Dialog) fokussiert ist. Im Namensfeld tippt man normal — Del löscht dann Buchstaben, keine Komponenten.

Wardley Map — Grundprinzipien

Evolutionsstufen verstehen

Stufe	Merkmale	Typische Entscheidung
Genesis	Neu, einmalig, experimentell, kaum verstanden	Selbst erforschen, Startup-Mindset, hohe Unsicherheit einplanen
Custom	Wachsendes Verständnis, individuelle Lösungen, teuer	Selbst bauen oder auf Spezialanbieter setzen
Product	Markt mit mehreren Anbietern, Produktvergleiche möglich	Kaufen — Make-or-Buy-Entscheidung auf Basis von Kosten/Differenzierung
Commodity	Standardisiert, günstig, austauschbar, wie Strom	Auslagern — kein Wettbewerbsvorteil durch Eigenentwicklung

Strategische Muster

Differenzierung links, Standardisierung rechts: Wettbewerbsvorteile entstehen in der Genesis/Custom-Zone. Commodity-Komponenten sollten nicht selbst gebaut werden.
Inertia als Risiko: Komponenten mit Inertia-Markierung blockieren oft die Evolution der darüber liegenden Komponenten. Sie sollten explizit addressiert werden.
Abhängigkeiten zeigen strategische Hebel: Eine Komponente mit vielen eingehenden Pfeilen ist ein kritischer Engpass — fällt sie aus, fallen alle abhängigen Komponenten.
Bewegung antizipieren: Evolution-Pfeile helfen, zu planen, bevor der Markt sich bewegt. Frühzeitige Positionierung auf Product/Commodity spart Kosten.

Häufige Fehler

Zu viele Komponenten auf einmal — besser mit dem Nutzerbedarf beginnen und die Map von oben nach unten aufbauen.
Zu abstrakte Komponentennamen — gute Namen sind konkret und eindeutig (nicht „IT-Infrastruktur", sondern „Azure Kubernetes Service").
Positionen geschätzt statt analysiert — die X-Position sollte auf Marktbeobachtung beruhen, nicht auf Gefühl.

Einstieg: Beginne mit einem User Need oben links und frage für jede Komponente: „Was brauche ich, damit das funktioniert?" So entsteht die Wertschöpfungskette von selbst.