Mermaid 時間軸圖檢視器
在瀏覽器中渲染 Mermaid 時間軸圖。視覺化歷史事件、產品路線圖和里程碑。匯出 SVG 或 PNG。
輸入 Mermaid 程式碼以預覽您的圖表
時間軸圖以時間順序列出事件，非常適合用於產品路線圖、歷史敘事、技術演進故事和專案回顧。Mermaid 的 `timeline` 圖表類型（於 v9.4 推出）提供了一種簡潔易讀的格式，用於標記事件發生的時間，而無需像甘特圖那樣複雜。 AI 助理在被要求總結歷史發展（「顯示 JavaScript 框架的歷史」）、呈現產品演進（「繪製我們從 2020 年至今的產品里程碑」）或概述發佈路線圖（「為我們 2025 年第一季至第四季的產品計劃創建時間軸」）時，會使用 Mermaid 時間軸。將生成的程式碼貼到 Zolkit 中，即可立即渲染時間軸，讓您在將其納入簡報或文件中之前，檢查事件是否準確、標籤是否清晰且間距是否適當。 Zolkit 的時間軸檢視器支援同一時間段的多個事件（顯示為同一時間標籤下的堆疊方塊）、用於組織階段的區段分組，以及 Mermaid 時間軸的全部樣式設定。匯出的 SVG 或 PNG 適用於提案簡報、公司歷史頁面、工程師全體會議投影片和年度回顧文件。
免費線上 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
將您的 Mermaid 程式碼貼到左側的編輯器中 — 您可以從 AI 助理複製，或手動編寫。
- 2
圖表會立即在右側的預覽面板中渲染。如果出現語法錯誤，將會顯示說明問題的訊息。
- 3
點擊「匯出 SVG」或「匯出 PNG」即可下載您的圖表檔案，用於文件、簡報或分享。
常見問題
如何在 Mermaid 時間軸的同一時間段內新增多個事件？
在時間標籤下方立即縮排的行上放置其他事件，每行以 `:` 開頭。例如：`2023 : ChatGPT 發佈 GPT-4 \n : Anthropic 推出 Claude 2 \n : Google 發佈 Gemini`。每行 `: 事件` 都會渲染為一個獨立的事件方塊，堆疊在 `2023` 時間標記下方。這對於有多個重要里程碑的年份非常有用。
如何將時間軸事件分組到區段中？
在時間段組之前使用 `section 區段名稱`。區段會在時間軸中視覺化地分隔出標示的階段，例如，在年份條目之前使用 `section 開發階段`，然後在下一組中使用 `section 發佈階段`。區段會渲染為帶有顏色的背景條帶，幫助讀者瀏覽具有不同階段的長條時間軸。
Mermaid 時間軸圖和甘特圖有何區別？
Mermaid 時間軸圖最適合顯示事件發生的時間，它接受文字標籤和日期，但沒有精確的持續時間或依賴關係資訊。甘特圖更適合規劃，它顯示具有確切開始日期、持續時間和依賴關係的任務。時間軸圖用於回顧、歷史記錄和路線圖概覽；甘特圖用於衝刺規劃、資源分配和排程。
GitHub 和 GitLab 是否支援 Mermaid 時間軸圖類型？
GitHub 於 2022 年新增了原生 Mermaid 渲染功能，而 GitLab 自 2019 年以來一直支援。然而，`timeline` 圖表類型需要 Mermaid v9.4 或更高版本。如果您在 GitHub 或 GitLab 上看到時間軸的解析錯誤，該平台可能正在使用較舊版本的 Mermaid。Zolkit 始終使用最新的 Mermaid 版本，因此無論平台兼容性如何，這裡都完全支援時間軸圖。