dsh-mermaid-zoom

Readme

# dsh-mermaid-zoom

Mermaid 图交互增强插件，适用于 [DeepSeek Harness (DSH)](https://www.npmjs.com/package/@deepseek-ai/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 栈，无需手改配置文件：

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

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

### 方式二：手动挂载（高级）

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

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

然后在 `cordis.patch.yml` 中插入：

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

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

## 开发

```bash
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](./LICENSE)