Introduction

In the Web chat environment of DeepSeek Harness (DSH), directly displaying flowcharts, architecture diagrams, or sequence diagrams usually relies on external tools. The dsh-mermaid-renderer plugin addresses this pain point by using pure front-end parsing to automatically convert Mermaid code blocks in the chat stream into interactive diagram cards, allowing technical documentation to be previewed without leaving the conversation window.

Plugin Overview

This is a client-side Web plugin maintained by timedomain1. Its core function is to parse and render Mermaid syntax within the DSH chat interface, support multiple diagram types, and provide interactive features such as viewing source code, zooming, and fullscreen mode.

Core Features

  1. Automatic Rendering
    The plugin automatically detects Mermaid code blocks in the chat (starting with ```mermaid) and renders them as diagram cards.

  2. Supported Diagram Types
    Rendering is supported for the following diagram types:

    • flowchart / graph
    • sequenceDiagram
    • classDiagram
    • stateDiagram
    • erDiagram
    • journey
    • gantt
    • pie
    • mindmap
    • timeline
    • C4Context
    • gitGraph

  3. Interactive Operations

    • View Switching: Cards support switching between “Diagram” and “Source” views.
    • Zooming: Supports repeated zooming (0.25x–4x, unlimited steps). Use the scroll wheel inside the card or Ctrl+scroll wheel to zoom.
    • Fullscreen Viewing: Provides an independent fullscreen viewer with cursor-centered scroll wheel zoom range (5%–1000%), supports drag panning, double-click to fit width/100%, and ESC to close.
    • Others: Supports copying source code and horizontal scrolling when content exceeds the container width.

  4. Technical Implementation

    • Lazy Loading: The Mermaid engine is loaded on demand only at the first rendering, reducing initial overhead.
    • Zero Dependencies: No third-party UI framework dependencies on the browser side; uses pure DOM post-processing.
    • Fault Tolerance: If rendering fails, the source view is preserved and a retry prompt is provided.

Installation and Enablement

Prerequisites
* DeepSeek Harness version must be 0.1.0-rc.8 (Web Profile).
* The environment must have pnpm enabled.

Installation Steps
1. Install using the official plugin command:

    dsh plugin --profile web add git+https://github.com/timedomain1/dsh-mermaid-renderer.git

This command automatically handles `dsh.bundle.patch`, so manual downloading or building is not required.

  1. After installation, restart dsh web and refresh the browser page.

  2. Verification: Send a Mermaid code block in the chat and check whether a diagram card is generated automatically.

Usage Examples

Basic Usage
Send a standard Markdown Mermaid code block directly in the chat:

graph TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great!]
    B -- No --> D[Retry]

Advanced Configuration
If you need to use a mirror CDN or local resources, you can override the engine loading address by setting a global variable:

window.__DSH_MERMAID_URL__ = 'https://your-mirror/mermaid.min.js'

Notes and Use Cases

  • Network Requirements: The Mermaid engine relies on network loading (fetched from a CDN by default), so the plugin cannot render properly in offline environments.
  • Offline Deployment: For offline environments, mermaid.min.js must be inlined into the plugin’s loading logic (located in lib/client.js).
  • Permission Scope: The plugin runs within the Web Profile permissions of the DSH process and does not affect other parts of the system.
  • Compatibility: The plugin has no build step; the precompiled Bundle can run directly.

Conclusion

dsh-mermaid-renderer provides DSH users with a lightweight, zero-dependency diagram rendering solution. For developers who frequently need to verify architecture diagrams, flowcharts, or sequence diagrams during conversations, this is a practical tool. For more details and source code, refer to the plugin directory or GitHub repository.