Mermaid 图表渲染 yichangyaoyue/dsh-client-ui-mermaid

@moyiyaoyue/dsh-client-ui-mermaid

纯客户端 dsh 插件，把 Mermaid 围栏代码块（

功能

- 监听会话 DOM，找出语言为 mermaid 的 md-code-block 元素。
- 用 Mermaid 引擎把每个代码块渲染成 SVG，替换掉纯代码正文，同时保留复制按钮和 源码 / 收起 源码切换开关。
- DSH 明暗主题切换时重新渲染图表。
- 图表渲染失败时，回退成内联错误提示（并保持源码可见）。

工作原理

- 包声明了 dsh.client.platform = "web"，因此 client-modules 宿主扫描会把 lib/client.js 作为 /plugins/@moyiyaoyue/dsh-client-ui-mermaid/client.js 提供，并列入 window.__DSH_BOOT__。
- 浏览器 bundle 在 document.body 上注册 MutationObserver，首次使用时才惰性执行内置的 Mermaid 引擎。

Mermaid 引擎来源

Mermaid v11 引擎内置在 lib/client.js 里，所以图表渲染完全离线可用——不会发起网络请求。作为防御性回退（万一内置副本执行失败），插件会按顺序尝试这些 CDN URL：

1. https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js
2. https://unpkg.com/mermaid@11/dist/mermaid.min.js

在插件生效前，把 window.__DSH_MERMAID_SRC__ 设为 URL 字符串或候选 URL 数组，即可覆盖回退地址。

Mermaid 在浏览器中以 securityLevel: "strict" 运行，因此不可信的图表文本无法向页面注入 HTML。

重新构建

一步完成内置 bundle 的重新构建与重新安装（在仓库根目录执行）： powershell powershell -ExecutionPolicy Bypass -File .\rebuild.ps1

构建源码位于 build/ 下（client.template.js、build.js，以及下载的 mermaid.min.js）。

安装

从 npm 安装： powershell
dsh plugin --profile web add @moyiyaoyue/dsh-client-ui-mermaid

本地开发时，也可以从同一磁盘上的检出目录安装： powershell
dsh plugin --profile web add "file:../../plugins/dsh-client-ui-mermaid"

由于这是纯客户端插件（没有声明 dsh.bundle），还必须把它注册为配置档 cordis.patch.yml 里的 loader 条目： yaml
- insert:
- id: client-ui-mermaid
name: '@moyiyaoyue/dsh-client-ui-mermaid'

安装后重启 dsh web（或重启配置档），然后刷新浏览器。