deepseekplugins

DeepSeek Harness plugin

dsh-mermaid-web

DeepSeek Harness Web UI plugin that renders settled Mermaid fenced code blocks as diagrams

UI Enhancements
Jump to install

Source facts

Repository
terrywangcode/dsh-mermaid-web
Latest update
Aug 17, 2026
Category
UI Enhancements
GitHub stars
0
Format
plugin
Catalog evidence
Upstream dsh.bundle evidence
Evidence path
package.json#dsh.bundle
Checked against
0.1.0-rc.8
Upstream check date
2026-08-20

This evidence comes from the upstream catalog. This site has not installed, run, or security-reviewed the plugin.

Install

Start with a prompt that asks an agent to review the GitHub repository and source. Switch to the command if you want to install it yourself.

Copy this prompt into DSH, Codex, or another agent and ask it to review the GitHub repository and source first.

Do not install or run any commands yet. Read this plugin's GitHub repository, README, and relevant source code. Then answer the questions below clearly and directly so I can decide whether it fits my needs:

1. What is this plugin, and what problem does it solve?
2. Who is it for, and what are its typical use cases?
3. How is it used after installation? Include one minimal example.
4. What known limitations or privacy, security, compatibility, or maintenance risks does it have?
5. Give a clear recommendation: recommend, conditionally recommend, or do not recommend, with reasons.

Distinguish statements documented by the repository, inferences from source code, and unknowns. If evidence is insufficient, say so explicitly. Do not guess or simply repeat the README.

GitHub: https://github.com/terrywangcode/dsh-mermaid-web
Plugin: dsh-mermaid-web
Author: terrywangcode

Check the source files

Read the README and other files from this plugin directory before installing.

File explorer3 files
README.mdSource · read only

dsh-mermaid-web

![CI](https://github.com/terrywangcode/dsh-mermaid-web/actions/workflows/ci.yml) ![Release](https://github.com/terrywangcode/dsh-mermaid-web/releases) ![License: MIT](LICENSE)

An out-of-tree DeepSeek Harness Web UI plugin that turns settled fenced code blocks labeled mermaid into Mermaid.js SVG diagrams.

flowchart LR Prompt --> Agent --> Tool

Inline diagram

![A large Mermaid architecture diagram rendered inline with zoom controls](artifacts/zoom-controls.png)

Fullscreen workspace

![The same Mermaid architecture diagram fitted inside the fullscreen workspace](artifacts/fullscreen-workspace.png)

Install

From a DeepSeek Harness checkout:

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

The repository commits its built browser bundle, so installing from GitHub does not require a consumer-side plugin build.

To install a specific release:

pnpm dsh plugin --profile web add github:terrywangcode/dsh-mermaid-web#v0.1.0

Build from source

Use Node 22 or newer:

pnpm install
pnpm run build
cd ../deepseek-harness
pnpm dsh plugin --profile web add ../dsh-mermaid-web
pnpm dsh --profile web web

The package is a bundle: cordis.patch.yml inserts its host row, while dsh.client points Harness at the built lib/client.js browser entry.

How it works

The package has two DSH plugin faces. index.js is an intentionally empty host-side Cordis entry used for Loader governance and client discovery. The ./client export contains the browser implementation. DSH hashes and serves that bundle through /plugins, adds it to window.__DSH_BOOT__, and mounts its exported apply(ctx) through the browser Cordis Loader.

The browser plugin observes settled .md-code-block elements, renders exact mermaid fences with Mermaid.js, and records every DOM mutation it owns. Its Cordis effect disposer disconnects observation, closes any fullscreen workspace, removes generated UI and styles, and restores the original Harness code blocks. Client-plugin HMR therefore replaces the plugin without leaving duplicate diagrams or listeners behind.

Runtime behavior

  • Only code blocks whose settled language banner is exactly mermaid are enhanced.
  • Blocks under [data-streaming] remain ordinary source until the assistant response settles.
  • Mermaid runs with securityLevel: 'strict' and HTML flowchart labels disabled.
  • Every rendered diagram has keyboard-accessible zoom out, reset, and zoom in controls. Zoom is independent per chart, advances in 25% steps, and is bounded from 50% to 300%; standards-based SVG transforms resize a matching layout stage so enlarged charts scroll inside their canvas across browsers.
  • Expand opens a full-viewport native dialog without rerendering or duplicating the SVG. The workspace supports fit-to-screen, pointer-centered Ctrl/Command-wheel zoom, wheel/trackpad panning, drag-to-pan, 100% reset, F/0/+/- shortcuts, Escape-to-close, and a collapsible source panel. Closing or disposing the plugin returns the same SVG to its inline stage and restores its prior inline zoom.
  • The original Harness code block remains in the DOM but is hidden after a successful render. The diagram includes a source disclosure for auditing.
  • Parse failures leave the original source visible and append a compact error message.
  • Cordis disposal/HMR disconnects the observer, removes generated diagrams and styles, and restores every hidden original block.

Compatibility limitation

Harness currently exposes no Markdown-fence renderer slot. This plugin therefore recognizes the stable .md-code-block wrapper and the current CodeBlock child layout. A future Web UI refactor may require updating blockLanguage() or blockSource(). A first-class Markdown code-renderer slot in Harness would remove this DOM coupling.

Version 0.1.0 was verified against DeepSeek Harness 0.1.0-rc.5 at commit 47f943859b.

Development and security

See [CONTRIBUTING.md](CONTRIBUTING.md) for the build and live browser verification workflow. Please report suspected vulnerabilities through GitHub private vulnerability reporting as described in [SECURITY.md](SECURITY.md).

License

MIT

Back to searchOpen GitHub repository

More related plugins

View category