Mermaid.js 時間軸語法指南

什麼是時間軸圖表？

一個時間軸圖表是一種用於沿線性時間路徑映射事件或專案里程碑的時間順序可視化工具。雖然甘特圖處理複雜的任務依賴關係和持續時間，但時間軸圖表專注於何時——提供專案演進或系統發行週期的清晰、易於掃描的敘述。

使用Mermaid.js，您可以使用簡單的層次化文字格式來定義您的時間軸。引擎會自動處理間距、日期或期間標籤的格式化，以及事件標記沿中央時間軸的對齊。

核心語法指南

要設計一個有效且可執行的時間軸，您必須定義軸的期間，並將事件對應到特定的區段。

1. 初始化時間軸

您可使用timeline關鍵字來初始化畫布。結構是透過定義區段（作為分組）並將事件（或日期）對應到這些區段來建立的。

timeline
    title 系統開發歷史
    section 2025
        Q1 : Alpha 發布
    section 2026
        Q2 : Beta 發布

2. 為事件添加細節

您可以使用冒號分隔的清單，為單一時間標記添加多個細節。這對於總結與特定日期或期間相關的關鍵成果或版本號碼非常有用。

timeline
    section Q3 2026
        Release : v1.0.0
                : 性能改進
                : 安全修補

現實世界中的 Mermaid.js 時間圖表示例：產品發行路線圖

此藍圖模擬了多年產品路線圖，按財政年度分組發行，並突出顯示每個週期的關鍵交付成果。

時間軸
    標題 2026-2027 年產品路線圖
    節 2026
        Q1 : 探索階段
           : 利益相關者訪談
        Q2 : MVP 開發
           : 核心 API 設計
        Q3 : 公測發布
           : 使用者反饋迴圈
    節 2027
        Q1 : 正式推出
           : 全球擴展

時間軸的最佳實務

• 保持分類簡潔： 使用 節 用來標示高階分組（例如年份或主要階段），並保持其下的實際事件具體且可執行。
• 日期格式一致： 確保您的時間軸事件在程式碼中按時間順序排列，因為 Mermaid 引擎會根據您的腳本順序來決定佈局位置。
• 使用細節提供背景： 不要在中央軸上堆疊太多文字。使用多行事件格式來分解「發生了什麼」，而不是讓日期標籤本身過長。