Back to home@evanfang0054

dsh-mermaid-zoom

Mermaid diagram zoom/pan/reset/PNG-copy enhancement plugin for DeepSeek Harness (DSH) web GUI

Stars
0
Language
JavaScript
Created
Aug 19, 2026
Updated
Aug 19, 2026
GitHub repo

Introduction

dsh-mermaid-zoom

Mermaid 图交互增强插件,适用于 DeepSeek Harness (DSH) Web GUI。

给 GUI 中 dsh-genui 渲染的 mermaid 图([data-genui-mermaid] 容器)加上:

  • 🔍 Ctrl/Cmd + 滚轮缩放(不干扰页面正常滚动)
  • 拖拽平移
  • 🖱 双击重置视图
  • 🧰 hover 工具栏:+ 放大 / - 缩小 / ⟳ 重置
  • 📋 复制图片:导出 2x 白底 PNG,剪贴板优先,失败自动下载

纯浏览器端 DOM 增强,不依赖任何宿主服务;MutationObserver 自动接管流式渲染完成的图。缩放范围 0.4x – 10x。

安装

在 DSH web profile(如 ~/.dsh/profiles/web)中安装:

pnpm add dsh-mermaid-zoom

然后在 cordis.patch.yml 中插入:

- insert:
    - id: dsh-mermaid-zoom
      name: 'dsh-mermaid-zoom'

重启 dsh web 生效。

开发

git clone https://github.com/evanfang0054/dsh-mermaid-zoom.git
cd dsh-mermaid-zoom
npm test       # node --test tests/

结构:

  • lib/index.js — 宿主半身(无操作,能力全在客户端)
  • lib/client.js — 客户端半身(DOM 增强、事件绑定、PNG 导出)
  • lib/core.mjs — 纯逻辑核心(不触碰 DOM,可被 node --test 直接测)

License

MIT