npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

dsh-mermaid-zoom

v1.0.2

Published

Mermaid diagram enhancement for the DeepSeek Harness (DSH) web GUI: Ctrl/Cmd+wheel zoom, drag to pan, double-click reset, hover toolbar with zoom controls and 2x PNG copy. Pure client-side DOM enhancement.

Readme

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.bundle,通过 dsh 官方 CLI 安装会自动挂载到 profile 的 bundle 栈,无需手改配置文件:

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

安装完成并重启 dsh web 即生效(dsh 不在 PATH 时用 npx -y @deepseek-ai/dsh plugin ...)。

方式二:手动挂载(高级)

也可以只把这个包作为普通依赖装进 profile,再手写一条 insert 记录:

cd ~/.dsh/profiles/web   # 或你实际的 profile 目录
pnpm add dsh-mermaid-zoom

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

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

⚠️ 两种方式二选一:如果已经用「方式二」挂载过,改用「方式一」前请先从 cordis.patch.yml 删除那行 insert,避免双挂载(两份客户端、两份工具栏处理逻辑)。

开发

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