dsh-plugin-mermaid
by lj970926
DeepSeek Harness web 客户端插件:渲染 mermaid 代码块,图表/源码可切换
DeepSeek Harness web client plugin: render mermaid code blocks with a chart/source toggle.
安装
dsh plugin --profile web add github:lj970926/dsh-plugin-mermaidGitHub 源码安装:首次需按提示配置 allowBuilds 构建授权后重试
安装与环境配置指引、插件开发教程见 DSH 中文社区文档 ↗
安装即在你的机器上以你的权限运行第三方代码——它可读写文件、使用凭据、访问网络,DSH 的工具审批不会为插件代码加沙箱。「检测到 manifest」仅代表发现 dsh.bundle / dsh.plugin 清单,不构成兼容性或安全审查;安装前请审阅源码,不熟悉的插件先在不含密钥的环境试用。
README
目录
A DeepSeek Harness (DSH) web
client plugin that renders ```mermaid code blocks in chat messages, with a
chart ↔ source toggle and live theme switching.
- Mermaid v11 loaded on demand from a CDN (no bundle bloat).
- Follows DSH dark/light theme automatically.
- 500 ms debounce so streaming tokens don't thrash the renderer.
- Native DSH code-block banner integration: buttons sit right next to the built-in Copy button; source view keeps Shiki highlight and copy.
- Zero build step — the browser entry is hand-written factory-form CJS exactly
as DSH's
client-modulesservice expects.
Install
From GitHub (recommended)
This package ships prebuilt lib/ files and declares dsh.bundle, so it can
be installed directly into the DSH web profile:
dsh plugin --profile web add github:lj970926/dsh-plugin-mermaid
Then restart dsh web and hard-refresh the browser (Cmd+Shift+R).
To pin a revision for reproducibility, append a commit SHA or tag:
dsh plugin --profile web add github:lj970926/dsh-plugin-mermaid#<commit-or-tag>
Because the published files are already in
lib/, this package has nopreparebuild step and does not require pnpmallowBuildsauthorization. If you fork the repository and add a build step, follow DSH's packaging docs and add the package key underallowBuildsin the profile'spnpm-workspace.yamlwhen prompted.
From a local checkout
If you are developing the plugin, install the checkout as a linked bundle:
dsh plugin --profile web add /absolute/path/to/dsh-plugin-mermaid
Legacy copy script
The repository also keeps install.sh for copying files directly into an
existing web profile:
git clone https://github.com/lj970926/dsh-plugin-mermaid.git
bash dsh-plugin-mermaid/install.sh
The script:
- Copies this folder into
$DSH_HOME/profiles/web/node_modules/dsh-plugin-mermaid/(defaults to~/.dsh/profiles/web/...). - Appends an
insertentry to$DSH_HOME/profiles/web/cordis.patch.yml(idempotent).
Then restart dsh web and hard-refresh the browser (Cmd+Shift+R).
Manual install (no script)
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 <<'EOF'
- insert:
- id: dsh-plugin-mermaid
name: dsh-plugin-mermaid
EOF
Prefer
dsh plugin add; it records the bundle in the profile manifest and keeps it enabled across profile updates. Newer DSH releases require the profile'scordis.patch.ymlto parse as a top-level YAML array; if the file has no entries, keep it as[]. The legacy install script normalizes this for you.
Usage
Send any message containing a fenced mermaid block, e.g.:
```mermaid
flowchart LR
A[Input] --> B[Process] --> C[Output]
```
DSH renders it as a code block; the plugin enhances it with:
- 源码 / 图表 toggle — switch between Mermaid source and rendered SVG.
- 重渲染 — force a re-render (useful after streaming or CDN hiccup).
Theme changes (Settings → Appearance) re-render all blocks with the matching Mermaid theme.
How it works
| File | Role |
|---|---|
package.json |
Declares dsh.client.platform = "web" and ./client export. The ./package.json subpath export is required because DSH resolves plugins via require.resolve('<pkg>/package.json'). |
lib/index.js |
Host half (ESM, no-op). DSH's Cordis loader needs named name/inject/apply exports; it does nothing on the host because all work is browser-side. |
lib/client.js |
Browser half: registers itself with window.__ModuleLoader__.load({id, factory}), injects styles, scans .md-code-block rows for mermaid infostrings, and installs a MutationObserver for streaming blocks. |
install.sh |
Copies the package into the web profile and patches cordis.patch.yml. |
The plugin detects Mermaid blocks by reading DSH's banner .infostring text
(rather than relying on code.language-mermaid), because DSH uses Shiki which
may not add the standard language class for grammars it doesn't bundle. It also
falls back to code[class*='language-mermaid'] for forward compatibility.
Requirements
- DSH
>= 0.1.0-rc.6(tested on rc.6). - Network access to
cdn.jsdelivr.neton first render (Mermaid is cached by the browser afterwards). To vendor it, changeMERMAID_CDNinlib/client.jsto a local URL.
Development
The browser file is plain JavaScript; no build step. Edit lib/client.js, then:
# 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).
If you are running DSH from a source checkout with pnpm run dev:web and
re-enable client-hmr, edits to lib/client.js hot-reload without restart.
Uninstall
- Remove the block from
~/.dsh/profiles/web/cordis.patch.yml. rm -rf ~/.dsh/profiles/web/node_modules/dsh-plugin-mermaid.- Restart
dsh web.
License
MIT © lj970926
原始 README: https://github.com/lj970926/dsh-plugin-mermaid/blob/main/README.md ↗
同类插件
查看全部 →
dsh-web-ui-all
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。

dsh-web-ui
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。

dsh-TUI
Claude Code 风格全屏终端 UI:像素鲸鱼顶栏、实时工作状态行、思考流式展开。

DSH-better-sidebar
侧边栏完整工作台:内置文件渲染编辑、终端、Git 与子代理,支持三方插件注册新 Tab。

working-activity
让 agent 的"工作状态行"活过来——实时工具动态与进度、俏皮文案、模型自述、上下文预警。同一套想法,适配两个平台: pi CLI 与 DeepSeek Harness(DSH) 。

deepseek-idesign
可视化设计工作室,支持网站、App 原型、海报、信息卡、报告和杂志的模板创建、元素编辑、选区级 AI 草稿衔接与导出。