Introduction

In DSH Web chat, models sometimes use Mermaid code blocks to describe flows, sequences, states, ER diagrams, Gantt charts, and pie charts. The code blocks themselves can preserve structure, but reading the raw source code directly is less intuitive than viewing the graphical representation. dsh-web-mermaid is a DSH Web plugin used to render Mermaid code blocks in chat offline into SVG flowcharts, while preserving the code view and viewing capabilities.

What is it

dsh-web-mermaid is maintained by demo007x and is licensed under MIT. It renders Mermaid code blocks from DSH Web chat messages into SVG images, displaying the image view by default, but can also switch back to the source code view with syntax highlighting.

Core Features

  • Render Mermaid code blocks to SVG flowcharts offline
  • Built-in Mermaid runtime, no dependency on online CDN
  • Click image to zoom in/out, support mouse left-click drag to pan
  • Switch between code view and image view
  • Built-in lightweight tokenizer for syntax highlighting of Mermaid source code
  • Automatically re-render following DSH light / dark themes
  • Supports Mermaid 11 diagram types such as flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram, gantt, pie, etc.

Installation and Enablement

  1. Install to the web profile via dsh plugin:
dsh plugin --profile web add github:demo007x/dsh-web-mermaid
  1. Restart dsh web after installation to take effect:
dsh web

Typical Usage

Write Mermaid code blocks directly in the chat, and the plugin will render the code blocks into flowcharts. For example:

```mermaid
flowchart TD
    A[开始] --> B{是否通过?}
    B -- 是 --> C[结束]
    B -- 否 --> D[重试]
    D --> B
```

After rendering, you can perform the following operations:

  1. Display image view by default.

  2. Click image or the zoom button to open the modal overlay; you can use buttons to zoom and use the mouse left-click to drag for panning.

  3. Switch to code view to view the Mermaid source code with syntax highlighting; the copy button remains available.

Usage Notes

  • Rendering happens inside the client browser; large images may occupy a certain amount of memory.
  • If the Mermaid source code fails to render, the plugin will preserve the source code and display a rendering failure message.
  • When switching DSH light / dark themes, already rendered charts inside the page will be regenerated.
  • SVG is injected inline; interaction events such as node clicks are not bound by default.
  • The plugin runs with the permissions of the current dsh process; it is recommended to check the source code, dependencies, and license before installation. This article has verified the license as MIT.

Links

The verified information does not provide a directory page URL. The GitHub repository is:

https://github.com/demo007x/dsh-web-mermaid