Mermaid 流程图渲染 GongYuanCaiJi/dsh-mermaid

🧜♀️ dsh-mermaid

在 DeepSeek Harness 的 web client 里，把对话中的 dsh-plugin license pi-mermaid upstream

English · 中文

这是一个移植（port）自 pi-mermaid（MIT，Gurpartap Singh）的 DeepSeek Harness 插件。 上游在 Pi 的 TUI 里把 Mermaid 渲染成 ASCII 图；dsh 没有 TUI 渲染器，所以本移植把同一套解析与校验逻辑接到 dsh 的 web client，渲染成 SVG 图。上游文字是英文而受众是中文使用者——「100% 原样复制」规则禁止翻译，这里照实说明。

功能

- 🖼️ 对话中出现 mermaid 围栏（无论用户还是助手发送）时，自动渲染成 SVG 流程图
- ✅ 用 Mermaid 官方 parser 做语法校验，出错时在图下方显示 warning / error
- 📐 支持 graph / flowchart、sequenceDiagram、classDiagram、erDiagram、stateDiagram(-v2)
- 🗜️ 超大代码块（>400 行或 >20000 字符）自动跳过并提示
- 📚 每张图附带可折叠的源码块；/mermaid 命令手动重渲染最后一条助手消息
- 🧠 按 (session, turn) 缓存渲染结果，重复内容不重复计算

效果

对话里的

mermaid
graph TD
Start --> End

会变成一张真正的 SVG 流程图（而不是代码块）。sequenceDiagram、classDiagram 等类型同样支持。

安装

⚠️ 尚未发布到 npm。以下二选一：

- 本地路径：先 npm install 再 dsh plugin add ../dsh-mermaid
- GitHub 源码：dsh plugin add github:GongYuanCaiJi/dsh-mermaid（需要 allowBuilds 允许 prepare 构建）

本地路径安装（装进内置的 web profile，即 dsh 的网页客户端）
cd dsh-mermaid && npm install
dsh plugin --profile web add ../dsh-mermaid
dsh --profile web

或 GitHub 源码安装
dsh plugin --profile web add github:GongYuanCaiJi/dsh-mermaid
dsh --profile web

安装后在 web client 里发送一段包含使用

| 方式 | 说明 |
| 自动渲染 | 对话中出现 mermaid 围栏（用户或助手）即自动渲染 |
| /mermaid 命令 | 手动渲染最后一条助手消息里的 Mermaid 围栏 |

移植说明

- 核心逻辑（围栏提取、类型白名单、哈希缓存、parser 校验、issue 报告）逐行移植自 pi-mermaid@0.3.0（MIT）
- 适配点：dsh 入口形状（{ name, apply }）；ctx.on('session/event') 取代 pi.on('input'/'agent_end')；renderMermaidSVG 取代 renderMermaidAscii（同一个 beautiful-mermaid 包）；TUI 渲染器改为 web client 槽（turnTail slot）
- 上游依赖 beautiful-mermaid 与 Mermaid，本移植保留
- 逐字保留与差异的完整清单见 THIRD_PARTY_NOTICES.md

喜欢这个插件的话，也请给上游 pi-mermaid 一个 star ⭐

许可证

MIT © 2026 Gurpartap Singh (pi-mermaid) · © 2026 GongYuanCaiJi (dsh port)

A DeepSeek Harness plugin that renders 这是对 pi-mermaid（MIT，作者 Gurpartap Singh）的移植版。上游在 Pi 的 TUI 中将 Mermaid 渲染为 ASCII 艺术；dsh 没有 TUI 渲染器，因此本移植版保留相同的解析/校验逻辑，改为在 dsh Web 客户端中渲染 SVG 图表。README 为双语，因为上游文本是英文而受众是中文——“100% 逐字复制”规则禁止翻译，所以此说明直接陈述这一点。

功能特性

- 🖼️ 自动将 mermaid 围栏代码块（来自用户或助手消息）渲染为 SVG 图表
- ✅ 由 Mermaid 官方解析器进行语法校验；警告/错误显示在图表下方
- 📐 支持 graph / flowchart、sequenceDiagram、classDiagram、erDiagram、stateDiagram(-v2)
- 🗜️ 超大代码块（>400 行或 >20000 字符）会被跳过并给出提示
- 📚 每个图表附带一个可折叠的源码块；/mermaid 命令可重新渲染最后一条助手消息
- 🧠 结果按（会话、轮次）缓存；重复内容不会重新渲染

演示

一条包含以下内容的聊天消息

mermaid
graph TD
Start --> End

会变成真正的 SVG 流程图，而不是代码块。sequenceDiagram、classDiagram 等同样如此。

安装

⚠️ 尚未发布到 npm。请任选一种：

- 本地路径：先 npm install，然后 dsh plugin add ../dsh-mermaid
- GitHub 源：dsh plugin add github:GongYuanCaiJi/dsh-mermaid（需要 allowBuilds 以便 prepare 可以构建）

local path (installs into the built-in web profile, the dsh web client)
cd dsh-mermaid && npm install
dsh plugin --profile web add ../dsh-mermaid
dsh --profile web

or GitHub source
dsh plugin --profile web add github:GongYuanCaiJi/dsh-mermaid
dsh --profile web

安装后，在 Web 客户端中发送一条包含使用方法

| 方式 | 说明 |
| 自动 | 聊天中任何 mermaid 围栏代码块（用户或助手）都会自动渲染 |
| /mermaid | 手动渲染最后一条助手消息中的 Mermaid 围栏代码块 |

移植说明

- 核心逻辑（围栏提取、类型允许列表、哈希缓存、解析器校验、问题报告）逐行移植自 pi-mermaid@0.3.0（MIT）
- 适配内容：dsh 入口形态（{ name, apply }）；使用 ctx.on('session/event') 而非 pi.on('input'/'agent_end')；使用 renderMermaidSVG 而非 renderMermaidAscii（同一个 beautiful-mermaid 包）；TUI 渲染器改为 Web 客户端插槽（turnTail）
- 保留上游依赖 beautiful-mermaid 和 Mermaid
- 完整的逐字/差异清单见 THIRD_PARTY_NOTICES.md

如果你喜欢这个插件，也请给上游 pi-mermaid 点个星 ⭐

许可证 MIT © 2026 Gurpartap Singh (pi-mermaid) · © 2026 GongYuanCaiJi (dsh 移植版)