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 仓库
• 社区目录