DeepSeek Harness Web 界面默认将代码块视为纯文本。dsh-visualization 解决了这个问题，为 Mermaid 图表、数据表、Vega-Lite 图表和静态 SVG 图表提供了安全、可选的渲染能力。它是一个 GitHub 分发的 DSH 包，而非 Shell 修改。
安装与配置¶
安装时，插件会自动部署到 web 配置文件。使用固定版本安装命令：
npx --yes github:shaomingbo/dsh-visualization#v0.3.6
安装完成后，需要手动重启 DSH 并在 Web 界面进行硬刷新以加载新组件。
检查安装状态或卸载插件，使用相同的固定版本号：
npx --yes github:shaomingbo/dsh-visualization#v0.3.6 status
npx --yes github:shaomingbo/dsh-visualization#v0.3.6 uninstall
前置要求：
* 当前 dsh CLI 版本需为 0.1.2-alpha.3、0.1.5-rc.1 或 0.1.5-rc.2。
* 系统环境需包含 pnpm（dsh plugin 命令依赖它）。
核心功能¶
插件通过适配器模式与不同版本的 Host 兼容。新版本 Host 提供 conversation.chat.assistant.codeBlock 槽位时使用原生渲染接口；旧版本或无槽位环境则使用 DOM 适配器，在原始代码块旁挂载安全渲染器，待预览就绪后隐藏源码。
1. Mermaid 图表渲染¶
支持标准的 Mermaid 流程图、序列图、甘特图等。渲染样式包含双色调系统、Neo 布局、DSH 主题的圆角与软阴影。此外，支持以下子类型（无需重复声明类型头）：
* kanban：看板
* quadrantChart：象限图
* C4Context、C4Container、C4Component、C4Dynamic、C4Deployment、requirementDiagram
2. 数据表渲染¶
自动解析 csv、tsv 和 json-table 格式。生成的表格支持过滤、排序和分页功能。
3. Vega-Lite 图表¶
在单次 Worker 中渲染静态 Vega-Lite v6 图表。
4. 静态 dsh-svg 图表¶
用于模型手绘的精细图表。渲染器会验证 SVG 文档的白名单规则，并通过 Blob <img> 展示。只有明确要求“精排图”或加载了 dsh-diagram-design 技能时，才会启用此通道。
5. 扩展预览¶
复杂图表支持展开预览，提供以下交互：
* 缩放范围：10% – 300%
* 操作：键盘 +、-、0 缩放，鼠标/触摸拖拽平移，Escape 或点击背景关闭
* 视图：适应窗口
典型用法¶
Mermaid 看板¶
```kanban
backlog[Backlog]
theme[Theme upgrade]
doing[In progress]
dark[Dark-mode verification]
### Mermaid 象限图
```markdown
```quadrantChart
x-axis Low effort --> High effort
y-axis Low impact --> High impact
Dark mode: [0.35, 0.82]
### C4 上下文图
```markdown
```C4Context
Person(user, "User")
System(app, "DSH Web")
Rel(user, app, "Uses")
### 静态 SVG 示例
```markdown
```dsh-svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600" role="img" aria-labelledby="demo-title demo-desc">
<title id="demo-title">Architecture overview</title>
<desc id="demo-desc">A client calls the orders service through a gateway; the service reads a database.</desc>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#4f5d75"/>
</marker>
</defs>
<rect width="960" height="600" fill="#f5f5f5"/>
<rect x="80" y="120" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/>
<text x="160" y="148" text-anchor="middle" font-size="12" fill="#2d3142"
font-family="-apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif">Client</text>
<rect x="480" y="120" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/>
<text x="560" y="148" text-anchor="middle" font-size="12" fill="#2d3142"
font-family="-apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif">Orders</text>
<path d="M 240 144 H 472" fill="none" stroke="#4f5d75" marker-end="url(#arrow)"/>
</svg>
```
注意事项¶
- 兼容性：
xychart-beta和sankey-beta特性被有意禁用。 - 安全隔离：
html、svg和xml代码块不会被接管，始终显示源码。 - 错误处理：对于未知标记、流式内容、解析失败或渲染失败的情况，插件会保留原始代码块可见，避免显示破损的预览。
- 路由规则：普通的
text代码块只有当第一行非空内容是支持的 Mermaid 头部时，才会被当作 Mermaid 渲染，否则回退到原生代码块。
dsh-visualization 是 DeepSeek Harness 生态中提升可视化能力的实用工具。更多细节与源码，请访问 GitHub 仓库。
