使用步驟
- 從「插入模板」裡選一種圖表開始，或者直接貼上已有的 Mermaid 程式碼。
- 修改左側程式碼，右側會在停頓後自動重新渲染；語法有誤時下方會顯示錯誤資訊。
- 選擇主題，然後下載 SVG、PNG，或複製 SVG 程式碼。
引數說明
- 圖表型別
- 模板包括流程圖、時序圖、類圖、狀態圖、ER 圖、甘特圖、餅圖、思維導圖；Mermaid 支援的其他型別（如時間線、象限圖、Git 圖）也可以直接寫。
- 主題
- 預設、中性、深色、森林四種內建主題。中性主題接近黑白，適合列印。
- 匯出
- SVG 為向量圖，可以無損縮放；PNG 按 2 倍解析度匯出並帶底色，適合聊天軟體和 PPT。
流程圖語法速查
flowchart LR
A[矩形] --> B(圓角)
B --> C{菱形判斷}
C -->|是| D[(資料庫)]
C -.->|否| E((圓形))TD從上到下，LR從左到右-->實線箭頭，-.->虛線箭頭，==>粗箭頭，-->|文字|帶文字
常見問題
Mermaid 程式碼能直接放到 GitHub 裡嗎？
能。在 Markdown 檔案、Issue 或評論裡寫成 ```mermaid 程式碼塊，GitHub 會自動渲染成圖表。GitLab、Notion、Obsidian、Typora 等也支援。
中文會亂碼嗎？
不會，節點文字可以直接寫中文。匯出 PNG 時使用系統已安裝的字型。
程式碼會上傳嗎？
不會。Mermaid 在瀏覽器中渲染，圖表和程式碼都不離開你的裝置。
為什麼節點裡的 Markdown 格式沒有生效？
為了能匯出 PNG，這裡用 SVG 文字渲染節點標籤，不支援 HTML 標籤和部分富文字格式。
隱私說明
本工具完全在瀏覽器中執行，檔案和文字都在你的裝置上處理，不會上傳到我們的伺服器。