Introduction

In the DeepSeek Harness (dsh) Web interface, Markdown is the primary text rendering format. Developers often use Mermaid syntax in conversations, traces, plan reviews, or summaries to create diagrams, but without modifying the dsh source code, these fenced code blocks are usually displayed as plain text. The dsh-mermaid-preview plugin takes over the rendering process through the Cordis mechanism, converting static code blocks into visualized SVG diagrams.

Plugin Overview

This is a Cordis client plugin maintained by realguan. Its core purpose is to render mermaid fenced code blocks in Markdown within the dsh Web interface as visual diagrams.

Installation and Enablement

The plugin supports installation with a single command and automatically registers itself as a bundle layer for the web profile.

dsh plugin --profile web add github:realguan/dsh-mermaid-preview

After installation, restart dsh web to enable it.

Core Features

  1. No shell modifications: No changes to the dsh source code are required; a DOM observer automatically takes over mermaid fenced code blocks.
  2. One-command installation: dsh plugin add automatically completes registration and dependency management.
  3. Theme following: It automatically adapts to dsh’s light/dark themes and redraws in real time when the theme is switched.
  4. Preserved interaction: The copy button on the original code block remains available, and a “show source code / show diagram” toggle is added.
  5. Failure fallback: If the CDN is unreachable or there is a syntax error, the code block is retained with a helpful message.
  6. Clean uninstallation: Stopping the plugin removes the injected styles and DOM observer.
  7. Standalone demo: A zero-dependency pure HTML demo page is provided.
  8. Multiple diagram types: Supports flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, gantt, pie, erDiagram, journey, mindmap, gitGraph, timeline, and more.

Usage Instructions

After installation, you can directly use Mermaid fenced code blocks in all views that use MarkdownText rendering (including conversations, traces, plan reviews, summaries, etc.).
Note: Rendering does not occur during streaming output; rendering happens after the message ends.

Security and Dependencies

The plugin security level is strict. It collects no data and has no runtime dependencies. It loads Mermaid 11 through the jsDelivr CDN.

Standalone Demo

If you want to experience Mermaid rendering locally without starting dsh, run the demo command directly:

npm run demo

Conclusion

This plugin addresses the need to view Mermaid diagrams directly in the dsh Web interface without intruding into the dsh core code.