Mermaid 图表渲染lj970926/dsh-plugin-mermaid

dsh-plugin-mermaid

License: MIT
Topic: dsh-plugin
DSH version

一个 DeepSeek Harness（DSH）Web
客户端插件，用于在聊天消息中渲染  图表 ↔ 源码 切换以及实时主题切换。

- Mermaid v11 按需从 CDN 加载（不会使打包体积膨胀）。
- 自动跟随 DSH 深色/浅色主题。
- 500 毫秒防抖，避免流式 token 频繁触发渲染器。
- 原生 DSH 代码块横幅集成：按钮就位于内置 Copy 按钮旁边；
源码视图保留 Shiki 高亮和复制功能。
- 零构建步骤——浏览器入口是手写的工厂形式 CJS，完全符合
DSH 的 client-modules 服务所期望的格式。

安装

从 GitHub 安装（推荐）

本包附带预构建的 lib/ 文件并声明了 dsh.bundle，因此可以
直接安装到 DSH Web 配置中：
bash
dsh plugin --profile web add github:lj970926/dsh-plugin-mermaid

然后重启 dsh web 并强制刷新浏览器（Cmd+Shift+R）。

为保证可复现性而固定某个修订版本，可追加 commit SHA 或 tag：
bash
dsh plugin --profile web add github:lj970926/dsh-plugin-mermaid#

由于发布的文件已经位于 lib/ 中，本包没有
prepare 构建步骤，也不需要 pnpm allowBuilds 授权。
如果你 fork 了本仓库并添加了构建步骤，请遵循 DSH 的打包
文档，
并在提示时将该包的键添加到配置文件的
pnpm-workspace.yaml 中的 allowBuilds 下。

从本地检出安装

如果你正在开发该插件，可将本地检出作为链接包安装：
bash
dsh plugin --profile web add /absolute/path/to/dsh-plugin-mermaid

旧版复制脚本

本仓库还保留了 install.sh，用于将文件直接复制到
现有的 Web 配置中：
bash
git clone https://github.com/lj970926/dsh-plugin-mermaid.git
bash dsh-plugin-mermaid/install.sh

该脚本会：

1. 将此文件夹复制到 $DSH_HOME/profiles/web/node_modules/dsh-plugin-mermaid/
（默认为 ~/.dsh/profiles/web/...）。
2. 向
$DSH_HOME/profiles/web/cordis.patch.yml 追加一条 insert 条目（幂等）。

然后重启 dsh web 并强制刷新浏览器（Cmd+Shift+R）。

手动安装（不使用脚本）
bash
mkdir -p ~/.dsh/profiles/web/node_modules/dsh-plugin-mermaid
cp -R lib package.json cordis.patch.yml ~/.dsh/profiles/web/node_modules/dsh-plugin-mermaid/
cat >> ~/.dsh/profiles/web/cordis.patch.yml  建议优先使用 dsh plugin add；它会在配置文件清单中记录该包，并
在配置文件更新时保持其启用状态。较新的 DSH 版本要求
配置文件的 cordis.patch.yml 解析为顶层 YAML 数组；如果该文件
没有任何条目，请将其保留为 []。旧版安装脚本会为你
自动规范化这一点。

用法

发送任何包含围栏 mermaid 代码块的消息，例如：

mermaid
flowchart LR
A[Input] --> B[Process] --> C[Output]

DSH 会将其渲染为代码块；该插件会通过以下功能对其进行增强：

- 源码 / 图表 切换 — 在 Mermaid 源码和渲染后的 SVG 之间切换。
- 重渲染 — 强制重新渲染（在流式传输或 CDN 出现问题时很有用）。

主题更改（设置 → 外观）会使用匹配的 Mermaid 主题重新渲染所有代码块。

工作原理

| 文件 | 作用 |
|---|---|
| package.json | 声明 dsh.client.platform = "web" 和 ./client 导出。./package.json 子路径导出是必需的，因为 DSH 通过 require.resolve('/package.json') 解析插件。 |
| lib/index.js | 宿主端部分（ESM，空操作）。DSH 的 Cordis 加载器需要具名的 name/inject/apply 导出；它在宿主端不执行任何操作，因为所有工作都在浏览器端完成。 |
| lib/client.js | 浏览器端部分：通过 window.__ModuleLoader__.load({id, factory}) 注册自身，注入样式，扫描 .md-code-block 行以查找 mermaid 信息字符串，并为流式代码块安装 MutationObserver。 |
| install.sh | 将包复制到 web 配置文件中，并修补 cordis.patch.yml。 |

该插件通过读取 DSH 横幅中的 .infostring 文本来检测 Mermaid 代码块
（而不是依赖 code.language-mermaid），因为 DSH 使用 Shiki，而 Shiki
可能不会为其未捆绑的语法添加标准语言类。它还会回退到
code[class*='language-mermaid'] 以实现向前兼容。

要求

- DSH >= 0.1.0-rc.6（已在 rc.6 上测试）。
- 首次渲染时需要访问 cdn.jsdelivr.net 的网络连接（之后 Mermaid 会被
浏览器缓存）。若要将其本地化，请将 lib/client.js 中的 MERMAID_CDN
更改为本地 URL。

开发

浏览器文件是纯 JavaScript；无需构建步骤。编辑 lib/client.js，然后：

Re-sync into the profile
bash install.sh
Restart dsh web (DSH's client-hmr plugin is disabled in the default web
profile, so file changes are not picked up automatically).

如果你从源码检出目录运行 DSH，使用 pnpm run dev:web 并
重新启用 client-hmr，则对 lib/client.js 的编辑会热重载，无需重启。

卸载

1. 从 ~/.dsh/profiles/web/cordis.patch.yml 中移除该代码块。
2. rm -rf ~/.dsh/profiles/web/node_modules/dsh-plugin-mermaid。
3. 重启 dsh web。

许可证

MIT © lj970926