Zolkit

Mermaid 甘特圖檢視器

立即在瀏覽器中渲染 Mermaid 甘特圖。視覺化專案時程並匯出為 SVG 或 PNG。免費，無需安裝。

預覽

輸入 Mermaid 程式碼以預覽您的圖表

甘特圖透過將任務對應到時間軸來視覺化專案時程，顯示開始日期、持續時間、相依性與里程碑。Mermaid 的 `gantt` 語法讓專案經理和工程主管能夠以純文字草擬時程表，並在任何地方渲染，無需專門的專案管理工具。 AI 助理日益廣泛地用於專案規劃 — 開發人員會提示 Claude 或 ChatGPT，例如「建立一個為期 6 週的衝刺計畫來建置使用者驗證系統」，並收到結構化的 Mermaid 甘特圖。將輸出貼到 Zolkit 中，即可在承諾使用專案管理工具之前，檢視計畫、識別時程衝突，並將其匯出以供利害關係人簡報。 Mermaid 甘特圖支援任務區段、基於日期的定位、具有 `after` 相依性的循序與平行任務、里程碑標記，以及標記為 `done`、`active` 或 `crit`（關鍵路徑）的任務。Zolkit 的檢視器會忠實地渲染所有這些結構，並將圖表匯出為 SVG，以便在簡報與文件中精確重現。

相關圖表

← Mermaid 圖表檢視器Mermaid 時間軸圖檢視器Mermaid 流程圖檢視器Mermaid 圓餅圖檢視器

免費線上 Mermaid 圖表檢視器與匯出工具

Zolkit 的 Mermaid 圖表檢視器可讓您貼上任何 Mermaid 程式碼，並立即看到渲染後的圖表 — 無需安裝、無需註冊、無需上傳伺服器。所有操作都在您的瀏覽器中進行，這是驗證 Claude、ChatGPT 或 Gemini 生成的 AI 圖表最快的方式。支援所有主要的 Mermaid 圖表類型：流程圖、時序圖、類別圖、ER 圖、甘特圖、狀態圖、心智圖、Git 圖、圓餅圖和時間軸。

即時預覽

輸入時自動渲染圖表，具有 300 毫秒的延遲，確保流暢體驗。

100% 私密

所有渲染都在您的瀏覽器中使用 mermaid.js 進行。您的程式碼絕不會傳送至任何伺服器。

匯出 SVG 與 PNG

將您的圖表下載為清晰的向量 SVG 或高解析度 2× PNG，適用於文件和簡報。

所有 Mermaid 圖表類型

支援流程圖、時序圖、類別圖、ER 圖、甘特圖、心智圖、Git 圖等。

適用於 AI 圖表

為 AI 時代而生 — 直接預覽由 Claude、ChatGPT、Gemini 或任何 LLM 生成的圖表。

永久免費

無需帳戶、無使用限制、無浮水印。Zolkit 的 Mermaid 檢視器永久免費。

如何預覽 Mermaid 圖表

  1. 1

    將您的 Mermaid 程式碼貼到左側的編輯器中 — 您可以從 AI 助理複製，或手動編寫。

  2. 2

    圖表會立即在右側的預覽面板中渲染。如果出現語法錯誤，將會顯示說明問題的訊息。

  3. 3

    點擊「匯出 SVG」或「匯出 PNG」即可下載您的圖表檔案，用於文件、簡報或分享。

常見問題

如何在 Mermaid 甘特圖中設定任務相依性？

使用 `after` 關鍵字來引用先前任務的 ID：`Frontend : b1, after a1, 10d`。任務 b1 將在任務 a1 結束後立即開始。您可以串聯多個相依性。任務 ID 在任務名稱之後、開始日期之前定義。如果未指定 ID，則無法將該任務引用為相依性。

如何在 Mermaid 甘特圖中新增里程碑？

將任務類型定義為 `milestone`，持續時間設為 `0d`：`Release : milestone, after testing, 0d`。里程碑會渲染為甘特圖時間軸上的菱形圖示，使關鍵交付點或決策點與常規任務在視覺上有所區別。它們對於標記版本發布、董事會批准或 go/no-go 檢查點非常有用。

Mermaid 甘特圖支援哪些日期格式？

最常見的格式是 `YYYY-MM-DD`（例如 `2024-03-15`），在頂部使用 `dateFormat YYYY-MM-DD` 宣告。Mermaid 也支援 `MM/DD/YYYY`、`DD-MM-YYYY` 和 Unix 時間戳。持續時間以天（`10d`）、小時（`8h`）或週（`2w`）表示。務必在任何任務日期之前宣告 `dateFormat`。

如何將任務標記為關鍵或已完成？

在任務 ID 之前新增狀態關鍵字：`crit` 將任務標記為關鍵（渲染為紅色），`done` 將其標記為已完成（渲染為填滿），`active` 將其標記為進行中。您可以組合使用：`crit, done` 表示已完成的關鍵任務。這些視覺提示使甘特圖對於狀態報告和進度檢視非常有用。