In the DeepSeek Harness (DSH) plugin ecosystem, model output typically includes fenced code blocks tagged svg, html, or mermaid. When displayed directly as text, these code blocks lack interactivity and intuitiveness. vizcb-codeblock-visualizer aims to solve this issue, automatically rendering such code blocks in model answers into inline diagram cards at the bottom of messages and providing file preview functionality.

Feature Overview

This plugin mainly provides the following capabilities:

  1. Diagram card rendering: Automatically renders code blocks into inline diagram cards at the bottom of messages.
    • SVG cards: Uses host-side DOMPurify for safe sanitization (strips scripts, event attributes, etc.) and client-side lenient validation to ensure safe rendering.
    • HTML cards: Rendered in an empty sandbox iframe (scripts disabled by default, can be enabled via configuration).
    • Mermaid cards: Rendered host-side (depends on mermaid + svgdom), running in independent worker_threads without polluting the host process. Supports 24 dialect aliases; in dark theme, text, line, and arrow colors align with the host palette (text #E5E7EB, lines #4F8CFF); if node text overflows, the rectangle is automatically widened. Concurrent requests for the same diagram are merged and the result is cached.
  2. Caption title: Automatically extracts the title line above the code block.
  3. Interactive features: Supports copying source code, full-screen lightbox zoom view (Esc to close), and saving/exporting (PNG/SVG/HTML formats).
  4. Failure visibility: If rendering fails, displays a notification bar with the reason; Mermaid rendering errors display the specific cause.
  5. Workspace file preview: Renders the present-files instruction into a workspace file preview panel. The first line automatically opens the preview panel; the rest are displayed as file cards. Supports click-to-switch, copying the path, and showing in the system file manager. Supports polling refresh on file changes; once closed, it will not automatically open again in the current session.

Installation and Configuration

Installation

Run the following command in the terminal of the target profile:

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

Dependencies (mermaid/jsdom/dompurify/svgdom) are automatically pulled by npm/pnpm from the registry; the repository does not include node_modules.

Configuration

Default configuration is located in DEFAULTS in lib/index.js. It can be overridden in profile-level 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    # 隐藏本插件渲染过的源码围栏

Usage

Code Block Rendering Guidelines

For best results, model output should follow these guidelines:
1. A code block must immediately follow the sentence that introduces it; do not pile all code blocks at the end of the answer.
2. Before each code block, use one sentence to explain what the diagram shows, then continue with the main text.
3. When there are multiple diagrams, alternate text and images.

Present-files Instruction

Output a present-files block at the end of the response to list the final artifact files:
1. First line: Automatically opens the preview panel (HTML uses an iframe with sandbox="allow-scripts", images use a large image view, source code uses text).
2. Remaining lines: Arranged as file cards; click to switch.
3. Capabilities: Supports copying the full path and showing in the system file manager (host explorer /select).

Technical Details and Notes

  • Security and isolation: Zero outbound network at runtime (no CDN, no iframe scripts). Both SVG and Mermaid output are sanitized host-side with DOMPurify to ensure safety.
  • Engineering: Supports configuration (number of rendered blocks, retry interval, rate limiting, etc.), result caching, and automatic retries (2s interval).
  • Maintainer and license: Maintained by Reseezhang; license is MIT.