AllDSH
EN

待认领 · 小(一个周末) · 更新于 2026-09-17

聊天流里的 Mermaid 渲染器

同一个需求在官方 Discussion 被反复开帖至少 6 次,现有最强实现只有 11 个 Star。一个客户端渲染插件就能吃掉这个缺口。

作者 赤榆 · 维护者与编辑

维护本站目录:逐条核对安装命令与已发布包是否一致、评定验证等级、执行自动扫描,并撰写教程。

让 Agent 画一张流程图,是 DSH 用户最朴素的期待之一:模型输出一段 ```mermaid 代码块,聊天界面把它渲染成图。截至 2026-09-17,官方没有做,社区也没有做好。

需求信号

  • 官方仓库 Discussion #610(16 赞同,2026-08-14):「强烈要求 Mermaid 流程图渲染,Codex 都支持」。这不是一条孤立的帖子——#1065、#1135、#2711、#3346 是同一需求的重复开帖,2026-09-13 的 #6502 标题里直接写着「第 4 次请求」。一个需求被用户反复开帖 6 次,是所有信号里最强的一种。

缺口在哪

索引层(11,838 个仓库,2026-09-16 快照)里名字沾边的只有三个:MrmoLabs/dsh-mermaid(11★)、zerob13/dsh-better-markdown(20★,顺带支持)、omdsh-dev/dsh-genui(439★,重型 GenUI 方案,目标是让 Agent 生成整个 React 界面,不是轻量渲染)。对「我就想让流程图显示出来」的用户来说,等于没有供给。

建议形态

Client UI 插件:在消息渲染管线里拦截 ```mermaid 代码栅栏,替换为渲染后的 SVG/Canvas,保留「查看源码」切换。

实现要点

  • 注册 Web Client 的消息渲染扩展点;官方文档 docs/subsystems/slots.md 与 web-client.md 是入口。
  • mermaid.js 走按需动态 import,不要进首屏 bundle——这是性能红线,也是审核时会看的点。
  • 渲染失败时降级为原始代码块并给出错误位置,绝不让一条坏图弄白整个会话。
  • 顺手支持 graph/sequence 之外的常用类型前,先把 mermaid 本身做稳。

最小可行版本

只支持 mermaid 一种语法 + 明暗两套主题跟随界面。一个周末足够。

风险与边界

mermaid 渲染不受信内容有 XSS 前科,必须开 strict 安全模式并把渲染结果 sandbox 化;这条做不对,上架审核过不了。

FAQ

为什么官方一直不做?

从 Discussion 看官方精力在核心循环与稳定性上,渲染类需求被默认留给了插件生态——这正是插件生态存在的意义。

和 dsh-genui 有什么区别?

GenUI 的目标是让 Agent 现场生成可交互界面,是重型方案;这里的需求只是「把代码块渲染成图」,轻量、可预期、覆盖 95% 的日常诉求。两者不冲突。

ESC

输入关键词搜索索引,索引由 Pagefind 在部署时生成。