前言¶
在对话中插入 Mermaid 图表是常见需求。现有方案要么在对话中内联渲染，要么需要手动复制到外部工具查看。DSH（DeepSeek Harness）本身不提供图表渲染能力，也没有在聊天流中插入渲染点的机制。dsh-mermaid-panel 通过注册一个侧边栏页面类型，扫描对话中的 Mermaid 代码块，将它们在侧边栏中渲染为可缩放、可平移的卡片，从而在不改动对话原文的前提下提供交互式查看。
插件定位¶
dsh-mermaid-panel 是一个 DeepSeek Harness 客户端插件，由维护者 Natsubrei 发布。它将对话中符合 Mermaid 语法的代码块提取到右侧边栏中渲染，每个图表独立缩放和平移，并提供全屏查看与源码复制功能。
核心功能¶
- 注册一个右侧边栏页面类型（
mermaid）与一个引导胶囊，为空侧边栏提供入口。 - 扫描当前对话渲染后的 DOM，识别以 Mermaid 声明开头的代码块，并在侧边栏页面中渲染这些图表。
- 每个图表卡片保留原始源码，提供一键复制。
- 支持卡片内缩放与平移：滚轮以指针为中心缩放，拖拽平移，双击或点击「Fit」恢复默认大小。缩放比例不低于默认大小。
- 提供「Enlarge」按钮打开全屏视图，全屏视图同样支持滚轮、
+/-、Esc与Fit操作。 - 当对话内容发生变化（如重新渲染、流式打字）时，页面会重新扫描并更新图表。
- 不修改 DSH 本体，只使用公开扩展点（
ctx.sidebarRightTabs、sidebar.right.pane.tab、ctx.locale/ctx.slots）。
安装与启用¶
从插件市场安装：
- 在 DSH 中打开「Plugins → Discover → Add index」。
- 输入索引地址：
https://raw.githubusercontent.com/Natsubrei/dsh-mermaid-panel/main/index.json
- 在插件列表中搜索并安装「Mermaid diagrams」。
从本地检出安装：
- 克隆仓库后运行构建脚本：
node build.mjs
- 将构建后的包目录作为 bundle 安装到 Harness profile（例如通过插件管理器的
install_bundle动作）。 - 安装完成后，在右侧边栏选择「Mermaid」入口即可。
典型用法¶
- 在对话中编写 Mermaid 代码块，例如：
graph LR
A[Start] --> B{Is it working?}
B -->|Yes| C[Great]
B -->|No| D[Troubleshoot]
- 打开右侧边栏，在引导页或第一个标签中选择「Mermaid」。
- 侧边栏中会出现该对话中的所有 Mermaid 图表卡片。
- 在卡片上滚动滚轮缩放，拖拽平移，双击或点击「Fit」恢复默认大小。
- 点击「Enlarge」进入全屏视图，继续操作或按
Esc退出。
适用场景与注意¶
适合需要在对话中快速查看、交互式调试 Mermaid 图表的用户。例如在技术方案评审、流程梳理或架构说明时，一边对照原文，一边在侧边栏中缩放、平移与全屏展示。
注意：插件以当前 DSH 进程的权限运行，安装前建议检查源码与许可证。由于插件读取对话的 DOM，若 DSH 改变代码块渲染的 HTML 结构，插件可能需要更新选择器才能正常工作。历史中尚未渲染的部分（如折叠或虚拟化内容）不会被扫描。
结尾¶
dsh-mermaid-panel 将 Mermaid 图表从对话文本中抽离到侧边栏中，提供可缩放、可平移的独立视图，同时保持对话原文不变。你可以通过目录页或 GitHub 仓库获取更多细节：
- 目录页
- GitHub
