dsh-mermaid

简体中文 | English

Render Mermaid fenced code blocks in DeepSeek Harness Web as SVG diagrams with a Code / Diagram toggle. The plugin supports streaming responses, dark mode, fullscreen viewing, zoom and pan, SVG export, and automatic fallback to source code when rendering fails.

Features

• Supports mermaid, mermaidjs, and mmd fenced code blocks
• Works with the DSH/Shiki plain fallback, where code elements may not have a language class
• Bundles the exact Mermaid 11.17.0 release and requires no runtime CDN
• Loads the bundled Mermaid runtime from DSH only after the first Mermaid block is detected
• Renders multiple diagrams through a serial queue and yields between renders to keep the page responsive
• Uses Mermaid's securityLevel: strict
• Suppresses Mermaid's built-in parse-error SVG so failed renders fall back cleanly without leaving temporary error graphics in the document
• Opens rendered diagrams in a fullscreen viewer with zoom, pan, reset, and fit-to-window controls
• Keeps keyboard focus inside the fullscreen viewer, isolates background content, and returns focus to the triggering control when closed
• Announces render and download status to assistive technologies and gives generated SVG diagrams accessible names
• Exports the rendered diagram as a standalone SVG file directly from the card
• Keeps fullscreen and SVG download actions available in both views and holds the toolbar in place while switching
• Localizes plugin-owned interface and status text in Simplified Chinese or English by following the page and browser language
• Enhances only <pre><code> blocks and ignores inline code
• Prevents stale asynchronous renders from overwriting newer streaming content
• Rejects individual diagrams over 50,000 characters or 2,000 lines before invoking Mermaid

Compatibility

Last verified with @deepseek-ai/dsh 0.1.2-rc.1 on 2026-09-05 using Node.js 22.23.2. DSH is currently a developer preview and may introduce compatibility-breaking changes; please open an issue if a newer DSH release changes its plugin loader or Markdown DOM.

Install

If dsh is available globally, install the stable npm release with:

dsh plugin --profile web add -w dsh-mermaid

Without a global dsh command, invoke DSH through npx:

npx.cmd --yes @deepseek-ai/dsh plugin --profile web add -w dsh-mermaid

DSH installs the package through pnpm, detects its dsh.bundle declaration, and automatically adds dsh-mermaid to the web profile bundle list. Restart DSH Web or refresh the page after installation.

Install the latest GitHub source

npx.cmd -y github:MrmoLabs/dsh-mermaid install

This runs the repository's dsh-mermaid installer, which asks DSH to install the GitHub source into the web profile. GitHub installation builds the package during installation. If pnpm reports that it blocked a build script, add the exact package key shown by pnpm to allowBuilds in the profile's pnpm-workspace.yaml, then run the command again. Prefer the npm release for normal use.

Update and uninstall

Update the npm release:

dsh plugin --profile web update -w dsh-mermaid

Uninstall:

dsh plugin --profile web remove -w dsh-mermaid

Restart DSH Web after updating or uninstalling.

Usage

Ask a model to output a Mermaid fenced code block:

```mermaid
flowchart LR
  A[Code] --> B[Diagram]
```

The code block receives Code / Diagram controls and opens in diagram view by default.

Develop from source

Node.js 22.19 or later is required.

npm.cmd install
npm.cmd run check
npm.cmd run build
dsh plugin --profile web add -w .

Build output is written to lib/. The lightweight client.js bootstrap is registered with the DSH client module loader as dsh-mermaid, while the bundled Mermaid runtime is served from the plugin's same-origin host route and loaded on demand. DSH resolves the relative installation path against the current plugin checkout.

For manual local development, the built package can also be copied to:

C:\Users\<username>\.dsh\profiles\web\node_modules\dsh-mermaid

Never commit the complete .dsh directory. It may contain conversations and credentials.

Release checks

npm.cmd run check
npm.cmd run build
npm.cmd pack --dry-run
git status --short
git diff --cached

License

MIT