純前端的 Mermaid 圖表即時預覽與匯出工具，無需後端，直接部署即用。
A pure frontend Mermaid diagram editor with live preview and high-res export — no backend required. You can try here : https://wanjay0337.github.io/mermaid-editor/
- 功能特色 / Features
- 快速開始 / Quick Start
- 使用說明 / Usage Guide
- 部署 / Deployment
- Mermaid 語法參考 / Syntax Reference
- 瀏覽器支援 / Browser Support
- 授權 / License
中文
- 即時渲染：輸入後 350ms 自動更新圖表
- 高解析度匯出：PNG 支援 2×、3×、4× 倍率輸出
- SVG 向量匯出：適合印刷與縮放不失真
- 全螢幕預覽：點擊圖表區或按鈕放大，ESC 關閉
- 亮色／暗色主題切換，設定自動記憶
- 中英文介面切換
- 狀態指示燈（渲染中 / 成功 / 語法錯誤）
- 一鍵複製語法
English
- Live rendering: diagram updates 350ms after you stop typing
- High-res PNG export: 2×, 3×, or 4× scale multipliers
- SVG vector export: lossless at any size, ideal for print
- Fullscreen preview: click the diagram or press the button; ESC to close
- Light / dark theme with persistent preference
- Chinese / English UI toggle
- Status indicator: loading / success / syntax error
- One-click code copy
中文
左側面板為 Mermaid 語法編輯器。輸入或貼上語法後，右側預覽會自動更新。編輯器底部的狀態列會顯示目前狀態：
| 指示燈顏色 | 狀態 |
|---|---|
| 🟢 綠色 | 渲染成功 |
| 🟡 黃色（閃爍） | 渲染中 |
| 🔴 紅色 | 語法錯誤 |
English
The left panel is the Mermaid syntax editor. The preview updates automatically after you stop typing. The status bar at the bottom shows the current state:
| Indicator color | State |
|---|---|
| 🟢 Green | Rendered successfully |
| 🟡 Yellow (blinking) | Rendering |
| 🔴 Red | Syntax error |
中文
- 點擊右側預覽區任意位置放大
- 或點擊右上角「⛶ 全螢幕」按鈕
- 按
ESC或點擊遮罩背景關閉
English
- Click anywhere in the right preview pane to zoom in
- Or click the "⛶ Fullscreen" button in the top bar
- Press
ESCor click the dark overlay to close
中文
圖表下方工具列提供兩種匯出格式：
PNG 高解析度匯出
- 在檔名欄位輸入想要的檔名（可選，預設為
mermaid_diagram） - 選擇解析度倍率：
2×：一般網頁、簡報使用3×：Retina 螢幕、高品質截圖4×：印刷、大尺寸輸出
- 點擊「下載 PNG」
SVG 向量匯出
- 點擊「SVG」按鈕
- 適合需要縮放不失真的場合（印刷、簡報設計）
- 可直接在 Illustrator、Figma、Inkscape 等工具開啟編輯
English
The toolbar below the preview offers two export formats:
PNG high-res export
- Enter a filename (optional; defaults to
mermaid_diagram) - Choose a resolution multiplier:
2×: General web use and presentations3×: Retina displays, high-quality screenshots4×: Print and large-format output
- Click "Download PNG"
SVG vector export
- Click the "SVG" button
- Ideal when you need to scale without quality loss
- Opens directly in Illustrator, Figma, Inkscape, and similar tools
中文
右上角工具列提供：
- 語言切換：中文 ↔ English（設定自動儲存於瀏覽器）
- 主題切換：亮色 ↔ 暗色（設定自動儲存於瀏覽器）
English
The top bar provides:
- Language toggle: 中文 ↔ English (saved in browser)
- Theme toggle: Light ↔ Dark (saved in browser)
中文
本工具為單一 HTML 檔，可部署至任何靜態伺服器：
Apache2
# 將 index.html 複製到網站根目錄
cp mermaid-tool.html /var/www/html/index.htmlNginx
cp mermaid-tool.html /usr/share/nginx/html/index.htmlNetlify / Vercel
直接拖曳 index.html 到部署介面即可。
English
This is a single HTML file. Deploy to any static host:
Apache2
cp mermaid-tool.html /var/www/html/index.htmlNginx
cp mermaid-tool.html /usr/share/nginx/html/index.htmlNetlify / Vercel
Drag and drop index.html onto the deploy interface.
以下為常用圖表類型範例 / Common diagram types:
流程圖 / Flowchart
graph TD
A[開始] --> B{條件判斷}
B -- 是 --> C[執行 A]
B -- 否 --> D[執行 B]
C --> E[結束]
D --> E
時序圖 / Sequence Diagram
sequenceDiagram
participant 使用者
participant 伺服器
使用者->>伺服器: 發送請求
伺服器-->>使用者: 回傳結果
甘特圖 / Gantt Chart
gantt
title 專案時程
dateFormat YYYY-MM-DD
section 開發
需求分析: 2024-01-01, 7d
設計: 2024-01-08, 7d
開發: 2024-01-15, 14d
類別圖 / Class Diagram
classDiagram
class Animal {
+String name
+makeSound()
}
class Dog {
+fetch()
}
Animal <|-- Dog
完整語法文件請參考 Mermaid 官方文件。
For full syntax documentation, see the Mermaid official docs.
| 瀏覽器 / Browser | 支援版本 / Supported Version |
|---|---|
| Chrome / Edge | 90+ |
| Firefox | 88+ |
| Safari | 14+ |
本工具使用 CDN 載入 Mermaid.js，需要網路連線。
This tool loads Mermaid.js from CDN and requires an internet connection.
本專案採用 MIT License 授權。詳見 LICENSE 檔案。
This project is licensed under the MIT License. See the LICENSE file for details.
Built with Mermaid.js · Tailwind CSS