輸入內容
轉換結果
等待輸入
行數: 6字符數: 108
等待輸入縮放: 100%
什麼是 Mermaid 圖表編輯器？
Mermaid 是一款基於 JavaScript 的圖表繪製工具，它使用類似 Markdown 的文字語法來產生各種圖表。無需手動拖曳圖形，只需編寫簡單的文字描述，即可自動產生精美的流程圖、時序圖、類別圖等。
本工具提供線上 Mermaid 編輯環境，支援即時預覽、拖曳縮放和匯出功能，幫助開發者快速建立和分享圖表。
使用方法
基本使用
- 在左側編輯器中輸入 Mermaid 語法
- 右側將即時渲染圖表預覽
- 使用滑鼠拖曳移動圖表，滾輪縮放
- 點擊匯出按鈕儲存為 PNG 或 SVG 格式
支援的圖表類型
流程圖graph/flowchart，展示流程和決策路徑
時序圖sequenceDiagram，展示物件間的互動時序
類別圖classDiagram，展示類別的屬性和關係
狀態圖stateDiagram，展示狀態轉換
ER 圖erDiagram，展示實體關係
甘特圖gantt，展示專案時間線
圓餅圖pie，展示資料佔比
思維導圖mindmap，展示思維結構
使用者旅程圖journey，展示使用者體驗流程
範例
流程圖
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E時序圖
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send Response類別圖
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- Cat常見問題
支援哪些圖表類型？
支援流程圖(graph/flowchart)、時序圖(sequenceDiagram)、類別圖(classDiagram)、狀態圖(stateDiagram)、ER圖(erDiagram)、甘特圖(gantt)、圓餅圖(pie)、思維導圖(mindmap)和使用者旅程圖(journey)共9種圖表類型。
如何匯出圖表？
點擊右側面板的「匯出 PNG」或「匯出 SVG」按鈕即可下載圖表。PNG 格式適合插入文件，SVG 格式適合向量編輯和列印。
圖表可以縮放和移動嗎？
可以。使用滑鼠滾輪可以縮放圖表，按住滑鼠左鍵拖曳可以移動圖表位置。雙擊預覽區域可以重置視圖到初始狀態。
資料是否會上傳到伺服器？
不會。所有 Mermaid 語法的解析和圖表渲染都在瀏覽器本地完成，資料不會離開您的裝置，完全保護隱私。