By default, the DeepSeek Harness Web interface treats code blocks as plain text. dsh-visualization solves this problem, providing safe, optional rendering support for Mermaid diagrams, data tables, Vega-Lite charts, and static SVG charts. It is a DSH package distributed via GitHub, rather than a Shell modification.

Installation and Configuration

When installing, the plugin is automatically deployed to the web profile. Use the fixed-version installation command:

npx --yes github:shaomingbo/dsh-visualization#v0.3.6

After installation is complete, manually restart DSH and hard-refresh the Web interface to load the new components.

To check the installation status or uninstall the plugin, use the same fixed version number:

npx --yes github:shaomingbo/dsh-visualization#v0.3.6 status
npx --yes github:shaomingbo/dsh-visualization#v0.3.6 uninstall

Prerequisites:
* The current dsh CLI version must be 0.1.2-alpha.3, 0.1.5-rc.1, or 0.1.5-rc.2.
* The system environment must include pnpm (the dsh plugin command depends on it).

Core Features

The plugin is compatible with different Host versions through an adapter pattern. When a newer Host provides the conversation.chat.assistant.codeBlock slot, the native rendering interface is used; in older versions or slot-less environments, a DOM adapter is used to mount a safe renderer beside the original code block and hide the source code after the preview is ready.

1. Mermaid Diagram Rendering

Supports standard Mermaid flowcharts, sequence diagrams, Gantt charts, and more. The rendered style includes a two-tone color system, the Neo layout, and DSH-themed rounded corners and soft shadows. In addition, the following subtypes are supported (without needing to repeat the diagram type header):
* kanban: Kanban board
* quadrantChart: Quadrant chart
* C4Context, C4Container, C4Component, C4Dynamic, C4Deployment, requirementDiagram

2. Data Table Rendering

Automatically parses csv, tsv, and json-table formats. Generated tables support filtering, sorting, and pagination.

3. Vega-Lite Charts

Renders static Vega-Lite v6 charts in a single Worker.

4. Static dsh-svg Diagrams

Used for fine-grained diagrams hand-crafted by the model. The renderer validates the SVG document against whitelist rules and displays it using a Blob <img>. This channel is enabled only when a “refined diagram” is explicitly requested or the dsh-diagram-design skill is loaded.

5. Expanded Preview

Complex diagrams support an expanded preview with the following interactions:
* Zoom range: 10% – 300%
* Actions: keyboard +, -, 0 to zoom; mouse/touch drag to pan; Escape or click the background to close
* View: Fit to window

Typical Usage

Mermaid Kanban

```kanban
backlog[Backlog]
  theme[Theme upgrade]
doing[In progress]
  dark[Dark-mode verification]

### Mermaid Quadrant Chart
```markdown
```quadrantChart
x-axis Low effort --> High effort
y-axis Low impact --> High impact
Dark mode: [0.35, 0.82]

### C4 Context Diagram
```markdown
```C4Context
Person(user, "User")
System(app, "DSH Web")
Rel(user, app, "Uses")

### Static SVG Example
```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>

```

Notes

  1. Compatibility: xychart-beta and sankey-beta features are intentionally disabled.
  2. Security Isolation: html, svg, and xml code blocks are not taken over and always display source code.
  3. Error Handling: For unknown markers, streaming content, parsing failures, or rendering failures, the plugin keeps the original code block visible to avoid displaying a broken preview.
  4. Routing Rules: A plain text code block is rendered as Mermaid only when its first non-empty line is a supported Mermaid header; otherwise, it falls back to the native code block.

dsh-visualization is a practical tool in the DeepSeek Harness ecosystem for enhancing visualization capabilities. For more details and source code, visit the GitHub repository.