DeepSeek Harness adopts an “everything is a plugin” architecture. Rendering Mermaid diagrams directly inside Markdown in the Web UI had previously been difficult. The dsh-mermaid-web plugin solves this problem by converting fenced code blocks into interactive SVG diagrams.

Plugin Positioning

This is a DeepSeek Harness Web UI plugin maintained by the developer terrywangcode. It renders fenced code blocks marked as mermaid into Mermaid.js SVG diagrams and provides zoom controls with a fullscreen workspace.

Core Features

  1. Diagram Rendering: Recognizes mermaid code blocks in Markdown and renders them as SVG.
  2. Zoom Controls: Provides keyboard-controlled zooming with 25% steps, and the zoom range is limited from 50% to 300%.
  3. Fullscreen Workspace: Provides a fullscreen workspace that supports fitting to the screen, cursor-centered zooming, drag panning, keyboard shortcuts (F/0/+/-), and ESC to close.
  4. Hot Module Replacement (HMR): Supports hot module replacement, so updating the plugin does not require a page refresh and old state is cleaned up correctly.

Installation and Activation

Run the following commands in the root directory of the DeepSeek Harness code repository:

pnpm dsh plugin --profile web add github:terrywangcode/dsh-mermaid-web
pnpm dsh --profile web web

The plugin builds a browser Bundle, so installing it from GitHub does not require the consumer side to build the plugin. To install a specific version, append #v0.1.0 to the repository URL.

Typical Usage

Use fenced code blocks in a Markdown document to mark Mermaid syntax:

```mermaid
flowchart LR
  Prompt --> Agent --> Tool

```

After starting the Web UI, the system automatically recognizes and renders these code blocks. After successful rendering, the original code block is hidden and the generated SVG diagram is displayed.

How It Works and Limitations

  • Dependency on DOM Structure: The current Harness does not expose a Markdown fenced-code-block renderer slot, so this plugin depends on the DOM structure (.md-code-block) and works by observing settled elements.
  • Strict Security Mode: Mermaid runs in strict security mode, and HTML flowchart tags are disabled.
  • Error Handling: If parsing fails, the original code remains on the page, and a compact error message is displayed.
  • Environment Requirements: Requires Node.js 22 or a newer version.

Summary

dsh-mermaid-web addresses the need for directly rendering Mermaid diagrams in DeepSeek Harness by acting as a Web UI plugin. It provides a fullscreen workspace and zoom functionality, making it suitable for developers who need to display architecture diagrams, flowcharts, and similar diagrams directly in the web interface.