前言¶
在 DSH 里和模型对话时，回复里经常出现 ```mermaid 代码块：流程图、时序图、类图等。默认情况下这些块只是源码，需要复制到外部编辑器或在线工具才能看图，打断阅读节奏。
下面介绍维护者 shinelon 发布的客户端插件 shinelon/dsh-mermaid-plugin。它在 DSH Web 的对话界面里自动识别聊天 transcript 中的 Mermaid 块，就地渲染为 SVG，并保留「图形 / 源码」切换、主题跟随和出错时的源码回退。插件当前在 GitHub 上星标为 0，分类为客户端；生态上 DSH 强调「一切皆插件」，SkillHub 目录页 与 DeepSeek / 幻方无官方从属关系，安装前请自行核对源码与 MIT 许可证。
这是什么¶
dsh-mermaid-plugin（包名 @local/mermaid-chat，manifest 版本 1.0.0）是 DeepSeek Harness（DSH）的 Web 客户端插件：在聊天消息里把 ```mermaid 代码块渲染为图形。服务端侧 index.js 的 apply() 为空，渲染逻辑全部在预构建的 client.js 中完成；无需本地 build，也不依赖 npm 安装依赖——client.js 已内嵌 mermaid 11.17.2 与插件胶水代码。
核心功能¶
自动识别¶
插件在对话 DOM 中扫描 Mermaid 代码块：既看代码块 banner，也会用「首条有效行」匹配（跳过 leading 空行、%% 注释和 YAML frontmatter）。
支持的图类型¶
README 列出的类型包括：flowchart，graph TB/TD/BT/RL/LR，sequenceDiagram，classDiagram，stateDiagram(-v2)，erDiagram，journey，gantt，pie，mindmap，timeline，gitGraph，quadrantChart，requirementDiagram，c4Context，sankey-beta，xychart-beta，block-beta，packet-beta，architecture-beta（共 20 类）。
图形与源码切换¶
渲染后仍可通过切换回到原始代码块；宿主源码在存在已渲染图形时通过 CSS :has() 隐藏，而不是删掉 DOM。
主题跟随¶
监听 DSH 的 dark-theme 属性变化时，会按 dark / default 重新初始化 mermaid 并重绘。
出错回退¶
语法或渲染失败时保留源码可见，并展示 mermaid 的错误信息，避免内容被静默吞掉。
安全与增量渲染¶
mermaid 以 securityLevel: "strict"、透明背景运行。带 debounce 的 MutationObserver 监听 transcript 变化：未改动的代码不会重复渲染；代码块消失时会清理对应的渲染表面。卸载插件时会断开 observer、移除注入样式及所有 surface 元素。
安装与启用¶
插件 仅适用于 DSH Web。官方 README 给出两种方式：
- 在 dsh-market 插件市场一键安装：Settings → Plugin Market。
- 或使用 DSH CLI：README 写明可通过
dsh plugin addthis repository from GitHub 添加本仓库；完整参数以你本机dsh plugin add --help与 DSH 文档为准（资料中未给出带github:owner/repo的固定一行示例，此处不臆造）。
安装后需使用 Web 客户端；manifest 中 dsh.client 配置了 platform: web、immediately: true，并向 @deepseek-ai/dsh-client-ui-conversation 注入脚本与 locale。
典型用法¶
在 DSH 聊天里让模型（或你自己）输出标准 Mermaid fenced 块即可，无需额外配置项——资料中的 package.json 未声明用户可改的插件配置字段。例如流程图：
```mermaid
flowchart LR
A[开始] --> B{判断}
B -->|是| C[处理]
B -->|否| D[结束]
```
发送或收到含上述块的消息后，插件会在对话界面 lazy-load mermaid 并渲染 SVG；你可使用界面上的图形/源码切换查看原文。界面文案通过注入的 locale 服务解析，内置中英文 fallback（locale/zh.json、locale/en.json）。
工作原理（简要）¶
bundle 侧由 package.json 的 dsh.bundle.patch 指向 cordis.patch.yml，向宿主 bundle 插入模块 mermaid-chat。客户端 client.js 经 window.__ModuleLoader__.load 注册，apply(ctx) 内建立 MutationObserver → 检测块 → 懒加载 mermaid → 输出 SVG。
适用场景与注意¶
适合：经常在 DSH Web 里阅读含 Mermaid 的架构说明、流程设计、时序交互的开发者或智能体使用者，希望留在同一窗口内看图。
注意：
- 插件以 当前 DSH 进程权限 在浏览器侧运行；安装前请阅读 GitHub 仓库 源码（尤其预构建的
client.js，约 3.4 MB，勿手改格式化）。 - 仅 Web 平台；非 Web 环境不会加载
client.js注入逻辑。 - 仓库说明不建议手改
client.js（构建产物）；静态检查可用：node --check index.js && node --check client.js（仓库无 test/lint 脚本）。
结尾¶
dsh-mermaid-plugin 把 DSH 聊天里的 Mermaid 从「只能看源码」变成「就地看图、可切回源码、主题与错误行为可预期」，对客户端对话体验是针对性增强。目录与源码：
