Mermaid.js Wardley-Map-Syntax & Strategie-Leitfaden

Ein Wardley-Map ist ein leistungsstarkes Framework, das für die Geschäftsstrategie verwendet wird, um Wertketten zu visualisieren und die Entwicklung von Komponenten aufzustellen. Eingeführt als native Funktion in Mermaid v11.14.0+ ermöglicht die wardley-betaEngine ermöglicht Strategieteams, Architekten und Produktmanager, Marksumgebungen mithilfe von reiner Textdarstellung abzubilden. Indem technische Komponenten in einem zweidimensionalen Koordinatensystem positioniert werden, können Teams Wertkettenabhängigkeiten visuell analysieren, Marktrigidität erkennen und strukturierte Entscheidungen zwischen internem Aufbau und externem Erwerb treffen.

Verständnis des Koordinatengittersystems

Im Gegensatz zu standardmäßigen freien Flussdiagrammen wird jeder Bestandteil einer Wardley-Map auf einem starren zweidimensionalen Raum basierend auf zwei Dezimalkoordinaten abgebildet, die sich von 0.0 bis 1.0:

• Sichtbarkeit (Y-Achse / Erste Koordinate): Misst, wie sichtbar oder wertvoll ein Bestandteil für einen Endbenutzer ist. Ein Wert von 1.0 steht für einen direkten, benutzerorientierten Berührungspunkt (höchste Sichtbarkeit), während 0.0 steht für versteckte grundlegende Infrastruktur.
• Evolution (X-Achse / Zweite Koordinate): Misst das Reifegradniveau eines Marktassets. Es bewegt sich von links nach rechts über vier unterschiedliche Entwicklungsphasen: Genesis (0.0), Maßgeschneidert (0.25), Produkt/Miete (0.5), und Kommodität/Utility (0.75 bis 1.0).

Grundlegende Syntaxstruktur

Jedes Diagramm beginnt mit dem wardley-betaDeklarationskopf. Anschließend legen Sie Benutzeranker mit dem Anker Schlüsselwort, zeichnen Sie die operativen Infrastrukturblöcke mit dem Komponente Schlüsselwort und zeichnen Sie Beziehungen zwischen ihnen mit gerichteten Pfeilen.

wardley-beta
titel Einfache Strategiekarte
anker Kunde [0.9, 0.5]
komponente Website [0.7, 0.4]
Kunde -> Website

Syntaxreferenz

Die Tabelle unten zeigt die primären semantischen Bausteine und Parameter auf, die erforderlich sind, um eine Wardley-Karte innerhalb des Mermaid-Kerninterpreters zu strukturieren.

Strategische Aktionssymbole (Bauen, Kaufen, Auslagern, Markt)

Um strategische Umsetzungspläne explizit zu dokumentieren, erlaubt Mermaid.js das Anhängen von Aktionen an einzelne Komponenten. Diese Aktionen platzieren unterschiedliche Formen auf dem Koordinatenknoten, um architektonische Entscheidungen sofort zu vermitteln:

Syntax-Implementierungsbeispiel:

wardley-beta
komponente Benutzerdefinierte Benutzeroberfläche [0.80, 0.30] (bauen)
komponente Zahlungsprozessor [0.45, 0.65] (kaufen)

Realitätsnaher Bauplan: Wertkette eines handwerklichen Kaffee-Shops

Dieser umfassende Bauplan verfolgt ein sich ausweitendes Geschäftsmodell für einen Laden. Er skizziert eine vollständige Kartenarchitektur – die Konfiguration einer größeren benutzerdefinierten Größenbegrenzung, die Festlegung von Geschäftsankerpunkten, die Setzung spezialisierter Bauen/Kaufen-Markierungen sowie die Darstellung von Abhängigkeitsverbindungen über die Phasen der Achsen hinweg.

wardley-beta
titel "Geschäftsstrategiekarte für Café"
größe [1100, 650]

%% Kerngeschäftsanker
anker Franchise-Inhaber [0.95, 0.55]
anker Endkunde [0.90, 0.65]

%% Operative Komponenten-Ebenen
komponente Spezialkaffee [0.75, 0.45] (bauen)
komponente Verkaufsterminal [0.60, 0.60] (kaufen)
komponente Automatisiertes Heißwasser [0.45, 0.75] (Markt)
komponente Stromnetzversorgung [0.15, 0.90] (auslagern)

%% Abhängigkeitskette: Verbindungswege
Endkunde -> Spezialkaffee
Franchise-Inhaber -> Verkaufsterminal
Spezialkaffee -> Automatisiertes Heißwasser
Verkaufsterminal -> Stromnetzversorgung
Automatisiertes Heißwasser -> Stromnetzversorgung

Syntax-Tipp: Bei der Deklaration von Koordinaten-Arrays beachten Sie, dass der vertikale Y-Wert (Sichtbarkeit) *zuerst* kommt und der horizontale X-Wert (Entwicklung) *zweitens* folgt[Sichtbarkeit, Entwicklung]. Die Umkehrung dieser Positionen ist die häufigste Ursache dafür, dass Komponenten falsch entlang des unteren Randes Ihrer Kartenfläche gruppiert werden.

Häufige Syntax-Fehler & Systembeschränkungen

Beim Kompilieren von Wertkettenräumen sollten Sie diese drei Layout-Grenzen im Auge behalten, um sicherzustellen, dass Ihr Text sauber gerendert wird:

• Strenge Koordinatenbereiche: Die Positionen müssen genau innerhalb der Dezimalklammern zwischen 0.0 und 1.0. Die Verwendung absoluter ganzzahliger Pixel (wie [400, 200]) anstelle von Layout-Verhältnissen innerhalb der Knotenargumente löst einen Systemausführungsfehler aus.
• Deklarationsreihenfolge für Verbindungen: Für eine saubere Layout-Darstellung stellen Sie sicher, dass alle Ihre anker und komponenteBezeichnungen werden deklariert und mit Koordinaten versehen *vor* der Schreibweise beliebiger Knoten-Beziehungslinien (A -> B). Das Verknüpfen mit einer nicht deklarierten Bezeichnung kann die Positionierung der Kartenachsen stören.
• Bezeichnungsraum-Einschließungen: Wenn ein Komponentenname Leerzeichen, Symbole oder Kommata enthält, stellen Sie sicher, dass er genau geschrieben ist. Das erneute Verwenden von nicht übereinstimmenden Zeichenfolgen in Verbindungspfaden erstellt einen völlig neuen, nicht positionierten Knoten auf der Rasterfläche.