Preface

The web UI of DeepSeek Harness (DSH) provides plugin-based extensibility. When conversation content includes Mermaid chart code, it is typically displayed only as a plain-text code fence. The dsh-mermaid-smooth plugin changes this behavior to render Mermaid blocks as SVG charts by default, and provides smooth zooming, panning, and toggling capabilities.

What is It

This is a plugin maintained by user gitByteFree. By bundling the Mermaid rendering engine into the plugin (zero CDN), it enables direct and interactive chart viewing in the DSH Web chat interface.

Core Features

  1. Default SVG rendering: After content generation completes, Mermaid fences in assistant messages are automatically rendered as SVG charts. Non-Mermaid code fences are not affected.
  2. Smooth interaction: Supports cursor-anchored wheel zoom and direct drag panning. Double-click a chart to automatically fit the view. If the system has the “reduce motion” preference enabled, all easing effects are disabled.
  3. Independent toggling and memory: Each chart card has a “chart/text” toggle switch in the top-right corner. The switch state is persistently stored in localStorage. After refreshing the page or reconnecting, the display mode of each fence retains the previous setting.
  4. Theme following and security: Charts are automatically redrawn to follow the GUI’s dark mode or light mode. Mermaid runs at the strict security level, includes built-in sanitization scripts, and does not contain any click handlers. The engine is fully bundled locally and is offline-capable.

Installation and Enablement

Before installing, ensure that the DSH CLI and Web environment are installed and running.

1. Use the npm package (recommended)

Run the following command to add the plugin:

dsh plugin --profile web add dsh-mermaid-smooth

After installation, you need to restart DSH Web (dsh web or the related service) for the plugin to take effect.

2. Other installation methods

  • Install from GitHub (pinned version):
    dsh plugin --profile web add 'github:gitByteFree/dsh-mermaid-smooth#<full-commit-sha>'
  • Install from a local directory:
    git clone git@github.com:gitByteFree/dsh-mermaid-smooth.git
    cd dsh-mermaid-smooth
    dsh plugin --profile web add .

Typical Usage

  1. In the DSH chat, input a Mermaid code fence (for example, a flowchart or sequence diagram).
  2. Wait for the assistant message generation to complete; the fence will automatically convert into a chart.
  3. Zoom/pan: Use the mouse wheel to zoom, and hold the left mouse button to drag for panning.
  4. Fit view: Double-click the chart area to zoom it to fit the screen size.
  5. Toggle mode: Click the switch in the top-right corner of the chart card to view the SVG chart or the original code independently. Multiple fences in the same message can be toggled independently.

Notes

  • Security: Because the built-in strict security level is used, the plugin does not execute any external code.
  • Compatibility: Code blocks that are not Mermaid are not rendered and remain unchanged.
  • Uninstalling: Uninstalling this plugin does not delete already rendered charts, nor does it break conversation history; the system reverts to the state before rendering.

Summary

dsh-mermaid-smooth addresses the poor interaction experience for viewing Mermaid charts in the DSH Web interface. By localizing the engine, following the theme, and remembering state, it provides a stable and intuitive chart viewing solution.

  • GitHub: https://github.com/gitByteFree/dsh-mermaid-smooth
  • Directory: https://www.skillhub.cn/plugins/gitByteFree/dsh-mermaid-smooth