前言¶
在 DeepSeek Harness (DSH) 的 Web 聊天环境中，直接展示流程图、架构图或时序图通常需要依赖外部工具。dsh-mermaid-renderer 插件解决了这一痛点，它通过纯前端解析，将聊天流中的 Mermaid 代码块自动转换为可交互的图表卡片，无需离开对话窗口即可预览技术文档。
插件简介¶
这是一个由 timedomain1 维护的客户端 Web 插件。它的核心作用是在 DSH 的聊天界面中解析并渲染 Mermaid 语法，支持多种图表类型，并提供查看源码、缩放、全屏等交互功能。
核心功能¶
-
自动渲染
插件会自动检测聊天中的 Mermaid 代码块（以 ```mermaid 开头），将其渲染为图表卡片。 -
支持的图表类型
支持以下图表类型的渲染：- flowchart / graph
- sequenceDiagram
- classDiagram
- stateDiagram
- erDiagram
- journey
- gantt
- pie
- mindmap
- timeline
- C4Context
- gitGraph
-
交互操作
- 视图切换：卡片支持在“图表”和“源码”视图之间切换。
- 缩放：支持重复缩放（0.25x–4x，步数不限），在卡片内滚动滚轮或使用 Ctrl+滚轮可进行缩放。
- 全屏查看：提供全屏独立查看器，光标为中心的滚轮缩放范围（5%–1000%），支持拖拽平移、双击适配宽度/100%、ESC 关闭。
- 其他：支持复制源码、水平滚动超出容器宽度。
-
技术实现
- 懒加载：Mermaid 引擎仅在首次渲染时按需加载，减少初始负担。
- 零依赖：浏览器端无第三方 UI 框架依赖，使用纯 DOM 后处理。
- 容错：渲染失败时保留源码视图并给出重试提示。
安装与启用¶
前置条件
* DeepSeek Harness 版本需为 0.1.0-rc.8 (Web Profile)。
* 环境需启用 pnpm。
安装步骤
1. 使用官方插件命令安装：
dsh plugin --profile web add git+https://github.com/timedomain1/dsh-mermaid-renderer.git
该命令会自动处理 `dsh.bundle.patch`，无需手动下载或构建。
-
安装完成后，重启
dsh web并刷新浏览器页面。 -
验证：在聊天框发送一个 Mermaid 代码块，检查是否自动生成了图表卡片。
使用示例¶
基本用法
直接在聊天中发送标准的 Markdown Mermaid 代码块：
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Retry]
高级配置
如果需要使用镜像 CDN 或本地资源，可以通过设置全局变量覆盖引擎加载地址：
window.__DSH_MERMAID_URL__ = 'https://your-mirror/mermaid.min.js'
注意事项与适用场景¶
- 网络要求：Mermaid 引擎依赖网络加载（默认从 CDN 获取），因此插件在离线环境下无法正常渲染。
- 离线部署：对于离线环境，需将
mermaid.min.js内联到插件的加载逻辑中（位于lib/client.js）。 - 权限范围：插件运行在 DSH 进程的 Web Profile 权限内，不会影响系统其他部分。
- 兼容性：该插件无构建步骤，预编译的 Bundle 即可直接运行。
结语¶
dsh-mermaid-renderer 为 DSH 用户提供了一个轻量级、零依赖的图表渲染方案。对于需要频繁在对话中确认架构图、流程图或时序图的开发者而言，这是一个实用的工具。更多细节和源码可查阅插件目录或 GitHub 仓库。
