Mermaid 圖表編輯器

撰寫 Mermaid 程式碼，即時檢視流程圖、循序圖等，匯出 SVG 或 PNG

範例

主題

Mermaid 程式碼

預覽正在載入 Mermaid…

背景

PNG 尺寸

如何使用Mermaid 圖表編輯器

撰寫 Mermaid 程式碼，邊寫邊看圖：流程圖、循序圖、類別圖、狀態圖、ER 圖、甘特圖、圓餅圖、心智圖、時間軸與 Git 圖。預覽可縮放、拖曳，能匯出 SVG 或最高 4 倍尺寸的 PNG，繪製全在瀏覽器內完成。

在編輯器撰寫 Mermaid 程式碼，或從「範例」挑一種圖表開始。

選擇主題：「預設」「中性」「深色」或「森林」。

在預覽區檢視：滾輪或雙指縮放，拖曳平移，也可以用「符合視窗」與「全螢幕」。

設定「背景」與「PNG 尺寸」，點 SVG 或 PNG 下載，或用「複製 SVG」「複製 PNG」複製到剪貼簿。

常見問題

不會。Mermaid 在頁面內執行，程式碼與圖表都留在瀏覽器中。程式碼會儲存在本機，下次開啟還在。

編輯器下方會顯示錯誤與行號，預覽區繼續顯示上一次成功繪製的圖。

可以。匯出 SVG 或 PNG 前把「背景」設為「透明」即可。

把「PNG 尺寸」選為 2×、3× 或 4×，旁邊會顯示實際像素尺寸。

在編輯器按 Ctrl/⌘ + S 會下載 SVG。預覽區中 + 與 − 縮放，方向鍵平移，0 回到 100%，F 符合視窗。