前言¶

DeepSeek Harness（DSH）侧边栏对 Markdown 的默认文档预览会把内容当纯文本展示，mermaid 围栏代码块因此只显示源码，无法在界面里直接看图。对话区同样没有针对围栏语言的独立渲染钩子，助手回复里的 Mermaid 块也只会以代码形式出现。若你在 Harness 里写架构说明、流程图或状态机，需要反复复制到外部工具预览，打断阅读和协作节奏。

下面介绍社区插件 dsh-pele-mermaid（维护者 A-Zee029，分类：客户端）。它在 Web GUI 里用 Pele 将 Mermaid 转为 SVG，覆盖 Markdown 文档预览与聊天记录两种场景，并支持内联预览与全屏平移缩放查看。

这是什么¶

dsh-pele-mermaid 是面向 DeepSeek Harness 的 Mermaid 渲染插件：在 Markdown 文档预览和聊天 transcript 中，把可识别的 Mermaid 源码渲染为可读的内联 SVG，过高图表可折叠为紧凑预览卡片，点击后进入全屏画布（拖拽平移、滚轮缩放、适应图幅 / 适应宽度 / 1:1 / 重置，Esc 关闭）。

插件通过 Cordis patch 注册替代预览实现「Markdown + Mermaid」，并注入客户端 bundle；运行时依赖与 DSH 版本范围见 package.json 中的 engines.dsh（当前包版本 0.2.0，许可证 MIT）。

核心功能¶

文档预览（侧边栏）¶

内置侧边栏预览默认不解析 Mermaid。本插件注册 Markdown + Mermaid 预览，并对 .md、.markdown、.mmd、.mermaid 设为默认方式：

• 语言标记为 mermaid 的围栏块由 Pele 渲染为 SVG，主题取自 DSH 的 --dsw-alias-* token，随明暗主题切换。
• 其余 Markdown 仍走标准 MarkdownText 原语，标题、普通代码块、数学、脚注、图片等行为与原来一致。
• .mmd / .mermaid 整文件按一张图渲染。
• Pele 无法解析时显示带解析信息的错误框；预览头部下拉可随时切回内置 Markdown 渲染器。

聊天记录¶

内置聊天没有围栏级渲染扩展点，插件通过 conversation.chat.turnTail 列表槽挂载组件，监听 transcript DOM：根据 DOM 形态（未高亮的 pre，与已注册语言下 pre.shiki 或高亮 div 的差异）以及 Pele detectType 是否识别为图表，在原地隐藏合格代码块并在其后插入 sibling 承载 SVG。仅改动内联样式与插入的 sibling，不替换整段助手节点视图，以便流式输出、编辑与 React 协调仍正常工作。源码尚未解析完成（例如仍在流式写入）时保持普通代码块，解析成功后再出现图。

• 按列宽适配后高度超过约 420 px 的图：改为 340 px 紧凑预览卡片，保持可读比例，底部渐变与展开提示；普通滚轮仍滚动对话，不被预览拦截。
• 点击卡片经 shell.overlay 打开全屏查看器；初始为 Fit width（上限 100%），较矮的图仍内联 SVG 显示。
• 较矮的图在 transcript 中直接内联渲染；文档预览侧保持内联 SVG 策略。

渲染栈¶

Pele 为无额外运行时依赖、可主题的 Mermaid→SVG 渲染器；客户端 bundle 将 Pele 打入包内，React 与 @deepseek-ai/dsh-client-ui-primitives 解析到 Web shell 静态模块表。

安装与启用¶

安装前确认本机 DSH 运行时满足插件 engines.dsh 范围（资料中为 >=0.2.1-rc.3 <0.3.0，具体以你拿到的 package.json 为准）。插件在 当前 DSH 进程权限 下运行，安装前应自行审阅 GitHub 源码 与 MIT 许可证。

官方 README 给出的安装方式为指向插件包目录添加（不是 github:owner/repo 短名）：

dsh plugin --profile <name> add <path-to-this-package>

若热更新（HMR）未生效，需重启 DSH 或重新加载 Web GUI。

典型用法¶

任意 mermaid 围栏块在 Harness 内由本插件经 Pele 渲染。README 中的示例如下（在 DSH 对话或 Markdown 文件中均可使用）：

```mermaid
flowchart TD
    A["Mermaid code block in chat"] --> B{"detectType recognizes it?"}
    B -- "no" --> C["stays an ordinary code block"]
    B -- "yes" --> D{"taller than ~420 px in column?"}
    D -- "no" --> E["inline SVG in the transcript"]
    D -- "yes" --> F["compact 340 px preview card"]
    F --> G["click to open the fullscreen viewer"]
    G --> H["drag to pan · wheel to zoom · fit / 1:1 / reset"]
```

纯 .mmd / .mermaid 文件打开侧边栏预览时，整文件内容作为一张图渲染。

适用场景与注意¶

适合： 在 DSH Web 界面内阅读含流程图、时序图、状态图等的 Markdown 文档；在对话中直接查看助手输出的 Mermaid，无需外开编辑器或第三方预览站。

注意：

• 依赖 DSH 0.2.x 段运行时，升级主版本前需核对 engines.dsh。
• 聊天区识别依赖 DOM 结构与 detectType，非 Mermaid 或未注册形态的 pre 不会被替换。
• 解析失败时保留错误提示，可手动切回内置 Markdown 预览。
• 社区目录 SkillHub 插件页 为独立生态站点，与 DeepSeek / 幻方无官方从属关系；安装来源以你信任的包路径为准。

结尾¶

dsh-pele-mermaid 把 Mermaid 从「只看源码」变成 Web GUI 内的 SVG 预览与全屏交互，文档与聊天两条路径都覆盖，并尽量不打乱 DSH 既有 Markdown 与流式渲染行为。需要进一步了解说明与截图时，可查看 GitHub 仓库 与 SkillHub 目录页。