DSH（DeepSeek Harness）的理念是「一切皆插件」。在模型推理過程中，Agent 需要生成 HTML、Mermaid 圖表或 React 組件時，現有的開源方案往往側重於全量重寫或實時預覽，缺乏對單點修改、版本回溯和持久化存儲的完善支持。dsh-plugin-canvas-pro 提供了一個 Web drawer 和八種模型工具，填補了這些空白。
插件簡介¶
這是 DeepSeek Harness 的 Canvas-Pro artifact drawer。它支持 HTML/Markdown/Mermaid/SVG/React artifacts，提供創建、修補、版本控制及導出功能。插件由 lokih1028 維護，類別爲模型推理，採用 MIT 許可證。
安裝¶
執行以下命令安裝插件：
dsh plugin --profile web add github:lokih1028/dsh-plugin-canvas-pro
安裝完成後，刷新 GUI，Web 會話頭部會出現 Canvas 按鈕。
核心功能¶
Web Drawer 與 Artifact 類型¶
插件在 Web 會話頭部提供 Canvas 按鈕，打開 Drawer 後預覽 artifacts。支持的類型包括 HTML、Markdown、Mermaid、SVG 和 React artifacts。
八個模型工具¶
插件爲 Agent 提供了以下工具：
| 工具名 | 功能 |
|---|---|
create_canvas_artifact |
創建 artifact |
update_canvas_artifact |
修補內容（支持通過選擇、行範圍或全量覆蓋） |
get_canvas_selection |
讀取最新預覽選擇的內容 |
get_canvas_artifact |
讀取當前 artifact 內容 |
list_canvas_versions |
列出版本快照 |
revert_canvas_artifact |
恢復之前的快照爲新版本 |
diff_canvas_artifact |
比較不同版本（支持 unified 或 split diff） |
export_canvas_artifact |
導出爲 markdown、html、svg、png 或 json |
文本選擇與交互¶
在預覽中選擇文本會觸發 Explain / Refactor / Fix 操作，並將操作提交到當前聊天窗口。Agent 也可以通過 get_canvas_selection 讀取選區內容。
存儲位置¶
Artifacts 持久化存儲在 $DSH_HOME/storages/canvas-pro/artifacts.json 中（前提是 $DSH_HOME 已設置）。
典型用法¶
- 創建：Agent 使用
create_canvas_artifact工具初始化一個 artifact。 - 修補：Agent 使用
update_canvas_artifact工具對特定部分進行修改，而非重寫全文。 - 版本管理：Agent 可以使用
list_canvas_versions查看歷史，使用diff_canvas_artifact對比差異，使用revert_canvas_artifact恢復舊版本。 - 交互：在預覽文本中選中內容，選擇 Explain 或 Refactor，內容會進入聊天輸入框。
- 導出：Agent 使用
export_canvas_artifact工具將 artifact 導出爲 markdown、html、svg、png 或 json。
侷限性與注意¶
- React 與 Mermaid 渲染：React artifacts 在預覽沙盒中顯示源碼，而非執行後的 React 樹；Mermaid artifacts 默認顯示源碼，除非轉換爲 HTML。
- 導出回退：PNG 導出嘗試瀏覽器光柵化，失敗時會回退到 SVG。
- 行號來源：選擇操作對應的行號來自渲染後的預覽，而非源碼行號。當兩者不一致時，優先使用
replace_selection而非replace_range。 - 環境依賴：持久化功能依賴於
$DSH_HOME環境變量的設置。
總結¶
dsh-plugin-canvas-pro 在 DSH artifact 工作流中提供了 Patch（修補）和 Versioning（版本控制）的核心能力。它將導出功能內置爲模型工具，並將文本選擇作爲 Agent 的一等輸入，適合需要在 Agent 端直接操作 UI 文檔和代碼片段的場景。
