vizcb-codeblock-visualizer：DeepSeek Harness 圖表渲染與預覽

在 DeepSeek Harness（DSH）的插件生態中，模型輸出通常包含 svg`、html或 ````mermaid 等代碼塊。這些代碼塊直接展示爲文本時，缺乏交互性和直觀性。vizcb-codeblock-visualizer 旨在解決這一問題，將模型回答中的此類代碼塊自動渲染爲消息底部的圖表卡片，並提供文件預覽功能。

功能概覽¶

該插件主要提供以下能力：

1. 圖表卡片渲染：自動將代碼塊渲染爲消息底部的內嵌圖表卡片。
   • SVG 卡片：利用宿主端 DOMPurify 進行安全消毒（剝離腳本、事件屬性等）+ 客戶端寬鬆校驗，確保渲染安全。
   • HTML 卡片：通過空 sandbox iframe 渲染（默認禁腳本，可配置開啓）。
   • Mermaid 卡片：宿主端渲染（依賴 mermaid + svgdom），運行在獨立 worker_threads 中，不污染宿主進程。支持 24 種方言別名，深色主題下文字、連線、箭頭顏色與宿主色板對齊（文字 #E5E7EB，連線 #4F8CFF），節點文字超出時自動擴寬矩形。同一圖的併發請求會合並並緩存結果。
2. 圖註標題：自動提取代碼塊上方的標題行。
3. 交互功能：支持複製源碼、全屏燈箱放大查看（Esc 關閉）、保存導出（PNG/SVG/HTML 格式）。
4. 失敗可見化：未渲染時顯示原因通知條，Mermaid 渲染錯誤會顯示具體原因。
5. 工作區文件預覽：通過 ```present-files 指令渲染爲工作區文件預覽面板。第一行自動打開預覽面板，其餘展示文件卡片。支持點擊切換、複製路徑、在系統文件管理器中顯示。支持文件變化輪詢刷新，關閉後本次會話不再自動彈開。

安裝與配置¶

安裝¶

在目標 profile 的終端執行以下命令：

dsh plugin --profile <name> add github:Reseezhang/vizcb-codeblock-visualizer

依賴（mermaid/jsdom/dompurify/svgdom）由 npm/pnpm 從 registry 自動拉取，倉庫不內置 node_modules。

配置¶

默認配置位於 lib/index.js 的 DEFAULTS。可在 profile 級的 cordis.patch.yml 中覆蓋：

- id: vizcb-codeblock-visualizer
  config:
    maxBlocks: 8              # 每條消息最多渲染塊數
    maxBlockChars: 65536      # 單塊最大字符數
    retryDelayMs: 2000        # 空結果重試間隔
    minSvgHeight: 120         # SVG 無 viewBox 時的兜底高度
    mermaidEnabled: true      # 是否渲染 mermaid
    mermaidTextColor: "#E5E7EB"
    mermaidLineColor: "#4F8CFF"
    canvasBg: "#0F172A"       # 卡片圖區 / 導出畫布底色
    mermaidDark: null         # mermaid 主題：null=自動檢測，true/false=強制
    htmlAllowScripts: false   # HTML iframe 是否允許腳本
    debugLog: false           # 請求級調試日誌
    previewEnabled: true      # 是否啓用 present-files 文件預覽
    workspaceRoot: ""         # 工作區根目錄；留空 = sandboxPolicy.workspaceRoot
    previewMaxBytes: 5242880  # 單文件預覽上限（字節）
    previewPollMs: 3000       # 文件變化輪詢間隔
    maxFiles: 12              # 一次展示最多卡片數
    hideSourceBlocks: true    # 隱藏本插件渲染過的源碼圍欄

使用說明¶

代碼塊渲染規範¶

爲獲得最佳效果，模型輸出應遵循以下規範：
1. 代碼塊必須緊跟在引入它的那句話之後輸出，禁止將所有代碼塊堆積在回答末尾。
2. 每個代碼塊之前用一句話說明這張圖展示什麼，之後繼續正文講解。
3. 多個圖時需圖文交替分佈。

Present-files 指令¶

在回覆末尾輸出 ```present-files 塊列出最終成品文件：
1. 第一行：自動打開預覽面板（HTML 走 sandbox="allow-scripts" iframe，圖片大圖，源碼文本）。
2. 其餘行：排成文件卡片，點擊切換。
3. 功能：支持複製完整路徑、在系統文件管理器中顯示（宿主 explorer /select）。

技術細節與注意事項¶

• 安全與隔離：運行時零網絡外聯（無 CDN、無 iframe 腳本）。SVG 和 Mermaid 輸出均經過宿主端 DOMPurify 消毒，確保安全性。
• 工程化：支持配置化（渲染塊數、重試間隔、限流等）、結果緩存、自動重試（2s 間隔）。
• 維護者與許可：由 Reseezhang 維護，許可證爲 MIT。

相關鏈接¶

• GitHub 倉庫
• 社區目錄