Mermaid 图表渲染 shinelon/dsh-mermaid-plugin

dsh-mermaid-plugin

一个 DeepSeek Harness (DSH) 客户端插件，可将聊天消息中的功能特性

- 自动检测 —— 通过代码块横幅或首个有效行匹配（跳过前导空行、%% 注释和 YAML frontmatter）在聊天记录中查找 mermaid 代码块。
- 20 种图表类型 —— 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。
- 图表 / 源码切换 —— 原始代码块始终可访问；仅当渲染后的图表就位时，宿主源码才通过 CSS :has() 隐藏。
- 主题跟随 —— 当 DSH 深色主题属性变化时，重新初始化 mermaid（dark / default）并重新渲染。
- 错误回退 —— 损坏的图表会保持源码可见，并显示 mermaid 错误信息，而不是吞掉内容。
- 严格净化 —— mermaid 以 securityLevel: "strict" 在透明背景上运行。
- 增量渲染 —— 经防抖处理的 MutationObserver 扫描变更；未更改的代码永不重新渲染；当代码块消失时，过期的渲染面会被清理。

安装

- 从 dsh-market 插件市场一键安装（设置 → 插件市场），或
- 从 GitHub 使用 dsh plugin add 添加此仓库。

需要 DSH Web。无需构建步骤，也没有 npm 依赖——client.js 是预构建的打包文件（mermaid 11.17.2 加上插件胶水代码）。

工作原理

package.json (dsh.bundle.patch) ──► cordis.patch.yml ──► 宿主 bundle 中的模块 "mermaid-chat"
│
└─ dsh.client: platform web · immediately · 注入 conversation UI + locale │ └─ client.js ──► window.__ModuleLoader__.load({ id, factory }) │ └─ apply(ctx): MutationObserver ──► 检测 ──► 懒加载 mermaid ──► 渲染 SVG

- 宿主侧（index.js）按协议是一个空的 apply()；所有渲染都位于客户端侧。
- UI 字符串通过注入的 locale 服务解析，并带有内置的中英文回退字典。
- 插件销毁时会断开观察器、移除注入的样式表以及每个渲染面元素。

仓库结构

| 文件 | 类型 | 用途 |
| package.json | 手写 | 插件清单：exports、dsh.bundle.patch、dsh.client 选项 |
| index.js | 手写 | 宿主侧入口，空的 apply() |
| client.js | 预构建（约 3.4 MB） | mermaid 11.17.2 bundle + 插件逻辑（注册块位于文件末尾） |
| cordis.patch.yml | 手写 | 插入模块 mermaid-chat 的 bundle 补丁 |
| locale/zh.json、locale/en.json | 手写 | 插件元数据（标题/描述） |
| icon.svg | 手写 | 插件图标 |
| AGENTS.md | 手写 | 面向代理和开发者的仓库指南 |

开发

- 不要手动重新格式化 client.js —— 它是构建产物；其源项目不属于本仓库。
- 静态检查（不存在测试/lint 脚本）：node --check index.js && node --check client.js
- 有关架构说明、约定和手动验证清单，请参阅 AGENTS.md。

许可证

MIT