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 文档和代码片段的场景。
