dsh-mermaid-image-preview

dsh-mermaid-image-preview

A DeepSeek Harness Plugin for Previewing Mermaid Diagram Images

Preview mermaid syntax as images via local rendering in DSH Web when the chat message contains a mermaid fenced code block (```mermaid or ```mmd ).

Features and how it works

• Preview mermaid diagrams by rendering images directly!
• Local renderer first! If it fails, it can fall back to an external or self-hosted rendering engine by configuring a fallback server.
• Setting card: you can adjust runtime settings in the UI - no restart needed.
• Mount point: conversation.chat.turnTail (chain slot, additive - never shadows shipped UI).
• Thumbnail display: the diagram renders as a thumbnail; click to enlarge in place, click again to shrink back (same element toggles, no popup).
• Light/dark themes follow the UI automatically.

Support diagram types

The plugin renders diagrams locally with a built-in renderer. It supports 14 diagram types out of the box.

Rendered locally: flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, pie, journey, gitGraph, requirementDiagram, timeline, quadrantChart, packet-beta, xychart-beta

Expand: gantt, mindmap, block-beta, sankey-beta, architecture-beta, zenuml, C4Context

[!NOTE] You can enable the fallback to render expanded types — see Configuration below.

Installation

Installation from github

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

### 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

Installation from source code

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

[!IMPORTANT] Restart dsh web after installing.

Configuration

Change runtime settings on setting card

The Plugins settings page (Settings > Plugins) shows a Mermaid image preview card where you can adjust plugin's runtime settings directly - no restart needed. Values are stored in localStorage and applied immediately across all sessions.

Change render server by profile patch

Diagrams are rendered locally by default. To use your own render server or enable the external fallback, edit the profile's cordis.patch.yml (e.g. ~/.dsh/profiles/web/cordis.patch.yml):

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

• enableLocalRender: render locally (default true). Set false to always use the fallback server (enableFallback is ignored).
• fallbackRenderUrl: fallback render server (default https://mermaid.ink).
• enableFallback: use the fallback server when local rendering fails (default false).
• Restart dsh web after changing these settings.
• To host your own fallback render server, see https://github.com/jihchi/mermaid.ink for the details.

Uninstallation

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

[!NOTE] Since v0.2.0 the plugin/package id is changed from dsh-mermaid-image-preview to @baconbao/dsh-mermaid-image-preview.

Test

Ask the agent to produce:

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

---

Author

baconbao, vibe coding with deepseek ai

License

MIT