Introduction

The philosophy of DSH is “everything is a plugin”. In a DSH Web session, if an agent returns a Mermaid code block, the common practice is to copy the code block to an external Mermaid rendering tool to view it. dsh-mermaid-image-preview provides a direct preview for this step: when a chat message contains a mermaid fenced code block, it renders the chart into an image displayed within the chat.

It is maintained by baconbao under the MIT license. The plugin introduced here is a community plugin, not equivalent to the official app store; if browsing plugins from the community directory, the community directory is an independent site with no official affiliation to DeepSeek / Huanfuan.

What is this

baconbao/dsh-mermaid-image-preview is a DeepSeek Harness Plugin that renders Mermaid charts into images within a DSH Web chat session.

It mounts to conversation.chat.turnTail (chain slot, additive, never shadows shipped UI). The rendering strategy is “local renderer first”; if local rendering is disabled, or if a fallback is enabled after local rendering fails, an external or self-hosted rendering engine can be used. The plugin supports 14 diagram types out of the box.

Core Features

  • Renders Mermaid syntax into an image preview when a DSH Web chat message contains a mermaid fenced code block.
  • Local rendering takes priority; external or self-hosted rendering services can be configured as a fallback.
  • Adjust runtime settings via the UI setting card without restarting.
  • Mount point is conversation.chat.turnTail, chain slot, additive, never shadows shipped UI.
  • Charts are displayed as thumbnails; clicking zooms in place, and clicking again zooms out.
  • Light/dark themes automatically switch to follow the UI.
  • Supports 14 diagram types out of the box.

Installation and Enabling

First install, then restart, then trigger the preview.

  1. Install the latest release:
npx @deepseek-ai/dsh plugin --profile web add github:baconbao/dsh-mermaid-image-preview#latest

  1. After installation, restart dsh web.

  2. In a DSH Web session, have the agent output a Mermaid chart, for example:

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

After the above steps, the Mermaid fenced code block in the chat message will appear as an image preview.

Please note that starting from v0.2.0, the plugin/package ID changed from dsh-mermaid-image-preview to @baconbao/dsh-mermaid-image-preview.

Configuring Render Fallback

By default, enableLocalRender is true, using local rendering. To use an external rendering service or a self-hosted rendering service, edit the profile’s cordis.patch.yml and configure id as ui-dsh-mermaid-image-preview:

- id: ui-dsh-mermaid-image-preview
  config:
    enableLocalRender: true
    fallbackRenderUrl: https://mermaid.ink
    enableFallback: false

Configuration options are as follows:

  • enableLocalRender: Defaults to true. When set to false, it always uses the fallback server, and enableFallback will be ignored.
  • fallbackRenderUrl: The fallback render server, defaulting to https://mermaid.ink.
  • enableFallback: Use the fallback server when local rendering fails, default is false.

After modifying these profile patch settings, you need to restart dsh web. If you are only adjusting the plugin’s runtime settings, you can also do so in the UI setting card without restarting.

Use Cases and Considerations

Suitable for developers who frequently view Mermaid charts in DSH Web and wish to reduce the steps of copying code to external rendering tools.

Before installation, you need to check the plugin source code and license; the license for this plugin is MIT. The plugin runs under the permissions of the current dsh process, so it is not recommended to directly install unreviewed plugins. If configuring a fallback service, you also need to ensure that fallbackRenderUrl points to a trusted service.

Conclusion

The value of dsh-mermaid-image-preview lies in turning Mermaid code blocks from “needing to leave the chat to copy and render” into “direct preview within the chat”, while retaining the ability to switch between local rendering priority and external fallback.

Verified GitHub repository address:

https://github.com/baconbao/dsh-mermaid-image-preview