DeepSeek Harness 采用了「一切皆插件」的架构。在 Web UI 中直接渲染 Markdown 中的 Mermaid 图表曾是难点。dsh-mermaid-web 插件解决了这个问题，将围栏代码块转换为可交互的 SVG 图表。
插件定位¶
这是一个 DeepSeek Harness Web UI 插件，由开发者 terrywangcode 维护。它将标记为 mermaid 的围栏代码块渲染为 Mermaid.js SVG 图表，并提供了缩放控制与全屏工作区。
核心功能¶
- 图表渲染：识别 Markdown 中的
mermaid代码块并渲染为 SVG。 - 缩放控制：提供键盘控制的缩放功能，支持 25% 步进，缩放范围限制在 50% 到 300%。
- 全屏工作区：提供全屏工作区，支持适应屏幕、指针居中缩放、拖拽平移、快捷键（F/0/+/-）及 ESC 关闭。
- 热模块替换（HMR）：支持热模块替换，更新插件时无需刷新页面，且能正确清理旧状态。
安装与启用¶
在 DeepSeek Harness 的代码仓库根目录下执行以下命令：
pnpm dsh plugin --profile web add github:terrywangcode/dsh-mermaid-web
pnpm dsh --profile web web
插件构建了浏览器 Bundle，因此从 GitHub 安装无需消费者侧进行插件构建。若需安装特定版本，可在仓库地址后添加 #v0.1.0。
典型用法¶
在 Markdown 文档中使用围栏代码块标记 Mermaid 语法：
```mermaid
flowchart LR
Prompt --> Agent --> Tool
```
启动 Web UI 后，系统会自动识别并渲染这些代码块。渲染成功后，原始代码块会被隐藏并显示生成的 SVG 图表。
工作原理与限制¶
- 依赖 DOM 结构：当前 Harness 未暴露 Markdown 围栏渲染器槽位，因此该插件依赖 DOM 结构（
.md-code-block），通过观察 settled 的元素来工作。 - 严格安全模式：Mermaid 运行在严格安全模式下，禁用了 HTML 流程图标签。
- 错误处理：如果解析失败，原始代码将保留在页面上，并显示紧凑的错误信息。
- 环境要求：依赖 Node.js 22 或更新版本。
总结¶
dsh-mermaid-web 通过 Web UI 插件的形式，解决了 DeepSeek Harness 中直接渲染 Mermaid 图表的需求。它提供了全屏工作区与缩放功能，适合需要在 Web 界面中直接展示架构图、流程图等场景的开发者。
