Directly previewing charts such as Mermaid flowcharts and sequence diagrams in the DeepSeek Harness (DSH) Web interface is currently a capability that developers need to realize through plugin extensions. The dsh-mermaid plugin is maintained by MrmoLabs. Its core value is to directly render Mermaid fenced code blocks in Markdown into SVG-based visual diagrams and provide a toggle view between code and diagram.

This plugin bundles the Mermaid 11.17.0 runtime and requires no external CDN. It supports streaming responses, dark mode, full-screen viewing (with zoom, panning, reset, and fit-to-window support), and SVG export. It uses strict Mermaid security mode and automatically falls back to source code display when rendering fails, ensuring page stability.

Core Features

  • Diagram rendering: Supports rendering fenced code blocks marked with mermaid, mermaidjs, and mmd.
  • Interactive controls: Provides a “Code/Diagram” toggle button. Diagrams support full-screen viewing, with built-in zoom, panning, reset, and fit-to-window features.
  • Export and localization: Supports exporting rendered SVG diagrams as standalone files. UI text supports Simplified Chinese or English and automatically follows the page language.
  • Fault tolerance: Uses Mermaid’s securityLevel: strict mode. If rendering fails, it automatically falls back to source code display and suppresses Mermaid’s built-in error SVG icon.
  • Performance and security: Rendering is executed through a serial queue to avoid blocking the page. The size of a single diagram is limited to 50,000 characters or 2,000 lines.

Installation and Activation

Run the following command in a terminal to install the plugin. After installation, restart DSH Web or refresh the page.

dsh plugin --profile web add -w dsh-mermaid

If the global dsh command is not configured locally, you can invoke it using npx:

npx.cmd --yes @deepseek-ai/dsh plugin --profile web add -w dsh-mermaid

Typical Usage

Enter Markdown text containing a Mermaid code block in the conversation. The plugin automatically detects it, injects the rendering toolbar, and opens the diagram view by default.

```mermaid
flowchart LR
  A[Code] --> B[Diagram]

```

Notes and Use Cases

  • DSH developer preview status: DSH is currently in the developer preview stage, and the plugin may be subject to breaking compatibility changes with future versions.
  • Security restrictions: The plugin uses Mermaid’s securityLevel: strict, which means some non-standard Mermaid syntax may be rejected for rendering.
  • Single-diagram limit: If a single diagram exceeds 50,000 characters or 2,000 lines, the plugin will refuse to render it.
  • Development dependencies: The plugin development environment requires Node.js 22.19 or later, but regular users do not need this environment to install the plugin.

This plugin is suitable for scenarios that require visually presenting static diagrams such as architecture diagrams, flowcharts, and sequence diagrams in a Web interface. It improves the readability of technical documentation while maintaining integration with the existing DeepSeek Harness Web interface.

Plugin directory: SkillHub
Source code: GitHub