前言¶
DeepSeek Harness（DSH）在對話中輸出大量結構化信息時，常規 Markdown 往往只能以純文本呈現。對於流程、層級、對比等內容，缺少直觀的圖形表達；對於需要練習的場景，只能靠模型逐題生成，無法實時判分。
dsh-chat-figure 插件在 DSH Web 對話中直接渲染三種代碼塊：%%figure 圖解、%%tree 樹形結構、%%quiz 選擇題。圖形是真實 HTML，可選中、可縮放，顏色跟隨明暗主題，選擇題在本地判分，不依賴模型推理。
插件定位¶
- 名稱：dsh-chat-figure
- 維護者：Wh1stle05
- 平臺：DSH Web
- 版本：0.2.0
- 許可證：MIT
插件通過在代碼塊第一行指定哨兵（%%figure / %%tree / %%quiz），將對應內容渲染爲交互式組件，零依賴、離線運行。
核心功能¶
| 塊類型 | 用途 | 產出 |
| — | — |
| %%figure | 流程、結構、對比 | 盒子、箭頭、註釋、標籤、圖注 |
| %%tree | 進程樹、目錄樹、調用層級 | 縮進即層級，父節點加粗、葉子變淡 |
| %%quiz | 隨堂測驗 | 單選、提交判分、解析、進度、成績頁 |
圖解塊 %%figure¶
支持標題、副標題、箭頭、多行並列盒子、註釋、膠囊標籤和圖注。色板爲 gray、blue、green、amber、plain，顏色從 currentColor 派生，跟隨主題變化。
示例：
```figure
%%figure
title: fork() 之後：一分爲二
sub: 父子各有獨立 PID，內存先共享同一批物理頁
arrow: fork()
row
box gray: 父進程 Bash | PID 1000 · fork() 返回 1001
box blue: 子進程 Bash（副本） | PID 1001 · fork() 返回 0
note: 返回值不同，同一份代碼因此走向不同分支
pills: Copy-on-Write, PID, 地址空間
foot: 複製的是“進程狀態”，不是磁盤上的程序。
字段說明：
- `title:` / `sub:`：居中標題 / 灰色副標題
- `arrow: 標籤` 或 `arrow`：豎向箭頭，標籤可省略
- `row`：開始一行並列盒子，後續 `box` 歸入該行
- `box [gray\|blue\|green\|amber\|plain] [wide]: 標題 \| 副標題`：盒子；`wide` 強制整行
- `note:` / `pills:` / `foot:` / `gap`：居中註釋 / 膠囊標籤 / 底部圖注 / 空隙
## 樹形塊 `%%tree`
通過縮進表示層級，節點格式爲 `標題 | 備註`，備註以灰色小字顯示。
示例：
```markdown
```tree
%%tree
systemd (PID 1)
uvicorn.service | PID 1000
Worker 1 | PID 1001
Worker 2 | PID 1002
## 測驗塊 `%%quiz`
支持標籤、問題、選項、答案、解析。單題模式下逐題提交判分，最後一題顯示成績頁，可逐題回顧、重做或複製結果。
示例：
```markdown
```quiz
%%quiz
tag: Linux 小測驗
q: Linux 中，kill -9 發送的是什麼信號？
A. SIGTERM (15)
B. SIGKILL (9)
C. SIGSTOP (19)
D. SIGINT (2)
answer: B
why: -9 就是 SIGKILL，內核直接終止，既不能捕獲也不能忽略。
字段說明：
- `q:` / `問題:`：開始一道新題
- `A.` ~ `H.`：選項
- `answer:` / `答案:`：正確項
- `why:` / `解析:`：判分後展示的解釋
- `tag:` / `title:`：卡片頂部標籤 / 標題
加 `mode: list` 可改爲一次顯示整卷。
# 安裝與啓用
插件通過 profile 的 patch 層加載，無需額外命令。
1. 鏈接 profile
```bash
ln -s /path/to/dsh-chat-figure ~/.dsh/profiles/web/node_modules/dsh-chat-figure
- 在 profile 的 patch 層追加配置
cat >> ~/.dsh/profiles/web/cordis.patch.yml <<'YAML'
- insert:
- id: chat-figure
name: 'dsh-chat-figure'
YAML
刷新頁面即生效，無需重啓 dsh web。
適用場景與注意¶
適合需要結構化圖示和練習的對話場景，例如教學、調試說明、面試準備。
注意：
- 僅支持 DSH Web，需要瀏覽器支持
color-mix()（Chrome 111+ / Safari 16.2+ / Firefox 113+） - 渲染後會隱藏原始代碼塊，只顯示圖形
- 不支持 Mermaid 語法
- 判分在瀏覽器本地完成，模型看不到作答；可用「複製結果」回傳或說明錯題
總結¶
dsh-chat-figure 在 DSH 聊天中直接渲染圖解、樹形結構與選擇題，輸出真實 HTML，可交互、可主題適配，適合需要直觀表達和即時練習的場景。
插件目錄頁：https://www.skillhub.cn/plugins/Wh1stle05/dsh-chat-figure
GitHub：https://github.com/Wh1stle05/dsh-chat-figure
