Wardley 地图是一种强大的框架,用于商业战略,以可视化价值链并绘制组件的演化路径。自 Mermaid v11.14.0+ 起作为原生功能引入,wardley-beta引擎允许战略团队、架构师和产品经理使用纯文本绘制市场环境。通过在二维坐标空间中定位技术组件,团队可以直观分析价值链依赖关系,发现市场惯性,并做出结构化的自建与采购决策。
理解坐标网格系统
与标准的自由形式流程图不同,Wardley 地图中的每个组件都基于两个小数坐标,绘制在严格的二维空间中,坐标范围从0.0到1.0:
- 可见性(Y轴 / 第一个坐标):衡量一个组件对最终用户而言的可见性或价值程度。值为
1.0表示直接面向用户的接触点(可见性最高),而0.0则表示隐藏的基础架构。 - 演化(X轴 / 第二个坐标):衡量市场资产的成熟度水平。它从左到右跨越四个不同的演化阶段:起源 (0.0), 定制构建 (0.25), 产品/租赁(0.5),以及商品/公用设施(0.75 到 1.0)。
基本语法结构
每个图表都以wardley-beta声明头开始。然后通过锚点关键字,用该关键字绘制运营基础设施模块组件关键字,并使用方向箭头绘制它们之间的关系。
Mermaid
Edit Mermaid in VPasCode
wardley-beta
title 简单战略地图
anchor 客户 [0.9, 0.5]
component 网站 [0.7, 0.4]
客户 -> 网站

语法参考
下表分解了在 Mermaid 核心解释器内构建沃德利地图所需的主要语义构建块和参数。
| 语法组件 | 类型要求 | 描述与使用规则 |
|---|---|---|
| 声明 | 关键字标识符 | 初始化战略网格映射画布。必须使用确切的wardley-beta块字符串。 |
| 标题 | 普通/引号字符串 | 一个可选的标题,居中打印在图表网格工作区的最顶端。 |
| 尺寸范围 | 方括号内的像素 | 一个可选的自定义参数,用于覆盖默认画布宽度和高度布局网格:size [1200, 700]. |
| 锚点节点 | 关键字 + 标签 | 在你的价值链矩阵顶部建立核心用户或买家。需要坐标范围:anchor 买家 [Y, X]. |
| 组件节点 | 关键字 + 标签 | 声明一个独立的技术特性或资产块。需要精确的位置边界:component 核心API [Y, X]. |
| 链接路径 | 连接操作符 | 通过以下语法规则,绘制直接的、结构化的依赖关系,向下或水平穿过节点:-> 语法规则。 |
战略行动标记(构建、购买、外包、市场)
为了明确记录战略执行计划,Mermaid.js 允许将操作包装器附加到单个组件上。这些操作会在坐标节点上放置不同的形状,以即时传达架构选择:
| 操作修饰符 | 渲染的形状图标 | 战略意图映射 |
|---|---|---|
(构建) |
三角形标记 | 该组件具有独特性、高风险,或为竞争差异化而内部构建。 |
(购买) |
菱形标记 | 该组件来自第三方产品供应商或通过许可获得。 |
(外包) |
方形标记 | 组件管理完全委托给外部供应商池。 |
(市场) |
圆形标记 | 该组件是一种广泛可用的工具或公共商品。 |
语法实现示例:
Mermaid
Edit Mermaid in VPasCode
wardley-beta
组件 自定义UI [0.80, 0.30] (构建)
组件 支付处理器 [0.45, 0.65] (购买) 
现实世界蓝图:手工艺咖啡店价值链
这个全面的蓝图追踪了一个不断扩展的店面商业模式。它描绘了完整的地图架构——配置更大的自定义尺寸边界,确立业务锚点,设置专门的构建/购买标记,并在各轴阶段之间绘制依赖关系链。
Mermaid
Edit Mermaid in VPasCode
wardley-beta
title "咖啡店商业战略地图"
size [1100, 650]
%% 核心业务锚点
锚点 特许经营业主 [0.95, 0.55]
锚点 终端客户 [0.90, 0.65]
%% 运营组件层级
组件 特色咖啡 [0.75, 0.45] (构建)
组件 销售点终端 [0.60, 0.60] (购买)
组件 自动热水系统 [0.45, 0.75] (市场)
组件 电网供电 [0.15, 0.90] (外包)
%% 依赖链连接路径
终端客户 -> 特色咖啡
特许经营业主 -> 销售点终端
特色咖啡 -> 自动热水系统
销售点终端 -> 电网供电
自动热水系统 -> 电网供电 
语法提示: 在声明坐标数组时,请记住垂直的Y轴值(可见性)在前,水平的X轴值(演化)在后[可见性, 演化]。颠倒这两个位置是导致组件在地图画布底部边缘错误分组的最常见原因。
常见的语法陷阱与系统限制
在编译价值链空间时,请牢记以下三个布局边界,以确保您的文本清晰渲染:
- 严格的坐标范围: 坐标必须精确位于小数括号之间的
0.0和1.0。使用绝对整数像素(例如[400, 200])而不是在节点参数中使用布局比例,将触发系统执行错误。 - 链接声明顺序: 为了获得清晰的布局渲染,请确保您所有的
锚点和组件标签在编写任何节点关系行(A -> B).链接到未声明的标签可能会破坏地图轴的位置。 - 标签空格封闭: 如果组件名称包含空格、符号或逗号,请确保准确书写。在连接路径中重复使用不匹配的字符串名称将在网格画布上创建一个全新的、未定位的节点。