Introduction

Mermaid diagrams are rendered in the DSH Web GUI. When viewing long diagrams, inspecting details, or copying diagrams to documents, temporary zooming, panning, and exporting are required. dsh-mermaid-zoom provides a set of browser-side interaction enhancements for these types of diagrams.

What is this?

dsh-mermaid-zoom is a DSH plugin maintained by evanfang0054 with an MIT license. It targets Mermaid diagrams in the DSH Web GUI, adding zooming, panning, view resetting, and image copying capabilities in the browser, without relying on any host services.

Core Features

  • Ctrl/Cmd + Scroll to zoom, without interfering with normal page scrolling.
  • Drag to pan.
  • Double-click to reset view.
  • Hover toolbar: + Zoom In / - Zoom Out / ⟳ Reset.
  • Copy Image: Export 2x white-background PNG, clipboard priority, auto-download on failure.
  • Automatically take over diagrams after streaming rendering is complete using MutationObserver.
  • Zoom range limited to 0.4x – 10x.

Installation and Usage

Official One-Click Installation

First, add the plugin to the target profile:

dsh plugin --profile web add dsh-mermaid-zoom

After installation, restart dsh web for it to take effect. If dsh is not in PATH, you can temporarily call it via npm:

npx -y @deepseek-ai/dsh plugin --profile web add dsh-mermaid-zoom

Manual Mounting

Alternatively, you can install the package to the profile directory:

cd ~/.dsh/profiles/web
pnpm add dsh-mermaid-zoom

Then, insert into cordis.patch.yml:

- insert:
    - id: dsh-mermaid-zoom
      name: 'dsh-mermaid-zoom'

Choose one of the two methods. If you are already using manual mounting, delete the corresponding insert from cordis.patch.yml before switching back to the official one-click installation to avoid double mounting.

Development and Testing

Development requires Node >= 20 (from package.json engines). Clone the repository and run tests:

git clone https://github.com/evanfang0054/dsh-mermaid-zoom.git
cd dsh-mermaid-zoom
npm test

Use Cases and Notes

Suitable for users viewing Mermaid diagrams in the DSH Web GUI who need to temporarily zoom, pan, or export 2x white-background PNGs. The plugin itself is pure browser-side DOM enhancement and does not rely on host services; however, installation and loading still occur within the DSH environment, and the plugin runs under the permissions of the current dsh process. It is recommended to check the source code and the MIT license before installation and to only install from trusted sources.

Resources

  • GitHub: https://github.com/evanfang0054/dsh-mermaid-zoom
  • Directory Page (from plugin listing, verify before visiting): https://www.skillhub.cn/plugins/evanfang0054/dsh-mermaid-zoom