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
    標題 影響力對努力程度矩陣
    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
    title 產品功能優先級
    x-axis "低努力" --> "高努力"
    y-axis "低影響" --> "高影響"
    quadrant-1 "長期投資"
    quadrant-2 "快速勝利"
    quadrant-3 "低優先級"
    quadrant-4 "重大計畫"
    "登入 API": [0.1, 0.9]
    "主題自訂工具": [0.8, 0.3]
    "支付網關": [0.6, 0.8]
    "暗色模式": [0.2, 0.2]

語法解析： 透過將 `[0.1, 0.9]` 分配給「登入 API」，我們將其置於左上象限（高影響、低努力），標記為「快速勝利」。這讓利益相關者能夠立即了解開發路線圖的優先順序。