@dsh-external/dsh-mermaid
Render ```mermaid fences in DSH Web conversation messages as interactive-free SVG diagrams (lazy-loaded, strict security).
安装
$
npx -p @deepseek-ai/dsh dsh plugin --profile web add github:AKS1st/dsh-mermaid说明文档
阅读完整 README ↗dsh-mermaid
在 DSH Web 会话消息中把 ```mermaid 代码围栏渲染为 SVG 图表的独立插件,通过 dsh plugin 安装进 web profile。
工作方式
- Host 半部(
src/index.ts):注册webServer前缀路由/mermaid-dist,从插件自己的node_modules/mermaid惰性提供 UMD 构建,并提供固定的config.json端点。 - Client 半部(
src/client/):监听会话 DOM,把 infostring 为mermaid的围栏渲染为 SVG:- 只处理已定格的围栏(流式输出期间不渲染);
- 首次遇到围栏才惰性加载 mermaid(浏览器缓存一次);
mermaid.render()产出 SVG,替换围栏的主体,语言横幅与复制按钮保留(复制仍复制源码);securityLevel恒为strict,标签经 mermaid 内置 DOMPurify 消毒,且从不绑定点击处理;- 主题跟随 GUI:
theme: auto读取body[data-ds-dark-theme],属性翻转时自动重渲染既有图表。
client 包体积约 10 KB(gzip ~4 KB);mermaid(~700 KB)只在真正出现 mermaid 围栏时才按需加载,不进入 boot 图。
安装
# 方式一:本地目录(先构建)
npm install
npm run build
dsh plugin --profile web add .
# 方式二:从 git 仓库安装(构建在 prepare 脚本里自动执行)
dsh plugin --profile web add github:/dsh-mermaid
# 重启 web 服务使 profile 生效
dsh web
卸载:
dsh plugin --profile web remove @dsh-external/dsh-mermaid
配置
组合包默认生效以下配置:
- insert:
- id: mermaid
name: '@dsh-external/dsh-mermaid'
config:
theme: auto
maxTextSize: 50000
maxEdges: 2000
securityLevel: strict
| 配置项 | 默认值 | 说明 |
|---|---|---|
theme | auto | 图表主题:auto(跟随亮/暗)、default、dark、neutral、forest、base |
maxTextSize | 50000 | 单图文本上限(防超大图拖垮渲染) |
maxEdges | 2000 | 边数守卫 |
securityLevel | strict | 固定为 strict,不接受 loose |
在 profile 的 cordis.patch.yml 里以 或 覆盖即可。