前言¶
DSH 的理念是「一切皆插件」。在 DSH Web 会话里,如果 agent 返回 Mermaid 代码块,常见做法是复制代码块到外部 Mermaid 渲染工具查看。dsh-mermaid-image-preview 针对这个步骤做了直接预览:当聊天消息包含 mermaid fenced code block 时,把图表渲染成图片显示在聊天里。
它由 baconbao 维护,MIT 许可。这里介绍的插件属于社区插件,不等同于官方应用商店;如果从社区目录浏览插件,社区目录是独立站点,与 DeepSeek / 幻方无官方从属关系。
这是什么¶
baconbao/dsh-mermaid-image-preview 是一个 DeepSeek Harness Plugin,用于在 DSH Web 聊天会话中把 Mermaid 图表渲染成图片。
它挂载到 conversation.chat.turnTail(chain slot, additive, never shadows shipped UI)。渲染策略是 local renderer first;如果关闭本地渲染,或本地渲染失败后启用了 fallback,就可以使用 external or self-hosted rendering engine。插件支持 14 diagram types out of the box。
核心功能¶
- 在 DSH Web 聊天消息包含
mermaidfenced code block 时,将 Mermaid 语法渲染成图片预览。 - 本地渲染优先;可配置外部或自建渲染服务作为 fallback。
- 在 UI setting card 中调整 runtime settings,无需重启。
- 挂载点为
conversation.chat.turnTail,chain slot、additive、never shadows shipped UI。 - 图表以缩略图显示;点击原地放大,再次点击缩小。
- Light/dark themes 跟随 UI 自动切换。
- 支持 14 diagram types out of the box。
安装与启用¶
下面先安装,再重启,再触发预览。
1、安装最新 release:
npx @deepseek-ai/dsh plugin --profile web add github:baconbao/dsh-mermaid-image-preview#latest
2、安装完成后,重启 dsh web。
3、在 DSH Web 会话中让 agent 输出一段 Mermaid 图表,例如:
graph TD
A[Start] --> B{Success?}
B -->|Yes| C[Done]
B -->|No| D[Retry]
经过上面的步骤,聊天消息中的 Mermaid fenced code block 会作为图片预览出现。
需要注意,v0.2.0 起 plugin/package id 从 dsh-mermaid-image-preview 变为 @baconbao/dsh-mermaid-image-preview。
配置渲染 fallback¶
默认情况下,enableLocalRender 为 true,使用本地渲染。如果要使用外部渲染服务或自建渲染服务,编辑 profile 的 cordis.patch.yml,配置 id 为 ui-dsh-mermaid-image-preview:
- id: ui-dsh-mermaid-image-preview
config:
enableLocalRender: true
fallbackRenderUrl: https://mermaid.ink
enableFallback: false
配置项如下:
enableLocalRender:默认为true。设为false时,总是使用 fallback server,并且enableFallback会被忽略。fallbackRenderUrl:fallback render server,默认为https://mermaid.ink。enableFallback:本地渲染失败时使用 fallback server,默认为false。
修改这些 profile patch 设置后,需要重启 dsh web。如果只是调整插件 runtime settings,也可以在 UI setting card 中操作,无需重启。
适用场景与注意¶
适合在 DSH Web 中频繁查看 Mermaid 图、希望减少复制代码到外部渲染工具步骤的开发者。
安装前需要检查插件源码和许可证;本插件许可证为 MIT。插件会在当前 dsh 进程权限下运行,因此不建议直接安装未审查的插件。若配置 fallback 服务,也需要确认 fallbackRenderUrl 指向可信服务。
结尾¶
dsh-mermaid-image-preview 的价值在于把 Mermaid 代码块从“需要离开聊天复制渲染”变成“聊天内直接预览”,同时保留本地渲染优先和外部 fallback 的切换能力。
已核实的 GitHub 仓库地址: