dsh-mermaid

会话里的 Mermaid 代码围栏，从此直接变成能缩放、能拖拽的 SVG 图表。

解决什么问题

DSH 会话里的 Mermaid 代码块只能看到源码，无法直接看图。这个插件把 ```mermaid ` 代码围栏渲染为 SVG 图表：视口驱动渲染（滚动到哪渲染到哪，带 300px 预加载余量），异步队列逐个渲染、渲染间隙让出主线程，长会话也不卡顿；图表主题自动跟随界面亮/暗色，放大浮层支持滚轮缩放与按住左键/中键拖拽平移。

性能与安全同样周到：mermaid 库约 700KB，只在真正出现代码围栏时按需加载，不进入首屏包（client 约 10KB，gzip ~4KB）；securityLevel 恒为 strict，标签经 DOMPurify 消毒、从不绑定点击处理；渲染失败时保留源码块并显示可复制、可一键发给 AI 修复的错误摘要。

核心功能

• 代码围栏转 SVG：```mermaid ` 渲染为 SVG，语言横幅与复制按钮保留（复制仍复制源码）
• 视口驱动渲染：带 300px 预加载余量，滚到哪渲染到哪
• 异步队列渲染：多图逐个渲染，间隙让出主线程，页面不卡顿
• 主题自动跟随：theme: auto 读取亮/暗主题，切换时自动重渲染视口内图表
• 全屏放大浮层：滚轮缩放、按住左键/中键拖拽平移，Esc 或点击背景关闭
• 按需加载：mermaid ~700KB 惰性加载，不进入 boot 图
• 安全渲染：securityLevel 恒 strict，DOMPurify 消毒，不绑定点击处理
• 失败可见化：保留源码块 + 错误摘要，可复制、可一键发 AI 修复

快速上手

dsh plugin --profile web add github:AKS1st/dsh-mermaid
dsh web   # 重启 web 服务使 profile 生效

安装后让 agent 输出 mermaid 图即可，围栏定格后自动渲染。默认配置 theme: auto、maxTextSize: 50000、maxEdges: 2000、securityLevel: strict；在 profile 的 cordis.patch.yml 里用 - set: 或 - update: 覆盖。若 pnpm 提示 ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED，把包加入 profile 的 pnpm-workspace.yaml 的 allowBuilds 后重试。

适合谁

• 经常让 agent 产出流程图的开发者与文档作者
• 需要快速浏览大量 Mermaid 图表的长会话用户
• 在意渲染性能与安全性的 DSH Web 用户