{"id":937,"date":"2026-07-08T05:34:20","date_gmt":"2026-07-08T05:34:20","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/"},"modified":"2026-07-29T08:35:41","modified_gmt":"2026-07-29T08:35:41","slug":"mermaid-js-wardley-map-syntax-strategy-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/","title":{"rendered":"Mermaid.js Wardley Map Syntax &#038; Strategy Guide"},"content":{"rendered":"<p>A Wardley Map is a powerful framework used for business strategy to visualize value chains and map out component evolution. Introduced as a native feature in Mermaid v11.14.0+, the <code>wardley-beta<\/code> engine allows strategy teams, architects, and product managers to map market environments using pure text. By positioning technical components across a 2D coordinate space, teams can visually analyze value chain dependencies, spot market inertia, and make structured build vs. buy choices.<\/p>\n<h2>Understanding the Coordinate Grid System<\/h2>\n<p>Unlike standard free-form flowcharts, every component in a Wardley Map is plotted onto a rigid two-dimensional space based on two decimal coordinates ranging from <code>0.0<\/code> to <code>1.0<\/code>:<\/p>\n<ul>\n<li><strong>Visibility (Y-Axis \/ First Coordinate):<\/strong> Measures how visible or valuable a component is to an end-user. A value of <code>1.0<\/code> represents a direct, user-facing touchpoint (highest visibility), while <code>0.0<\/code> represents hidden foundational infrastructure.<\/li>\n<li><strong>Evolution (X-Axis \/ Second Coordinate):<\/strong> Measures the maturity level of a market asset. It shifts left-to-right across four distinct evolutionary phases: <em>Genesis<\/em> (0.0), <em>Custom-Built<\/em> (0.25), <em>Product\/Rental<\/em> (0.5), and <em>Commodity\/Utility<\/em> (0.75 to 1.0).<\/li>\n<\/ul>\n<h2>Basic Syntax Structure<\/h2>\n<p>Every diagram begins with the <code>wardley-beta<\/code> declaration header. You then establish user anchors with the <code>anchor<\/code> keyword, map out operational infrastructure blocks with the <code>component<\/code> keyword, and draw relationships between them using directional arrows.<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNorTyxKyUmt1E1KLUnk5SrJLMlJVQjOzC0AUSVFiSWp6ZUKvokFvFyJeckZ+UUKzqXFJfm5qUUK0QZ6ljoKBnqmsbxcyfm5Bfl5qXklCuGpScWZJakgWXOQrAlQFq5F1w4mDwBHQyaX\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">wardley-beta\r\ntitle Simple Strategy Map\r\nanchor Customer [0.9, 0.5]\r\ncomponent Website [0.7, 0.4]\r\nCustomer -&gt; Website<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNorTyxKyUmt1E1KLUnk5SrJLMlJVQjOzC0AUSVFiSWp6ZUKvokFvFyJeckZ+UUKzqXFJfm5qUUK0QZ6ljoKBnqmsbxcyfm5Bfl5qXklCuGpScWZJakgWXOQrAlQFq5F1w4mDwBHQyaX\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p>&nbsp;<\/p>\n<p id=\"FDfuadJ\"><img fetchpriority=\"high\" decoding=\"async\" width=\"900\" height=\"600\" class=\"alignnone size-full wp-image-939 \" src=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f.png 900w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f-300x200.png 300w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f-768x512.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<h2>Syntax Reference<\/h2>\n<p>The table below breaks down the primary semantic building blocks and parameters required to structure a Wardley Map inside the Mermaid core interpreter.<\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">\n<thead>\n<tr>\n<th>Syntax Component<\/th>\n<th>Type Requirement<\/th>\n<th>Description &amp; Usage Rules<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Declaration<\/strong><\/td>\n<td>Keyword Identifier<\/td>\n<td>Initializes the strategic grid mapping canvas. Must use the exact <code>wardley-beta<\/code> block string.<\/td>\n<\/tr>\n<tr>\n<td><strong>Title<\/strong><\/td>\n<td>Plain\/Quoted String<\/td>\n<td>An optional heading printed centered at the very top of the diagram grid workspace.<\/td>\n<\/tr>\n<tr>\n<td><strong>Size Bounds<\/strong><\/td>\n<td>Bracketed Pixels<\/td>\n<td>An optional custom parameter used to override the default canvas width and height layout grid: <code>size [1200, 700]<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Anchor Node<\/strong><\/td>\n<td>Keyword + Labels<\/td>\n<td>Establishes the core user or buyer at the top of your value chain matrix. Requires coordinate bounds: <code>anchor Buyer [Y, X]<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Component Node<\/strong><\/td>\n<td>Keyword + Labels<\/td>\n<td>Declares an independent technical feature or asset block. Requires exact position bounds: <code>component Core API [Y, X]<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Link Paths<\/strong><\/td>\n<td>Connection Operator<\/td>\n<td>Draws direct, structured dependencies downward or horizontally through nodes via the <code>-&gt;<\/code> syntax rule.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Strategic Action Markers (Build, Buy, Outsource, Market)<\/h2>\n<p>To explicitly document strategic execution plans, Mermaid.js permits appending action wrappers to individual components. These actions place distinct shapes onto the coordinate node to convey architectural choices instantly:<\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"5\">\n<thead>\n<tr>\n<th>Action Modifier<\/th>\n<th>Rendered Shape Icon<\/th>\n<th>Strategic Intent Mapping<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>(build)<\/code><\/td>\n<td>Triangle Marker<\/td>\n<td>Component is unique, high-risk, or crafted internally for competitive differentiation.<\/td>\n<\/tr>\n<tr>\n<td><code>(buy)<\/code><\/td>\n<td>Diamond Marker<\/td>\n<td>Component is sourced or licensed from a third-party product vendor.<\/td>\n<\/tr>\n<tr>\n<td><code>(outsource)<\/code><\/td>\n<td>Square Marker<\/td>\n<td>Component management is delegated fully to an external vendor pool.<\/td>\n<\/tr>\n<tr>\n<td><code>(market)<\/code><\/td>\n<td>Circle Marker<\/td>\n<td>Component is a widely available utility or public commodity.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Syntax Implementation Example:<\/h3>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNorTyxKyUmt1E1KLUnk5UrOzy3Iz0vNK1FwLi0uyc9VCPVUiDbQszDQUTDQMzaIVdBIKs3MSdFEVhmQWJkLpovyk1OLi\/OLQDpMTEE6zEzBOio1AcVoIG4=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">wardley-beta\r\ncomponent Custom UI [0.80, 0.30] (build)\r\ncomponent Payment Processor [0.45, 0.65] (buy)<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNorTyxKyUmt1E1KLUnk5UrOzy3Iz0vNK1FwLi0uyc9VCPVUiDbQszDQUTDQMzaIVdBIKs3MSdFEVhmQWJkLpovyk1OLi\/OLQDpMTEE6zEzBOio1AcVoIG4=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"AARxkUc\"><img decoding=\"async\" width=\"900\" height=\"600\" class=\"alignnone size-full wp-image-940 \" src=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de30a2df5f.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de30a2df5f.png 900w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de30a2df5f-300x200.png 300w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de30a2df5f-768x512.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<hr \/>\n<h2>Real-World Blueprint: Artisan Coffee Shop Value Chain<\/h2>\n<p>This comprehensive blueprint tracks an expanding storefront business model. It outlines a full map architecture\u2014configuring a larger custom size bound, establishing business anchors, setting specialized build\/buy markers, and charting dependency links across axes phases.<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNp1kEFrwkAQhe8L+x8GQaigEsEoXgo2te3BomChB\/Gwbia6mOyG3Q2S\/vpOohWt8bIMy3vzzXtHYeMUy94WveDMK58itCKRILwUTml0DlbeCo+7Ej5F3uLMqR+E9WAQBF0YhcGGM87abYiMvfJMtdwb6zgT9QBvthqUQ1gcNVpYB\/1J2IWgH4abi2imY4gK5012VgSVYhT+IRY50iXKaJESLsuNRu1hLkqsSPLys8pRKpH6klRJgljtGte0YbiBp22h0rhzbVgaRa9JYCUo\/hfaTFUMso1OJwS1rbwxTQs6lIqJ4cN4+KapPnpYg8YVKBP2gP7GNEtReqskbX+3Kiby8WQb1LZJBTKFd6awEjvn3K+Yo45RSwq0F0rDXOmD0jtYCr+n5De99Z7v8nP2v34SNWfm7K480jZE5exBaSRvDMlZU2GP1L+nONVX\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code data-language=\"mermaid\" class=\"language-mermaid\">wardley-beta\r\ntitle \"Cafe Business Strategy Map\"\r\nsize [1100, 650]\r\n\r\n%% Core Business Anchors\r\nanchor Franchise Owner [0.95, 0.55]\r\nanchor End Customer [0.90, 0.65]\r\n\r\n%% Operational Component Layers\r\ncomponent Specialty Coffee [0.75, 0.45] (build)\r\ncomponent Point of Sale Terminal [0.60, 0.60] (buy)\r\ncomponent Automated Hot Water [0.45, 0.75] (market)\r\ncomponent Electrical Grid Power [0.15, 0.90] (outsource)\r\n\r\n%% Dependency Chain Linking Paths\r\nEnd Customer -&gt; Specialty Coffee\r\nFranchise Owner -&gt; Point of Sale Terminal\r\nSpecialty Coffee -&gt; Automated Hot Water\r\nPoint of Sale Terminal -&gt; Electrical Grid Power\r\nAutomated Hot Water -&gt; Electrical Grid Power<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#mermaid:eNp1kEFrwkAQhe8L+x8GQaigEsEoXgo2te3BomChB\/Gwbia6mOyG3Q2S\/vpOohWt8bIMy3vzzXtHYeMUy94WveDMK58itCKRILwUTml0DlbeCo+7Ej5F3uLMqR+E9WAQBF0YhcGGM87abYiMvfJMtdwb6zgT9QBvthqUQ1gcNVpYB\/1J2IWgH4abi2imY4gK5012VgSVYhT+IRY50iXKaJESLsuNRu1hLkqsSPLys8pRKpH6klRJgljtGte0YbiBp22h0rhzbVgaRa9JYCUo\/hfaTFUMso1OJwS1rbwxTQs6lIqJ4cN4+KapPnpYg8YVKBP2gP7GNEtReqskbX+3Kiby8WQb1LZJBTKFd6awEjvn3K+Yo45RSwq0F0rDXOmD0jtYCr+n5De99Z7v8nP2v34SNWfm7K480jZE5exBaSRvDMlZU2GP1L+nONVX\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"IqhvEpm\"><img decoding=\"async\" width=\"1100\" height=\"650\" class=\"alignnone size-full wp-image-941 \" src=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de320944ae.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de320944ae.png 1100w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de320944ae-300x177.png 300w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de320944ae-1024x605.png 1024w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de320944ae-768x454.png 768w\" sizes=\"(max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<hr \/>\n<p><em><strong>Syntax Tip:<\/strong> When declaring coordinate arrays, remember that the vertical Y-axis value (Visibility) comes *first*, and the horizontal X-axis value (Evolution) comes *second* <code>[Visibility, Evolution]<\/code>. Reversing these positions is the single most common cause of components grouping incorrectly along the bottom edge of your map canvas.<\/em><\/p>\n<hr \/>\n<h2>Common Syntax Pitfalls &amp; System Constraints<\/h2>\n<p>When compiling value chain spaces, keep these three layout boundaries in mind to ensure your text renders cleanly:<\/p>\n<ul>\n<li><strong>Strict Coordinate Ranges:<\/strong> Positions must sit precisely inside decimal brackets between <code>0.0<\/code> and <code>1.0<\/code>. Using absolute integer pixels (like <code>[400, 200]<\/code>) instead of layout ratios inside node arguments will trigger a system execution error.<\/li>\n<li><strong>Declaration Order for Links:<\/strong> For clean layout rendering, ensure all your <code>anchor<\/code> and <code>component<\/code> labels are declared and assigned coordinates *before* writing any node relationship lines (<code>A -&gt; B<\/code>). Linking to an undeclared label can break map axis positioning.<\/li>\n<li><strong>Label Space Enclosures:<\/strong> If a component name contains spaces, symbols, or commas, make sure it is written accurately. Reusing mismatched string names inside connection paths will create an entirely new, unpositioned node on the grid canvas.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A Wardley Map is a powerful framework used for business strategy to visualize value chains and map out component evolution. Introduced as a native feature in Mermaid v11.14.0+, the wardley-beta engine allows strategy teams, architects, and product managers to map&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":48,"menu_order":18,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-937","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Wardley Map Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Design strategic value chains and business landscapes with Mermaid Wardley maps in VPasCode, a diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Wardley Map Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Design strategic value chains and business landscapes with Mermaid Wardley maps in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:35:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/\",\"name\":\"Mermaid Wardley Map Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/07\\\/img_6a4de2fd2de7f.png\",\"datePublished\":\"2026-07-08T05:34:20+00:00\",\"dateModified\":\"2026-07-29T08:35:41+00:00\",\"description\":\"Design strategic value chains and business landscapes with Mermaid Wardley maps in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/07\\\/img_6a4de2fd2de7f.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/07\\\/img_6a4de2fd2de7f.png\",\"width\":900,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-wardley-map-syntax-strategy-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mermaid.js Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Mermaid.js Wardley Map Syntax &#038; Strategy Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Wardley Map Syntax | VPasCode Text to Diagram Guide","description":"Design strategic value chains and business landscapes with Mermaid Wardley maps in VPasCode, a diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/","og_locale":"de_DE","og_type":"article","og_title":"Mermaid Wardley Map Syntax | VPasCode Text to Diagram Guide","og_description":"Design strategic value chains and business landscapes with Mermaid Wardley maps in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:35:41+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/","url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/","name":"Mermaid Wardley Map Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f.png","datePublished":"2026-07-08T05:34:20+00:00","dateModified":"2026-07-29T08:35:41+00:00","description":"Design strategic value chains and business landscapes with Mermaid Wardley maps in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a4de2fd2de7f.png","width":900,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-wardley-map-syntax-strategy-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Mermaid.js Playbook","item":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/mermaid-js-playbook\/"},{"@type":"ListItem","position":4,"name":"Mermaid.js Wardley Map Syntax &#038; Strategy Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/48"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=937"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}