# 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 格式嵌入，方便向量圖形編輯