前言¶

在 DeepSeek Harness (DSH) 中，.mmd 文件通常以纯文本形式展示，聊天消息里的 ```mermaid 代码块也只显示语法高亮，缺少直观的图表预览。这在使用 Mermaid 绘制架构图或流程图时，需要频繁在编辑器和外部工具间切换。

dsh-plugin-mermaid-preview 插件接管了 DSH 客户端中这两个位置的渲染逻辑，将文本图表转换为可视化的矢量图。

插件介绍¶

这是一个为 DeepSeek Harness 客户端开发的预览插件，由 huiyeo 维护。它通过扩展点注册文件预览和 Markdown 代码块渲染，利用 Mermaid 11 在本地浏览器中生成图表。

核心功能¶

插件通过以下方式实现图表渲染：

1. 文件预览：注册了 .mmd 和 .mermaid 文件的后缀，在右侧文档查看器中直接展示图表。
2. 聊天代码块：注册 mermaid 语言到 Markdown fence registry，使聊天消息中的代码块渲染为图表。
3. 渲染引擎：内置 Mermaid 11，支持 flowchart、sequence、class、state、entity-relationship、gantt、pie、git graph、mindmap、timeline、quadrant、requirement、sankey、block、architecture 等多种图表类型。
4. 主题跟随：渲染逻辑会采样 DSH 的浅色/深色主题，并在主题切换时自动重新渲染。
5. 缩放控制：支持按视图缩放（使用控件或 Ctrl/Cmd + 滚轮），缩放比例记忆在每个预览标签页中独立保存。
6. 流式传输处理：在聊天中，当代码块内容仍在流式传输时，会保持显示源码，等待传输完成后再渲染，避免出现残缺的图表。
7. 错误处理：如果图表解析失败，会显示源码和具体的错误信息，不会隐藏内容。

安装与启用¶

安装该插件需要 DSH 的 web profile (@deepseek-ai/dsh-web-app)。

执行以下命令安装：

dsh plugin --profile web add dsh-plugin-mermaid-preview

安装完成后，需要重启 dsh web 进程以使插件生效。

使用方式¶

1. 文档预览：在 DSH 的右侧边栏文档查看器中打开 .mmd 或 .mermaid 文件，文件内容将直接渲染为 Mermaid 图表。
2. 聊天消息：在聊天记录中查看包含 ```mermaid 代码块的消息，代码块会显示为渲染后的图表。

注意事项¶

1. Profile 依赖：插件依赖 DSH 的 web profile，需要 @deepseek-ai/dsh-client-ui-sidebar-documentpreview 服务已挂载。
2. 聊天代码块依赖：聊天中的 Mermaid 代码块渲染需要 Harness 提供 ui-primitives 的 registeredFences 接口。在旧版本的 Harness 中，代码块可能仅显示为普通的代码块，插件会记录日志提示，不会导致功能失效。
3. 缩放精度：为了防止渲染模糊，缩放必须对齐设备像素网格。插件在计算 SVG 大小时，确保 width * devicePixelRatio 为整数。
4. 重启生效：修改配置或安装后，必须重启 dsh web 进程才能加载新的插件层。

结尾¶

该插件解决了 DSH 环境下 Mermaid 图表预览的需求，统一了文档侧边栏和聊天消息中的渲染表现。你可以通过 GitHub 或 社区目录 获取源码。