前言¶
在 DeepSeek Harness（DSH）里让模型「画图」，常见做法是输出 Markdown 代码块或写文件：内容会进对话上下文，几张 SVG 源码就足以占满窗口，模型还容易开始复述代码。DSH 生态按「一切皆插件」扩展能力；社区插件目录在独立站点维护，与 DeepSeek / 幻方无官方从属关系。下面介绍维护者 tonebean 的客户端插件 dsh-inline-visualizer（npm：dsh-inline-visualizer@2.0.2，MIT），它把内联可视化拆成两个内置工具：先加载设计契约，再就地渲染卡片，图走 UI 旁路，不进模型上下文。
这是什么¶
dsh-inline-visualizer 是 DSH 的 Inline visualizer：在对话内就地渲染 SVG 或经沙箱隔离的 HTML 卡片。纯 JavaScript，无构建步骤、无第三方运行时依赖；Host 侧使用宿主提供的 @deepseek-ai/dsh-tools，浏览器侧只从宿主模块表取 react。
适用 DSH 0.2.1-rc.5（engines.dsh: >=0.2.1-rc.5 <0.3.0）。不安装时，图只能以代码块或文件形式出现；安装后卡片直接在对话里渲染，可交互、可下载，并跟随主题。
- 目录页：https://www.skillhub.cn/plugins/tonebean/dsh-inline-visualizer
- 源码与文档：https://github.com/tonebean/dsh-inline-visualizer
核心功能¶
两个工具¶
| 工具 | 参数 | 作用 |
|---|---|---|
widget_guidelines |
modules: ('diagram'\|'chart'\|'mockup'\|'interactive'\|'art')[] |
返回设计契约（令牌、排版、间距、硬约束 + 所选模块） |
show_widget |
title, widget_code, loading_messages |
就地渲染一张卡片；工具返回值只是一句极短 ack，不含片段内容 |
widget_code 为裸 <svg …>…</svg>（首选）或一段 HTML 片段。模型可先调用 widget_guidelines 弄清配色与模块约束，再调用 show_widget 提交代码。
设计契约与主题¶
内置设计契约：8 色系 × 6 级色阶、语义令牌、排版与硬约束，按模块（diagram / chart / mockup / interactive / art）按需加载；模型不必猜配色。主题只读文档化入口 ctx.theme 与 --dsw-alias-*，切换深浅色时卡片重算配色。
两条渲染路径¶
- SVG：白名单清洗后转
data:URI，用<img>展示；矢量清晰，不执行脚本。 - HTML：
sandbox="allow-scripts"的不透明源 iframe，带default-src 'none'的 CSP；能交互但读不到宿主。
界面与元数据¶
locale/{en,zh}.json 提供 meta.title / meta.description 与运行期词条；icon.svg 随包发布。仓库 README 称含 197 项自测，启用真实 dsh-tools 的 Part C 后共 205 项。
它不做什么¶
- 不做流式逐字渲染：图在工具调用完成后一次出现。
- 不做光栅化：输出始终是矢量 SVG，不转 PNG。
- 不解析 Mermaid；不内置图表库（图表由模型手写原生 SVG）。
安装与启用¶
包已发布到 npm（dsh-inline-visualizer@2.0.2）。在 DSH 里用插件管理器安装（推荐）：
plugin_manager { action: "install_bundle", target: "dsh-inline-visualizer" }
该操作需要 danger-full-access 审批；target 传 pnpm 可识别的安装 spec——包名（从 npm 安装）或本地目录的绝对路径均可。
手工装（仅开发时）：把包放进 $DSH_HOME/profiles/<profile>/node_modules/dsh-inline-visualizer（例如 ~/.dsh/profiles/desktop/node_modules/dsh-inline-visualizer），并在该 profile 的 cordis.patch.yml 追加：
- insert:
- id: visualizer
name: 'dsh-inline-visualizer'
安装新包可经 HMR 生效；替换已安装的包必须重启才能加载新的 JS 代码。
可选配置¶
- id: visualizer
name: 'dsh-inline-visualizer'
config:
maxCodeChars: 200000 # 单张图上限，1000 ~ 1000000
典型用法¶
经过上面的安装步骤后，对话中的模型可按以下顺序使用（流程来自 README 设计，非虚构案例）：
- 调用
widget_guidelines，在modules里传入需要的模块，例如['diagram', 'chart']，拿到设计契约文本。 - 按契约生成
widget_code（SVG 或 HTML 片段）。 - 调用
show_widget，传入title、widget_code，可选loading_messages；界面在对话内渲染卡片，工具返回仅为 ack。
适用场景与注意¶
适合谁：需要在 DSH 对话里直接看到示意图、简易图表、mockup 或轻量交互卡片，且希望 SVG/HTML 源码不灌回模型上下文的开发者。
权限与安全：插件在当前 DSH 进程权限下运行；安装前建议阅读源码与 MIT 许可证。README 写明：SVG 净化为正则级，mXSS、实体编码绕过不在覆盖范围内；HTML 分支依赖 CSP 与 sandbox。没有真实浏览器 E2E，部分边界需在真实宿主中自行验证。
依赖：Node >=20；peer 依赖 @deepseek-ai/dsh-tools（optional meta，测试与 schema 编译会用到）。
结尾¶
dsh-inline-visualizer 用 widget_guidelines + show_widget 把「说清怎么画」和「在对话里画出来」分开，产物不进模型上下文，SVG 与 HTML 分路径处理风险。若要安装或查变更记录，见 npm 包 dsh-inline-visualizer@2.0.2、GitHub 仓库 与 SkillHub 目录页。
