Mermaid 图表预览 baconbao/dsh-mermaid-image-preview

dsh-mermaid-image-preview

Awesome DSH Plugin

一个 DeepSeek Harness 插件，用来预览 Mermaid 图表图片

聊天消息里出现 Mermaid 代码围栏（ dsh-mermaid-image-preview

功能与工作原理

- 直接渲染图片，预览 Mermaid 图表！
- 优先本地渲染！ 本地渲染失败时，可以配置 fallback 服务器，回退到外部或自建的渲染引擎。
- 不替换任何内容： 预览加在智能体回复的下方，不会遮挡或改动原始消息。
- 插件页面里的设置：在 Plugins 面板调整插件的运行时设置，无需重启。
- 浅色/深色主题自动跟随界面。

支持的图表类型

插件用内置渲染器在本地渲染图表，开箱即支持 13 种图表类型。

本地渲染： flowchart、sequenceDiagram、classDiagram、stateDiagram、erDiagram、pie、journey、gitGraph、requirementDiagram、timeline、quadrantChart、packet-beta、xychart-beta

需扩展： gantt、mindmap、block-beta、sankey-beta、architecture-beta、zenuml、C4Context

[!NOTE]
开启 fallback 后即可渲染扩展类型，详见下方 配置。

安装

从 github 安装

用 DeepSeek Harness Desktop 安装（desktop 配置档）

在 DeepSeek Harness (Desktop) 里打开 Plugins 面板，点击 + Add plugin 按钮，粘贴下面任一 URL，然后点击 Install 按钮。
markdown
latest release version
https://github.com/baconbao/dsh-mermaid-image-preview
specific version
https://github.com/baconbao/dsh-mermaid-image-preview#<VERSION_TAG|GIT_TAG>
dev version
https://github.com/baconbao/dsh-mermaid-image-preview#dev

[!NOTE]
安装前请确认机器上已装好 Git。

用 DeepSeek Harness WebUI 安装（web 配置档）

bash
latest release version
$ npx @deepseek-ai/dsh plugin --profile web add github:baconbao/dsh-mermaid-image-preview

specific version
$ npx @deepseek-ai/dsh plugin --profile web add github:baconbao/dsh-mermaid-image-preview#<VERSION_TAG|GIT_TAG>

dev version
$ npx @deepseek-ai/dsh plugin --profile web add github:baconbao/dsh-mermaid-image-preview#dev

从源码安装

bash
$ git clone https://github.com/baconbao/dsh-mermaid-image-preview
$ cd dsh-mermaid-image-preview
$ pnpm install
$ dsh plugin --profile web add .

[!IMPORTANT]
安装完成后重启 DSH。

配置

在插件页面修改运行时设置

dsh-mermaid-image-preview_settings

Plugins 面板会在 Installed 下列出这个插件；打开它的页面，配置区块里就是运行时设置——不用重启。
这些值存在 localStorage 里，立即对所有会话生效。

通过配置文件修改渲染服务器

图表默认在本地渲染。想用自己的渲染服务器，或者启用外部兜底，就编辑配置档的 cordis.patch.yml（比如 WebUI 用 ~/.dsh/profiles/web/cordis.patch.yml，Desktop 用 ~/.dsh/profiles/desktop/cordis.patch.yml）： yaml
- id: ui-dsh-mermaid-image-preview
config:
enableLocalRender: true
fallbackRenderUrl: https://mermaid.ink
enableFallback: false

- enableLocalRender：本地渲染（默认 true）。设为 false 就始终使用兜底服务器（此时忽略 enableFallback）。
- fallbackRenderUrl：兜底渲染服务器（默认 https://mermaid.ink）。
- enableFallback：本地渲染失败时使用兜底服务器（默认 false）。
- 改完这些设置后重启 DSH。
- 想自己托管兜底渲染服务器，详见 <https://github.com/jihchi/mermaid.ink>。

卸载

用 DeepSeek Harness Desktop 卸载（desktop 配置档）

在 Plugins 面板打开这个插件的页面，然后点 Uninstall。

用 DeepSeek Harness WebUI 卸载（web 配置档）

bash
$ dsh plugin --profile web remove @baconbao/dsh-mermaid-image-preview

[!NOTE]
从 v0.2.0 起，插件/包 ID 是 @baconbao/dsh-mermaid-image-preview（之前是 dsh-mermaid-image-preview）。

测试

让智能体生成：

graph TD
A[Start] --> B{Success?}
B -->|Yes| C[Done]
B -->|No| D[Retry]

兼容性

| 本插件版本 | 支持的 DSH 版本 |
| v0.4.0 及以后 | 0.1.6-alpha.2 及以后 |
| v0.3.2 及以前 | 0.1.0-rc.6 – 0.1.6-alpha.1 |

作者

baconbao，用 AI 做 vibe coding

许可证

MIT