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