Mermaid.js 四象限图语法指南

什么是四象限图？

一个四象限图是一种战略可视化工具，用于根据两个连续变量（例如，努力程度与影响程度，或重要性与紧急性）将项目分类到四个不同的区域。通过将数据点放置在由X轴和Y轴划分的二维坐标平面上，你可以清晰地区分高优先级的“快速胜利”与低优先级的“干扰项”或长期的“战略投注”。

使用Mermaid.js，你可以使用一个简单的声明式块来定义你的象限、坐标轴标题和数据点位置，从而立即生成专业的决策矩阵。

核心语法指南：元素与结构

要在 Mermaid 中设计一个有效且可运行的四象限图，你必须掌握坐标系统、轴标签以及数据点的放置方法。

1. 初始化四象限画布

你可以在第一行使用quadrantChart关键字来初始化四象限图画布。然后，你定义四个象限的标签以及X轴和Y轴的标题。

quadrantChart
    标题 项目优先级矩阵
    x轴 "低努力" --> "高努力"
    y轴 "低影响" --> "高影响"
    象限-1 "战略投注"
    象限-2 "快速胜利"
    象限-3 "干扰项"
    象限-4 "重大项目"

2. 放置数据点

你通过提供其显示名称，然后是X和Y坐标（归一化在0到1之间）来向图表中添加项目。

• 0.0是轴的起点。
• 1.0是轴的终点。

quadrantChart
    标题 影响力 vs 努力度矩阵
    x轴 "低努力" --> "高努力"
    y轴 "低影响" --> "高影响"
    象限-1 "战略投注"
    象限-2 "快速胜利"
    象限-3 "干扰项"
    象限-4 "重大项目"
    "任务A": [0.2, 0.8]
    "任务B": [0.7, 0.2]

矩阵映射的最佳实践

• 归一化你的数据： 由于 Mermaid 坐标是从 0.0 到 1.0 缩放的，因此在将数据输入脚本之前，请先将原始数据值映射到此百分比范围内。
• 清晰的坐标轴标签： 始终包含描述性的坐标轴标签，明确说明 X 轴和 Y 轴所代表的内容（例如，“成本”与“投资回报率”）。没有定义坐标轴的矩阵只是一张随机散点图。
• 限制点的密度： 如果单个象限图中的点超过 15-20 个，图表将变得杂乱且难以阅读。如果数据集较大，建议将其拆分为多个主题图表。

现实世界中的 Mermaid.js 象限图示例

示例：产品功能优先级矩阵

这个功能蓝图帮助产品团队根据开发投入和潜在业务影响对功能进行分类。

quadrantChart
    标题 产品功能优先级
    x轴 "低投入" --> "高投入"
    y轴 "低影响" --> "高影响"
    象限-1 "长期投资"
    象限-2 "快速收益"
    象限-3 "低优先级"
    象限-4 "重大举措"
    "登录 API": [0.1, 0.9]
    "主题自定义工具": [0.8, 0.3]
    "支付网关": [0.6, 0.8]
    "暗黑模式": [0.2, 0.2]

语法解析： 通过将 `[0.1, 0.9]` 分配给“登录 API”，我们将其置于左上象限（高影响，低投入），标记为“快速收益”。这使利益相关者能够立即可视化开发路线图的优先级。