Mermaid Git Graph 檢視器
在瀏覽器中渲染 Mermaid gitGraph 圖表。視覺化 Git 分支策略與提交歷史。匯出為 SVG 或 PNG。
輸入 Mermaid 程式碼以預覽您的圖表
Git Graph 圖表用於視覺化軟體開發中的分支策略、合併模式和提交歷史。它們在工程團隊的文檔中非常寶貴——用於解釋 Gitflow 策略、說明功能分支工作流程，或展示 Hotfix 如何從生產環境傳播回開發環境。Mermaid 的 `gitGraph` 語法直接從文本生成這些視覺化圖表，便於嵌入 README、入職指南和運行手冊中。 當開發人員詢問「展示 Gitflow 如何運作」、「繪製 Trunk-Based 開發工作流程的分支策略圖」或「說明 Hotfix 在我們的發佈流程中如何合併」時，AI 助理經常會生成 Mermaid Git Graph。將輸出貼到 Zolkit 中即可立即渲染分支視覺化，讓工程主管在將其分發給團隊之前驗證工作流程是否準確表示。 Zolkit 的 Git Graph 檢視器支援所有 `gitGraph` 結構：提交 ID 和標籤、分支創建和簽出、合併提交、Cherry-pick，以及用於將提交標記為 HIGHLIGHT、REVERSE 或 NORMAL 的 `type` 屬性。多個分支會以不同的顏色渲染，以便立即進行視覺區分。
免費線上 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 Git Graph 中新增提交 ID 和標籤？
使用 `commit id: "提交訊息"` 為提交新增標籤，並使用 `commit id: "v1.0" tag: "v1.0.0"` 附加版本標籤。標籤會渲染為提交節點上的小徽章，使發佈點一目了然。提交 ID 也可用作 Cherry-pick 操作的參考：`cherry-pick id: "提交ID"`。
如何在 Mermaid Git Graph 中合併分支？
創建並填充分支後，簽出目標分支並使用 `merge 分支名稱`。範例：`checkout main` 然後 `merge develop`。您可以為合併提交新增 `id` 和 `tag`：`merge feature/auth id: "合併 auth" tag: "v2.0"`。Mermaid 會將合併渲染為兩個分支軌道之間的連接線。
可以更改 Git Graph 的方向嗎？
可以。在 `gitGraph` 後面新增 `LR` 可實現從左到右的佈局：`gitGraph LR:`。預設為從左到右。對於需要垂直閱讀的文檔（例如在行動裝置上渲染的 README），您可以嘗試使用 `TB`（從上到下），但 LR 是 Git 歷史視覺化的慣用方向。
gitGraph 與用於記錄 Git 工作流程的序列圖有何不同？
gitGraph 專門用於顯示分支、合併和提交歷史——它會渲染開發人員從 GitKraken 或 GitHub 的網路圖等工具中識別出的熟悉的平行分支軌道。相比之下，序列圖顯示參與者隨時間的互動，但不傳達分支結構。在記錄 Git 工作流程或發佈流程時，gitGraph 始終是正確的選擇。