前言¶

在 DSH Web 聊天里，模型有时会用 Mermaid 代码块描述流程、时序、状态、ER 图、甘特图和饼图等内容。代码块本身能保留结构，但直接阅读源码不如图形直观。dsh-web-mermaid 是一个 DSH Web 插件，用于把聊天里的 Mermaid 代码块离线渲染成 SVG 流程图，并保留代码视图和查看操作。

这是什么¶

dsh-web-mermaid 由 demo007x 维护，许可证为 MIT。它把 DSH Web 聊天消息中的 Mermaid 代码块渲染成 SVG 图，默认展示图片视图，也可以切回带语法高亮的源码视图。

核心功能¶

• 离线渲染 Mermaid 代码块为 SVG 流程图
• mermaid 运行时内置，不依赖在线 CDN
• 点击图片可放大、缩放，支持鼠标左键拖拽平移
• 代码视图和图片视图可切换
• 内置轻量 tokenizer，为 Mermaid 源码提供语法高亮
• 跟随 DSH 浅色 / 深色主题自动重渲染
• 支持 flowchart、sequenceDiagram、classDiagram、stateDiagram、erDiagram、gantt、pie 等 Mermaid 11 图表类型

安装与启用¶

1、通过 dsh plugin 安装到 web profile：

dsh plugin --profile web add github:demo007x/dsh-web-mermaid

2、安装后重启 dsh web 生效：

dsh web

典型用法¶

在聊天里直接写 Mermaid 代码块，插件会把代码块渲染成流程图。例如：

```mermaid
flowchart TD
    A[开始] --> B{是否通过?}
    B -- 是 --> C[结束]
    B -- 否 --> D[重试]
    D --> B
```

渲染后可以进行以下操作：

1、默认展示图片视图。

2、点击图片或放大按钮，打开遮罩弹窗；可以使用按钮缩放，并用鼠标左键拖拽平移。

3、切换到代码视图，查看带语法高亮的 Mermaid 源码；复制按钮仍然可用。

使用注意¶

• 渲染发生在客户端浏览器内，大图可能占用一定内存。
• 如果 Mermaid 源码无法渲染，插件会保留源码并显示一行渲染失败提示。
• 切换 DSH 浅色 / 深色主题时，页面内已渲染的图会重新生成。
• SVG 以 inline 方式注入，节点点击等交互事件默认未绑定。
• 插件会以当前 dsh 进程权限运行，安装前建议检查源码、依赖和许可证。本文已核实许可证为 MIT。

链接¶

已核实资料未给出目录页 URL。GitHub 仓库为：

https://github.com/demo007x/dsh-web-mermaid