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 倉庫。
