Introduction

In DeepSeek Harness (DSH), .mmd files are typically displayed as plain text, and ```mermaid code blocks in chat messages only show syntax highlighting, lacking an intuitive diagram preview. This makes it necessary to frequently switch between the editor and external tools when using Mermaid to draw architecture diagrams or flowcharts.

The dsh-plugin-mermaid-preview plugin takes over the rendering logic for these two locations in the DSH client and converts text diagrams into visual vector graphics.

Plugin Introduction

This is a preview plugin developed for the DeepSeek Harness client and maintained by huiyeo. It registers file preview and Markdown code block rendering via extension points, and generates diagrams in the local browser using Mermaid 11.

Core Features

The plugin implements diagram rendering in the following ways:

  1. File preview: Registers the .mmd and .mermaid file extensions and displays diagrams directly in the right-side document viewer.
  2. Chat code blocks: Registers the mermaid language in the Markdown fence registry so that code blocks in chat messages are rendered as diagrams.
  3. Rendering engine: Bundles Mermaid 11 and supports multiple diagram types, including flowchart, sequence, class, state, entity-relationship, gantt, pie, git graph, mindmap, timeline, quadrant, requirement, sankey, block, and architecture.
  4. Theme following: The rendering logic samples DSH’s light/dark theme and automatically re-renders when the theme changes.
  5. Zoom control: Supports zooming per view (using controls or Ctrl/Cmd + mouse wheel), with the zoom ratio remembered and saved independently in each preview tab.
  6. Streaming handling: In chat, while code block content is still streaming, the source code remains displayed. Rendering waits until streaming is complete, avoiding incomplete diagrams.
  7. Error handling: If diagram parsing fails, the source code and specific error information are shown, and the content is not hidden.

Installation and Activation

Installing this plugin requires DSH’s web profile (@deepseek-ai/dsh-web-app).

Run the following command to install it:

dsh plugin --profile web add dsh-plugin-mermaid-preview

After installation is complete, restart the dsh web process to make the plugin take effect.

Usage

  1. Document preview: Open a .mmd or .mermaid file in the right-side document viewer in DSH. The file content is rendered directly as a Mermaid diagram.
  2. Chat messages: View a message in the chat history that contains a ```mermaid code block. The code block is displayed as the rendered diagram.

Notes

  1. Profile dependency: The plugin depends on DSH’s web profile and requires the @deepseek-ai/dsh-client-ui-sidebar-documentpreview service to be mounted.
  2. Chat code block dependency: Rendering Mermaid code blocks in chat requires Harness to provide the registeredFences interface of ui-primitives. In older Harness versions, code blocks may only be displayed as ordinary code blocks. In that case, the plugin logs a notice and does not cause the feature to fail.
  3. Zoom precision: To prevent blurred rendering, zoom must be aligned to the device pixel grid. When calculating the SVG size, the plugin ensures that width * devicePixelRatio is an integer.
  4. Restart required: After making configuration changes or after installation, you must restart the dsh web process to load the new plugin layer.

Conclusion

This plugin addresses the need for Mermaid diagram preview in DSH and unifies the rendering behavior between the document sidebar and chat messages. You can obtain the source code from GitHub or the community catalog.