Mermaid 圖表編輯器
免費線上 Mermaid 圖表編輯器。用文字語法快速建立流程圖、時序圖、甘特圖、圓餅圖等 9 種圖表，即時渲染、縮放預覽，一鍵匯出 SVG 或 PNG，完全在瀏覽器本地執行。
Mermaid 是什麼？
Mermaid 是一種開源的圖表描述語言，類似 Markdown，用純文字描述節點和連線，渲染器會自動把文字繪製成圖表，廣泛用於文件、Wiki 和程式碼儲存庫。
支援哪些圖表類型？
編輯器內建流程圖、時序圖、類圖、狀態圖、ER 圖、甘特圖、圓餅圖、心智圖和時間線 9 種範例。Mermaid 11 還支援更多類型，可以手動輸入語法建立。
怎麼建立圖表？
從下拉選單選擇範例，或在左側編輯器直接撰寫 Mermaid 程式碼。停止輸入約 350 毫秒後預覽自動重新渲染；語法有誤時會出現紅色面板顯示具體錯誤，舊圖表保持不變。
我的圖表程式碼會被傳送到別處嗎？
不會。所有渲染都在瀏覽器本地以 JavaScript 完成，圖表程式碼不會離開您的裝置。
如何匯出圖表？
「下載 SVG」得到可無損縮放的向量檔；「下載 PNG」輸出 2 倍解析度點陣圖，還可勾選透明背景；「複製程式碼」把 Mermaid 原始碼複製到剪貼簿。
為什麼 PNG 匯出有時會失敗？
部分 Mermaid 功能透過 foreignObject 渲染，瀏覽器可能拒絕把它點陣化到畫布上。此時 PNG 匯出會提示錯誤，但 SVG 下載不受影響，始終可用。
縮放是怎麼運作的？
預覽支援 0.5x 到 2x 縮放：+/- 按鈕每次以 10% 步進，「適配」自動把圖表縮放到預覽區大小，「100%」恢復原始尺寸。
可以在自己的文件中使用 Mermaid 嗎？
可以。GitHub、GitLab 以及許多文件工具原生支援 Mermaid 程式碼區塊——把程式碼放進 mermaid 圍欄程式碼區塊，頁面就會自動渲染成圖表。
編輯器支援深色模式嗎？
支援。圖表會跟隨平台主題：介面切換到深色模式時，圖表自動以 Mermaid 的 dark 主題重新渲染。
有什麼讓圖表更易讀的技巧？
節點文字盡量簡短；根據內容選擇方向（TD 由上至下、LR 由左至右）；很大的圖拆成多個子圖；每種圖類型先用內建範例當模板再修改。
如何使用Mermaid 圖表編輯器
Mermaid 用純文字語法畫圖，一段縮排清楚的程式碼就能產生流程圖、時序圖、甘特圖等。本編輯器在你輸入的同時即時渲染，所有運算都在瀏覽器本機完成。
- 先從「範例」下拉選單挑一個起點——內建流程圖、時序圖、類圖、狀態圖、ER 圖、甘特圖、圓餅圖、心智圖、時間線 9 種範例，選取後即把對應程式碼載入編輯器。
- 在左側程式碼面板修改 Mermaid 程式碼，右側預覽會在停止輸入約三分之一秒後自動重新渲染；出現語法錯誤時紅色面板會給出提示，同時保留最後一次渲染成功的圖，方便對照修改。
- 用加號和減號按鈕在 50%–200% 之間縮放，按「適配」讓圖表自動填滿預覽區，按「100%」恢復原始大小。
- 需要透明底圖時勾選「透明背景」，再按「下載 SVG」或「下載 PNG」——PNG 以兩倍解析度匯出，嵌入文件放大後依然清晰。
- 按「複製程式碼」把 Mermaid 原始碼放進剪貼簿，方便貼到文件、Wiki 或程式碼儲存庫。
圖渲染不出來時，優先把最近改動的幾行註解掉來定位問題——錯誤訊息會指出出錯的行，預覽區也會一直保留上一個可用版本，直到語法恢復正確。
相關工具
- 程式碼轉圖片 將程式碼片段轉換為精美的可分享圖片，支援語法高亮、自訂主題和視窗裝飾。100%隱私保護，完全在瀏覽器本機執行。
- Markdown 預覽器 免費線上 Markdown 編輯器，支援即時預覽。編寫、渲染和匯出 Markdown，完整支援 GFM 表格、程式碼區塊和任務清單。
- SVG 檢視器 線上預覽、編輯和最佳化 SVG 檔案。支援即時預覽、程式碼編輯和最佳化工具。
- JSON樹狀檢視器 將JSON資料視覺化為可摺疊的互動式樹狀結構。支援搜尋鍵名和值、懸停檢視JSONPath、延遲載入處理大檔案，以及拖曳載入.json檔案。
- 檔案雜湊校驗 本地計算校驗MD5、SHA-1、SHA-256、SHA-512檔案雜湊值
- Chmod 計算器 免費線上chmod計算器，透過核取方塊視覺化Linux檔案權限並計算chmod值。即時轉換數字(755, 644)和符號(rwxr-xr-x)表示法，支援setuid、setgid、sticky bit等特殊權限。
- ASCII碼表 完整的ASCII字元編碼參考表，包含十進位、十六進位、八進位、二進位編碼、HTML實體和字元描述。支援即時搜尋和篩選。
- Hex檔案檢視器 以十六進制轉儲格式檢視檔案內容，支援搜尋、偏移導航和虛擬滾動