前言¶
在 DeepSeek Harness 的使用场景中，模型生成 SVG 或 HTML 源码后，往往难以在对话流中直接预览和交互。dsh-visualizer-widget 插件解决了这个问题，它将渲染过程从模型上下文中剥离，直接在会话流中生成可交互的卡片。插件通过 iframe 沙箱实现安全隔离，确保源码只展示在卡片内，不影响模型上下文。
核心功能¶
插件注册了两个工具和一个会话命令：
- render_visual：把 SVG/HTML 源码渲染成会话流内联卡片。支持的功能包括预览/源码切换、高度档位调节、深浅色底切换、弹出全屏查看、重跑渲染、下载源码、保存为图片以及复制源码。
- get_visualizer_spec：返回统一渲染规范全文。内容包括 viewBox 基准 680、字号和字重约束、9×7 色板、明暗配色方案、图类型路由规则以及导出陷阱说明。在生成可视化内容前调用此工具，有助于保持视觉统一。
- 安全隔离：卡片使用 iframe 沙箱渲染，仅允许
scripts、popups和forms权限，不带allow-same-origin。这意味着卡片内的脚本无法访问主页面 DOM 或 storage，防止安全风险。 - 提示词注入控制：插件默认不往系统提示词注入内容。如果想强制模型每轮都优先使用内联渲染，需在插件设置页手动开启。
安装与启用¶
安装前请确认环境满足依赖要求：需要 @deepseek-ai/cordis、dsh-llm 和 dsh-tools，版本需为 0.2.0-rc.1 或 0.1.7-alpha.1。
使用官方安装命令：
dsh plugin --profile web add github:lovezi0/dsh-visualizer-widget
典型用法¶
- 按次触发：在输入框输入
/visual并跟上需求描述，例如/visual 画一个三栏架构图。模型会立即调用render_visual进行渲染。 - 每轮优先渲染：在插件设置页（路径：设置 → 插件 → dsh-visualizer-widget）打开「启用提示词注入」。开启后，模型会优先使用内联卡片渲染，而不是直接输出代码或写文件。
注意事项¶
- 源码与上下文解耦：
render_visual的输出只回传一行摘要（格式、字符数、高度）给模型上下文，完整源码仅保留在工具结果与卡片里，不会进入模型上下文。 - 安全隔离机制：由于 iframe 不带
allow-same-origin，卡片内的脚本无法操作主页面 DOM 或读取 storage。 - 源码获取：完整源码只存在于工具结果与卡片中，不通过其他途径输出。
总结¶
dsh-visualizer-widget 将会话流的可视化能力标准化，通过工具调用和命令触发的方式，让模型生成的内容即画即看。配合 get_visualizer_spec，开发者可以控制生成内容的视觉风格。
- GitHub：https://github.com/lovezi0/dsh-visualizer-widget
- 目录页：https://www.skillhub.cn/plugins/lovezi0/dsh-visualizer-widget
