Mermaid 圖表功能

md_reader 支援在 Markdown 中使用 Mermaid 語法繪製各類圖表。

使用方式

在 Markdown 中使用 mermaid 程式碼區塊：

graph TD
    A[開始] --> B{結束}

預覽功能

使用 preview 命令在瀏覽器中預覽 Markdown 文件：

# 基本用法
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)

graph TD
    A[開始] --> B{判斷}
    B -->|是| C[執行任務]
    B -->|否| D[結束]
    C --> D

時序圖 (Sequence Diagram)

sequenceDiagram
    客戶->>+伺服器: 發送請求
    伺服器->>-客戶: 回傳資料

類圖 (Class Diagram)

classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

狀態圖 (State Diagram)

stateDiagram-v2
    [*] --> 待機
    待機 --> 工作中: 開始任務
    工作中 --> 完成: 任務結束
    完成 --> [*]

甘特圖 (Gantt Chart)

gantt
    title 專案時程
    dateFormat YYYY-MM-DD
    section 設計
    設計階段: des1, 2024-01-01, 30d
    section 開發
    開發階段: des2, after des1, 60d
    section 測試
    測試階段: des3, after des2, 20d

餅圖 (Pie Chart)

pie title 語言使用統計
    "Rust": 45
    "Python": 30
    "JavaScript": 25

關聯圖 (Entity Relationship Diagram)

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 中。

下載方式：

將滑鼠移到 Mermaid 圖表上
點擊右上角的藍色「Download SVG」按鈕

圖表會自動下載為 diagram-[timestamp].svg 檔案。

限制

Mermaid 圖表需要在瀏覽器環境中渲染
離線使用需自行配置本地 Mermaid.js
圖表會以 SVG 格式嵌入，方便向量圖形編輯

2.6 KiB Raw Blame History Unescape Escape