# 以 NanoMD 渲染

自 v1.2.2 起，瀏覽器儀表板以 [NanoMD](https://nanomd.pardn.io) 渲染 agent 回覆與 Markdown 檔，圖表、流程圖與數學公式直接顯示為圖，不再是原始碼。

## 可渲染的內容

| Markdown | 結果 |
| --- | --- |
| ```` ```chartjs ````，內容為 `{"type": ..., "data": {...}}` | 圖表：bar、line、pie、doughnut、radar、polarArea、scatter、bubble |
| ```` ```mermaid ```` | 圖：flowchart、sequenceDiagram、stateDiagram-v2、classDiagram、erDiagram、gantt、timeline |
| ```` ```math ```` 或行內 `$...$` | KaTeX 數學公式 |
| 其他程式碼區塊 | 語法高亮，附複製按鈕 |
| GFM 表格、待辦清單、註腳、`==highlight==`、`> [!NOTE]` 提示框 | 套用樣式的 Markdown |

無法解析的區塊（JSON 錯誤、不支援的圖表類型、Mermaid 語法錯誤）改顯示原始碼。本頁同樣由 NanoMD 渲染：

```chartjs
{"type": "bar", "data": {"labels": ["Q1", "Q2", "Q3", "Q4"], "datasets": [{"label": "Requests (k)", "data": [12, 19, 15, 24]}]}}
```

```mermaid
sequenceDiagram
    Browser->>Daemon: POST /v1/send
    Daemon->>Model: prompt + tools
    Model-->>Daemon: Markdown reply
    Daemon-->>Browser: SSE stream
```

```math
A = P\left(1 + \frac{r}{n}\right)^{nt}
```

## 渲染的位置

| 介面 | 行為 |
| --- | --- |
| Web 對話回覆與推理區塊（`chat-` session） | 串流時即渲染；較早訊息中的圖在捲入畫面時才渲染 |
| 回覆中的 `.md`、`.markdown`、`.txt` 檔案連結 | 在側邊面板開啟並以 NanoMD 渲染；本機圖片經 `/v1/file/open` 載入 |
| TUI、Telegram、Discord | 顯示 Markdown 原始碼 |

## Agent 如何運用

System prompt 會告訴 agent 圖表在哪裡能渲染。`chat-` session 中，對話回覆與 `.md` 檔都會附圖；其他 session 只放在 `.md` 檔，因為這些對話介面只會顯示原始區塊。內容含 3 個以上項目或時間點的數字、流程或公式時，agent 會主動在對應的表格或文字旁附上圖表、流程圖或公式，不需使用者要求；只重述單一數字或兩項比較時則不附圖。

## 關於 NanoMD

NanoMD 是 TypeScript 撰寫的 Markdown parser，將 Markdown 轉為經過消毒的 HTML 與 JSON AST，頁面用到時才載入 Mermaid、KaTeX 與 Chart.js。Agenvoy 在 `page/vendor.json` 固定 parser 與樣式表版本（v1.2.2 為 2.0.10），daemon 下載一次到 `~/.config/agenvoy/vendor/nanomd/` 後由本機提供，離線也能渲染。語法參考與線上試用：[nanomd.pardn.io](https://nanomd.pardn.io)。

另見：[瀏覽器儀表板](/zh/docs/getting-started-browser)。