genius-alray/dsh-mermaid-render

dsh-mermaid-render

DSH Web 对话 mermaid 渲染插件：把 agent 消息中的 mermaid 代码块自动渲染为可交互图表卡片——缩放、适应宽度、全屏查看、预览/代码切换，全部基于官方组件原语与 DSW 设计 token。渲染失败时保留原代码块并在其下方内联展示错误。

功能特性

- 自动渲染 mermaid 代码块：对话消息中 mermaid / mmd 围栏自动变为图表卡片（助手消息与用户消息均支持）。
- 缩放 / 适应宽度：视口内缩放——卡片外壳尺寸恒定，只有内部图表缩放与滚动；Ctrl/⌘+滚轮缩放，「适应宽度」一键复位。
- 全屏查看器：固定覆盖层（portal 到 body，产品同款遮罩层级），支持缩放、适应、Esc / 遮罩点击 / 按钮关闭。
- 预览 / 代码切换：卡片右上角分段选择器，一键在图表的渲染结果与原始 mermaid 源码之间切换。
- 失败降级：渲染或加载失败时原代码块保持可见，下方出现紧凑的内联错误横幅；页面不残留任何游离元素。
- 主题联动：应用切换亮/暗主题时，图表以 mermaid dark / default 主题自动重渲染。
- 双语 UI：中 / 英文案随应用 locale 切换。
- 原生观感：primitives 的 Pill / Tooltip、composer 同款图标按钮、lucide 风格 SVG 图标、仅使用 --dsw- token。

安装

通过官方 dsh plugin 命令安装：会自动把声明了 dsh.bundle 的包加入 profile 的 dsh.profile.bundles（无需手改 profile）。

dsh plugin --profile web add genius-alray/dsh-mermaid-render

装完重启 dsh web（bundle 层在启动时组合）。

Git 源首次安装若被 pnpm 拦截构建脚本，按提示把 key 加入 profile pnpm-workspace.yaml 的 allowBuilds 后重跑即可。仓库已提交预构建产物 lib/，Git 源安装无需本地构建。

使用

发送包含 mermaid 代码块的消息即可：

mermaid
flowchart TD
A[开始] --> B{有 mermaid 代码块吗?}
B -- 是 --> C[加载 mermaid 渲染器]
B -- 否 --> D[保持普通代码块]
C --> E[渲染为交互图表]
E --> F[工具条: 缩放 / 适应 / 全屏]

代码块渲染为卡片：右下角工具条（放大 / 缩小 / 适应宽度 / 全屏），右上角预览 / 代码切换。语法错误时卡片不渲染：原代码块保留，下方内联显示 "Mermaid 渲染失败" 与解析错误信息。

技术要点

- Bundle 插件（官方形态）：package.json 声明 dsh.bundle.patch: ./cordis.patch.yml；纯 client（dsh.client.platform: web），产物由 dsh-client-modules 服务 /plugins/dsh-mermaid-render/client.js。
- mermaid 不打包：约 3.3MB 的 mermaid 库在首次使用时通过运行时动态 import() 加载 jsDelivr 固定版本 mermaid@10.9.3 的 +esm 构建，插件包本身仅 ~34KB，页面启动零成本。
- 渲染管线：MutationObserver 监听会话滚动容器内的 .md-code-block（infostring 为 mermaid/mmd），在私有隐藏容器中渲染（mermaid 失败路径会在 body 残留巨型 "Syntax error" SVG，私有容器保证页面干净），再把 SVG 挂载为 React 交互卡片。
- 文字保真：SVG 通过自身 width/height 原生矢量缩放（而非 CSS transform），并在卡片内隔离继承排版（font: 13px/1.5 + CJK 字体栈），中文节点标签在 foreignObject 中不溢出、不被裁切。
- 布局稳定：stage 高度在适配时固定，scrollbar-gutter: stable 预留滚动条槽位，clientWidth 恒定，页面无抖动。
- UI 原语：Pill（预览/代码切换）、Tooltip、composer 同款图标按钮、手绘 lucide 风格图标；仅用 --dsw- token，无硬编码颜色。

许可证

MIT