dsh-mermaid-smooth
Manifest validRenders mermaid fences in dsh web chat as SVG diagrams by default, with cursor-anchored smooth zoom and pan, a per-fence diagram/code toggle persisted in localStorage, dark-mode follow, and a bundled
dsh-mermaid-smooth
English | 中文
Render mermaid code fences in DeepSeek Harness (dsh) web chat as diagrams by default, with smooth zoom and pan, a per-fence diagram/code toggle at each card's top-right, a persisted per-fence preference, dark-mode follow, and a fully bundled offline engine (zero CDN).
- Default diagram — fences in assistant messages render as SVG diagrams the moment they are complete; non-mermaid code blocks are untouched.
- Smooth interaction — cursor-anchored wheel zoom over one composed transform (with a short ease-out), direct pointer drag, double-click to fit. Reduced-motion preferences disable all easing.
- Toggle at top-right — every diagram card has a 图/文案 (diagram/code) switch; several fences in one message toggle independently.
- Per-fence memory — the toggle state persists in localStorage keyed by the fence source, so it survives page reloads and reconnects.
- Dark-mode follow — diagrams re-render with the GUI theme.
- Safe and offline — mermaid runs at securityLevel 'strict' (built-in sanitization, no click handlers), the engine is bundled into the plugin (zero CDN), and a failed fence keeps its original code with an inline error banner. Uninstalling restores the conversation verbatim.
Screenshots



Install
dsh-mermaid-smooth is a plugin for the DeepSeek Harness (dsh) web UI. Before proceeding, make sure the dsh CLI and web environment are installed and set up.
Four ways — pick one, then restart DSH Web (the current session ends, but DSH sessions are persisted on disk and can be resumed after restart).
1. npm package (recommended, simplest)
dsh plugin --profile web add dsh-mermaid-smooth
Verified working: the tarball ships the prebuilt lib/client.js, so nothing
is compiled at install time. pnpm may auto-add the package to
minimumReleaseAgeExclude in the profile's pnpm-workspace.yaml (because the
package was just published) — that is expected and harmless.
2. From GitHub (pinned to a commit)
dsh plugin --profile web add 'github:gitByteFree/dsh-mermaid-smooth#<full-commit-sha>'
Pin to the commit you want (e.g. the main HEAD shown on the repo's commit
history page); later changes on main will not silently alter installed code.
The source is installed and built at install time (prepare runs the esbuild
bundle), so git and Node.js ≥ 20 are required.
3. From a release tarball (offline / where git is inconvenient)
Download dsh-mermaid-smooth-<version>.tgz from this repo's
Releases (it
contains the prebuilt lib/client.js, so no prepare script runs at install
time), then:
dsh plugin --profile web add ./dsh-mermaid-smooth-<version>.tgz
4. Local clone (for development)
git clone git@github.com:gitByteFree/dsh-mermaid-smooth.git
cd dsh-mermaid-smooth
dsh plugin --profile web add .
Restart the web app (dsh web, or your dsh-web service) so the new bundle
layer is composed.
License
MIT
Compatibility
Versions
| Latest version | Published | Size |
|---|---|---|
| 0.1.0 | — | — |
Comments
Loading…
Similar plugins
by XiaoBinGan
Render settled ```mermaid fences in the dsh Web GUI chat as SVG diagrams — hardened output, source toggle, and a code-block fallback that never loses the source.
★ 0
MIT
JavaScript
Sep 23, 2026
dsh plugin --profile web add dsh-mermaid-fenceby AKS1st
在 DSH Web 会话中把 Mermaid 代码围栏渲染为 SVG 图表 | Render Mermaid code fences as SVG diagrams in DSH Web messages
★ 9
↓ 1.1k/wk
MIT
TypeScript
Aug 18, 2026
dsh plugin --profile web add dsh-mermaidby baconbao
Preview Mermaid diagrams as images via local rendering in DSH Web when the chat message contains a Mermaid fenced code block, and also allow integration with external rendering servers.
★ 4
MIT
JavaScript
Oct 3, 2026
dsh plugin --profile web add @baconbao/dsh-mermaid-image-previewRenders mermaid code blocks in the chat as diagrams in place (flowchart, sequence, class, state, ER, gantt, pie), with zoom, source toggle, copy PNG and SVG download.
★ 0
dsh plugin --profile web add @dsh-local/dsh-diagramMermaid diagram renderer for the Web UI conversation: renders mermaid code blocks into interactive cards (zoom, fit-width, fullscreen viewer, preview/code toggle) with official UI primitives, and keep
★ 0
↓ 204/wk
dsh plugin --profile web add dsh-mermaid-renderby MrmoLabs
Render Mermaid code blocks as SVG diagrams in DeepSeek Harness Web, with diagram/code switching, streaming support, dark mode, strict security, and npm/GitHub installation.
★ 17
↓ 1.3k/wk
MIT
JavaScript
Oct 28, 2026
dsh plugin --profile web add dsh-mermaid