前言¶

在 DeepSeek Harness（DSH）Web 聊天界面中，Markdown 中的围栏代码块通常以纯文本形式展示。对于流程图、时序图等场景，直接查看代码或手动截图效率较低。dsh-web-mermaid 插件解决了这一问题，它能在对话结束后自动将 Mermaid 代码渲染为可交互的 SVG 图表。

插件介绍¶

dsh-web-mermaid 是一个 DeepSeek Harness Web 插件，由 vtxf 维护，基于 MIT 许可证开源。它通过纯插件方式运行，无需修改 DSH 核心源码，主要负责将聊天消息中的 ```mermaid 代码块自动转换为 SVG 图表。

安装与启用¶

使用 DSH 官方插件命令即可完成安装：

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

安装或卸载后，重启 dsh web 即可生效。

核心功能¶

1. 自动渲染：助手回复中的 mermaid 围栏块在消息结束后自动渲染为可交互 SVG 图表（流式传输期间不渲染，避免半截图）。
2. 错误处理：若渲染失败（语法错误或资源缺失），插件会保留原始代码块，并显示错误信息与「重试」按钮。语法错误不会被渲染成无法关闭的错误 SVG。
3. 主题跟随：切换深浅色主题时，已渲染的图表会自动重渲染以适配新主题。
4. 零侵入：插件以纯插件方式运行，不修改 DSH 核心源码。
5. 资源定制：若在页面加载前执行 window.__DSH_MERMAID_ASSET__ = '...'，可覆盖 mermaid 资源地址（默认为同源路由）。

使用示例¶

无需任何额外操作，只需让助手输出 mermaid 代码块，消息结束后图表即可出现。

```mermaid
graph TD
  A[开始] --> B{判断}
  B -->|是| C[继续]
  B -->|否| D[结束]

```

注意事项¶

1. 用户消息不渲染：DSH 当前对用户消息的处理逻辑为纯文本（非 Markdown），因此 mermaid 渲染仅对助手消息生效，这是 DSH 的现状，非本插件缺陷。
2. 流式期间不渲染：图表仅在消息结束后出现，以避免流式输出过程中的半截图问题。
3. 首次加载：首图渲染需先加载内置的 mermaid.min.js（约 3.4MB），之后由浏览器缓存。
4. 离线范围：离线指 mermaid 运行时（插件内置），但图表内容若引用外部图片或链接，仍由内容本身决定是否需要网络。

参考资料¶

• 插件目录：https://www.skillhub.cn/plugins/vtxf/dsh-web-mermaid
• GitHub 仓库：https://github.com/vtxf/dsh-web-mermaid