dsh-mermaid-zoom:为 DSH Web GUI 的 Mermaid 图增加缩放、平移与复制

前言

DSH Web GUI 中会渲染 Mermaid 图。查看长图、检查细节或把图复制到文档时,需要临时放大、移动和导出。dsh-mermaid-zoom 为这类图提供一组浏览器端交互增强。

这是什么

dsh-mermaid-zoom 是一个 DSH 插件,维护者为 evanfang0054,许可证为 MIT。它面向 DSH Web GUI 中的 Mermaid 图,在浏览器端增加缩放、平移、重置视图和复制图片能力,不依赖任何宿主服务。

核心功能

  • Ctrl/Cmd + 滚轮缩放,不干扰页面正常滚动。
  • 拖拽平移。
  • 双击重置视图。
  • hover 工具栏:+ 放大 / - 缩小 / ⟳ 重置。
  • 复制图片:导出 2x 白底 PNG,剪贴板优先,失败自动下载。
  • 使用 MutationObserver 自动接管流式渲染完成的图。
  • 缩放范围限制为 0.4x – 10x。

安装与启用

官方一键安装

先在目标 profile 下添加插件:

dsh plugin --profile web add dsh-mermaid-zoom

安装完成后,重启 dsh web 即生效。如果 dsh 不在 PATH 中,可以通过 npm 临时调用:

npx -y @deepseek-ai/dsh plugin --profile web add dsh-mermaid-zoom

手动挂载

也可以把包安装到 profile 目录:

cd ~/.dsh/profiles/web
pnpm add dsh-mermaid-zoom

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

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

两种方式二选一。如果已经使用手动挂载,切换回官方一键安装前,先从 cordis.patch.yml 删除对应 insert,避免双挂载。

开发测试

开发运行要求 Node >= 20(来自 package.json engines)。克隆仓库并运行测试:

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

适用场景与注意

适合在 DSH Web GUI 中查看 Mermaid 图,需要临时放大、平移或导出 2x 白底 PNG 的使用者。插件本身是纯浏览器端 DOM 增强,不依赖宿主服务;但安装和加载仍发生在 DSH 环境中,插件会在当前 dsh 进程权限下运行。安装前建议检查源码和 MIT 许可证,只从可信来源安装。

资源

  • GitHub:https://github.com/evanfang0054/dsh-mermaid-zoom
  • 目录页(来自插件线索,建议访问前核对):https://www.skillhub.cn/plugins/evanfang0054/dsh-mermaid-zoom
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜