dsh-mermaid-smooth：DeepSeek Harness 默认渲染 Mermaid 围栏

前言¶

DeepSeek Harness (DSH) 的 web UI 提供了插件化扩展能力。当对话内容中包含 Mermaid 图表代码时，通常只以纯文本围栏形式展示。dsh-mermaid-smooth 插件将这一行为修改为默认渲染为 SVG 图表，并提供了丝滑的缩放、平移与切换功能。

是什么¶

这是一个插件，由用户 gitByteFree 维护。它通过将 Mermaid 渲染引擎打包进插件（零 CDN），实现了在 DSH Web 聊天界面中直接查看、交互图表的能力。

核心功能¶

1. 默认渲染为 SVG：助手消息中的 Mermaid 围栏在内容生成完成后，会自动渲染为 SVG 图表。非 Mermaid 的代码围栏不受影响。
2. 丝滑交互：支持光标锚定的滚轮缩放，以及直接拖拽平移。双击图表可自动适应视图。若系统开启“减少动画”偏好，所有缓动效果会被禁用。
3. 独立切换与记忆：每个图表卡片右上角有“图/文案”切换开关。开关状态会持久化存储在 localStorage 中，刷新页面或重新连接后，每个围栏的显示模式会保持上次的设置。
4. 主题跟随与安全：图表会跟随 GUI 的暗黑模式或明亮模式自动重绘。Mermaid 运行在 strict 安全级别，内置了清理脚本，且不包含任何点击处理程序。引擎完全本地打包，离线可用。

安装与启用¶

安装前请确保 DSH CLI 和 Web 环境已安装并运行。

1. 使用 npm 包（推荐）

执行以下命令添加插件：

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

安装完成后，需要重启 DSH Web（dsh web 或相关服务），插件才会生效。

2. 其他安装方式

• 从 GitHub 安装（锁定版本）：

    dsh plugin --profile web add 'github:gitByteFree/dsh-mermaid-smooth#<full-commit-sha>'

• 从本地目录安装：

    git clone git@github.com:gitByteFree/dsh-mermaid-smooth.git
    cd dsh-mermaid-smooth
    dsh plugin --profile web add .

典型用法¶

1. 在 DSH 聊天中输入一段 Mermaid 代码围栏（例如流程图或序列图）。
2. 等待助手消息生成完成，围栏会自动转换为图表。
3. 缩放/平移：使用鼠标滚轮缩放，按住鼠标左键拖拽移动。
4. 适应视图：双击图表区域，将其缩放至适应屏幕大小。
5. 切换模式：点击图表卡片右上角的开关，可独立查看 SVG 图或原始代码。同一消息中的多个围栏可独立切换。

注意事项¶

• 安全性：由于使用了内置的严格安全级别，插件不会执行任何外部代码。
• 兼容性：非 Mermaid 类型的代码块不会被渲染，保持原样。
• 卸载：卸载该插件不会删除已渲染的图表，也不会破坏对话历史，系统会恢复到渲染前的状态。

总结¶

dsh-mermaid-smooth 解决了在 DSH Web 界面中查看 Mermaid 图表交互体验差的问题。它通过本地化引擎、主题跟随和状态记忆，提供了稳定且直观的图表查看方案。

• GitHub: https://github.com/gitByteFree/dsh-mermaid-smooth
• 目录: https://www.skillhub.cn/plugins/gitByteFree/dsh-mermaid-smooth