開發者 / 圖表
Mermaid 線上編輯器
撰寫Mermaid程式碼並隨時查看圖表：流程圖、序列圖、類別圖、甘特圖和圓餅圖，並可下載SVG和PNG。
Mermaid 線上編輯器: 這個編輯器使用Mermaid繪製圖表。Mermaid是開放原始碼函式庫，GitHub、GitLab和許多文件工具都用它來繪製以文字撰寫的圖表。編輯器會以嚴格模式執行，因此其他人的程式碼無法執行指令碼或加入點擊處理常式。SVG下載檔案在任何尺寸下都能保持清晰；PNG下載檔案會以螢幕顯示尺寸的兩倍繪製，背景為白色。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 開發者工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
全程在瀏覽器中執行
圖表會在您的瀏覽器中使用Mermaid以嚴格模式繪製，因此圖表程式碼無法執行指令碼。將相同的程式碼貼到GitHub、GitLab或Notion Markdown的mermaid程式碼區塊中，即可在這些平台顯示圖表。
以文字呈現圖表
在繪圖軟體中繪製的圖表會因為每次修改都要重新開啟檔案而逐漸過時。Mermaid圖表只是幾行文字，可以與所描述的程式碼或文件放在一起，在同一次提交中修改，並在檢閱時以易讀的差異內容呈現。
每個圖表都會先指定類型：帶有TD（由上到下）或LR（由左到右）等方向的flowchart、sequenceDiagram、classDiagram、gantt或pie。節點會連同標籤寫一次，例如A[Start]，之後再以名稱參照，例如A --> B。
匯出
SVG無論尺寸大小都能保持線條和文字清晰，較適合文件和投影片；PNG則適合聊天應用程式和不接受SVG的地方。若要手動編輯匯出的SVG，請在SVG編輯器中開啟。
使用方式
- 從範例開始，或貼上自己的Mermaid程式碼。
- 編輯程式碼；圖表會隨著輸入即時重新繪製，或顯示錯誤訊息。
- 將圖表下載為SVG或PNG，或複製程式碼。
隱私與限制
圖表會在您的瀏覽器中繪製，程式碼只會保存在這個瀏覽器中，因此下次使用時仍會保留。
相關工具
常見問題
Mermaid是什麼？
Mermaid是一種以文字撰寫圖表的方式。例如，像A --> B這樣的一行程式碼會繪製兩個以箭頭連接的方框，讓圖表可以放在Markdown檔案和程式碼審查中，並透過編輯文字而不是繪圖工具來變更。
如何在GitHub上顯示圖表？
在Markdown檔案、議題或提取要求中，將程式碼放進標記為mermaid的圍欄程式碼區塊：先輸入三個反引號，接著輸入mermaid這個詞和程式碼，最後再輸入三個反引號。GitHub、GitLab和Notion會直接在原處繪製圖表。
為什麼我的圖表顯示錯誤？
錯誤訊息會指出Mermaid無法讀取的那一行。常見原因包括第一行缺少圖表類型，例如flowchart TD；括號或引號沒有閉合；以及包含特殊字元、需要在外圍加上引號的文字。
支援哪些圖表類型？
支援編輯器載入的Mermaid版本中的所有類型，包括流程圖、序列圖、類別圖、狀態圖、實體關聯圖、甘特圖、圓餅圖、心智圖、時間軸和Git圖。範例涵蓋最常見的五種圖表。
免費工具・使用在瀏覽器中次・免註冊