dsh-mermaid-renderer
English | 中文
A DeepSeek Harness (dsh) web plugin that renders Mermaid code blocks in the chat as diagram cards.
Supports flowchart / graph / sequenceDiagram / classDiagram / stateDiagram / erDiagram / journey / gantt / pie / mindmap / timeline / C4Context / gitGraph and more.
Features
-
- Each card toggles between diagram / source views;
- Repeatable zoom in / out / reset (0.25x–4x, unlimited steps; Ctrl+wheel also zooms inside the card; horizontal scroll past container width);
- ⛶ standalone viewer: a fullscreen overlay (mounted on
document.body, immune to chat re-renders) with cursor-centered wheel zoom (5%–1000%), drag-to-pan, fit-width / 100%, double-click to fit, ESC to close; plus open in a new tab as a self-contained page for global viewing with the browser's own zoom;
- One-click copy source;
- The Mermaid engine is lazy-loaded (fetched on first diagram; requires internet), failures keep the source view with a retry hint;
- Pure DOM post-processing — no UI framework internals touched; removing the plugin restores the original page.
Install
Requires DeepSeek Harness 0.1.0-rc.8 (web profile) with pnpm enabled.
One-time prerequisite: dsh plugin shells out to pnpm. If pnpm --version fails, run corepack enable in an admin terminal (Node ships corepack), then open a new terminal.
# From GitHub (recommended — works today; one command, no manual download)
dsh plugin --profile web add git+https://github.com/timedomain1/dsh-mermaid-renderer.git
# Or from npm (after publishing)
dsh plugin --profile web add dsh-mermaid-renderer
# Or from a local checkout
dsh plugin --profile web add file:/path/to/dsh-mermaid-renderer
No build step required — the bundle is pre-built, so git installs work out of the box.
Then restart dsh web and refresh the browser tab. Verify by sending a ```mermaid code block in the chat.
dsh plugin forwards to pnpm and adds this package (it declares dsh.bundle.patch) to the web profile's bundle layer automatically. Without pnpm you can install manually: place this package directory at $DSH_HOME/profiles/web/node_modules/dsh-mermaid-renderer/ and append "dsh-mermaid-renderer" to dsh.profile.bundles in $DSH_HOME/profiles/web/package.json.
Uninstall
dsh plugin --profile web remove dsh-mermaid-renderer
Then restart dsh web. Manual installs: delete the node_modules directory above and remove the bundles entry.
Compatibility & dependencies
- Browser half: zero third-party dependencies (hand-written static bundle in the official
dsh.client / __ModuleLoader__ protocol);
- Host half: empty
apply (present in the Cordis composition only), same pattern as the official dsh-client-ui-* packages;
- Mermaid v11 loads from the jsDelivr / unpkg CDN at first render (internet required).
Override the engine URL with
window.__DSH_MERMAID_URL__ = 'https://your-mirror/mermaid.min.js'.
For offline setups, inline mermaid.min.js into the loader logic in lib/client.js.
Share / publish to the community
- Bump the version in
package.json, then npm publish;
- Register in community directories:
How it works
The package is a standard dual-face dsh plugin: cordis.patch.yml (dsh.bundle.patch) inserts one row (its name is the package name) into the profile composition; the host's client-modules service (@deepseek-ai/dsh-client-modules) discovers the dsh.client declaration, serves lib/client.js through the /plugins route and injects it into window.__DSH_BOOT__; the browser Cordis loader instantiates it and calls apply(ctx). apply watches the chat DOM with a MutationObserver, lazy-loads Mermaid and renders SVG in place.
License
MIT
