AKS1st/dsh-mermaid
Render Mermaid code fences as SVG diagrams in DSH Web messages
dsh-mermaid renders mermaid code fences in DSH Web conversation messages as interactive SVG diagrams. Diagrams are rendered only when settled (nothing renders mid-stream). Viewport-driven rendering: a fence starts rendering only when it scrolls into view (300px preload margin), and stops if it leaves the viewport. Async queue rendering prevents page freezes with many diagrams. Click any diagram to open a full-screen zoom overlay with mouse-wheel zoom and left/middle-button pan. Theme follows the GUI light/dark mode with theme: auto.
Install
dsh plugin --profile web add dsh-mermaidnpm package dsh-mermaid 0.3.0 (registry-verified 2026-08-24). Alternatively install from GitHub: dsh plugin --profile web add github:AKS1st/dsh-mermaid. After install restart dsh web. The Host half serves the Mermaid UMD build from the plugin's own node_modules; the client half watches the conversation DOM and renders mermaid code fences. No external CDN calls.
Compatibility
DeepSeek Harness web profile (any recent 0.1.x). Chrome/Chromium browser recommended. Host half serves Mermaid UMD via a /mermaid-dist route prefix; client half is a browser script. No external CDN — Mermaid bundle loaded from plugin's own node_modules.
Details
- Repo: AKS1st/dsh-mermaid
- Category: UI Enhancements
- Stars: 5
- Version: npm dsh-mermaid 0.3.0 (registry-verified 2026-08-24)
- Last push: 2026-08-17
- First seen: 2026-08-14
Recent updates
0.3.0: settled-fence-only rendering; viewport-driven lazy rendering; async queue (one at a time); full-screen zoom overlay (wheel zoom, drag pan); auto light/dark theme; host serves Mermaid UMD from plugin node_modules (no CDN); Chinese README available.
FAQ
- Does Mermaid render while the model is still streaming the code fence?
- No — only settled fences (fully received) are rendered. Mid-stream code fences are ignored until streaming ends. This prevents flickering or incomplete diagram renders.
- What happens if there are many diagrams in one conversation?
- Diagrams are rendered one at a time in an async queue that yields the main thread between renders. Only diagrams within 300px of the viewport start rendering; fences outside the viewport pause and resume on re-entry. This keeps the page responsive even with dozens of diagrams.
- Does it make external network calls for Mermaid?
- No — the Host plugin lazily serves the Mermaid UMD build from its own installed node_modules via a /mermaid-dist route. The browser loads Mermaid from the local DSH server, not an external CDN.
Alternatives
erduotong/dsh-plugin-graph · omdsh-dev/dsh-open-in-vscode