commit 685318e73b31fc14a202e1b82b0116e3def49b86
Author: Warren Lo <warren@accusys.com.tw>
Date:   Wed Mar 18 21:31:50 2026 +0800

    Add Mermaid documentation

diff --git a/docs/mermaid.md b/docs/mermaid.md
new file mode 100644
index 0000000..c8e473e
--- /dev/null
+++ b/docs/mermaid.md
@@ -0,0 +1,137 @@
+# Mermaid 圖表功能
+
+md_reader 支援在 Markdown 中使用 Mermaid 語法繪製各類圖表。
+
+## 使用方式
+
+在 Markdown 中使用 `mermaid` 程式碼區塊：
+
+```mermaid
+graph TD
+    A[開始] --> B{結束}
+```
+
+## 預覽功能
+
+使用 `preview` 命令在瀏覽器中預覽 Markdown 文件：
+
+```bash
+# 基本用法
+md_reader preview docs/mermaid.md
+
+# 自訂標題和視窗大小
+md_reader preview docs/mermaid.md --title "My Document" -w 1200
+```
+
+> 注意: 視窗大小參數 (-w, -e) 目前用於說明用途，實際大小由瀏覽器視窗決定。
+
+命令列選項：
+- `file`: 要預覽的 Markdown 文件路徑
+- `-t, --title`: 視窗標題（預設：檔案名稱）
+- `-w, --width`: 視窗寬度（預設：900）
+- `-h, --height`: 視窗高度（預設：700）
+
+## 支援的圖表類型
+
+### 流程圖 (Flowchart)
+
+```mermaid
+graph TD
+    A[開始] --> B{判斷}
+    B -->|是| C[執行任務]
+    B -->|否| D[結束]
+    C --> D
+```
+
+### 時序圖 (Sequence Diagram)
+
+```mermaid
+sequenceDiagram
+    客戶->>+伺服器: 發送請求
+    伺服器->>-客戶: 回傳資料
+```
+
+### 類圖 (Class Diagram)
+
+```mermaid
+classDiagram
+    class Animal {
+        +String name
+        +makeSound()
+    }
+    class Dog {
+        +bark()
+    }
+    Animal <|-- Dog
+```
+
+### 狀態圖 (State Diagram)
+
+```mermaid
+stateDiagram-v2
+    [*] --> 待機
+    待機 --> 工作中: 開始任務
+    工作中 --> 完成: 任務結束
+    完成 --> [*]
+```
+
+### 甘特圖 (Gantt Chart)
+
+```mermaid
+gantt
+    title 專案時程
+    dateFormat YYYY-MM-DD
+    section 設計
+    設計階段: des1, 2024-01-01, 30d
+    section 開發
+    開發階段: des2, after des1, 60d
+    section 測試
+    測試階段: des3, after des2, 20d
+```
+
+### 餅圖 (Pie Chart)
+
+```mermaid
+pie title 語言使用統計
+    "Rust": 45
+    "Python": 30
+    "JavaScript": 25
+```
+
+### 關聯圖 (Entity Relationship Diagram)
+
+```mermaid
+erDiagram
+    USER ||--o{ ORDER : places
+    USER {
+        int id PK
+        string name
+        string email
+    }
+    ORDER ||--|{ ITEM : contains
+    ORDER {
+        int id PK
+        int user_id FK
+        date created
+    }
+```
+
+## 輸出範例
+
+渲染後的 HTML 會自動載入 Mermaid.js，並在瀏覽器中呈現互動式圖表。
+
+## SVG 匯出功能
+
+Mermaid 圖表會自動渲染為 SVG 並嵌入 HTML 中。
+
+**下載方式：**
+1. 將滑鼠移到 Mermaid 圖表上
+2. 點擊右上角的藍色「Download SVG」按鈕
+
+圖表會自動下載為 `diagram-[timestamp].svg` 檔案。
+
+## 限制
+
+- Mermaid 圖表需要在瀏覽器環境中渲染
+- 離線使用需自行配置本地 Mermaid.js
+- 圖表會以 SVG 格式嵌入，方便向量圖形編輯