In the plugin ecosystem of DeepSeek Harness (dsh), drawing flowcharts or architecture diagrams often requires frequent switching between code and the visual view. mermaid2aichat-dsh provides a dismissible right-side editing panel, keeps the canvas and Mermaid code bidirectionally synchronized, and allows direct interaction with the Agent.

Plugin Purpose

This is a browser plugin focused on visual editing and bidirectional data flow, maintained by supergameboy. It uses a standalone editor window to address scenarios where you need to repeatedly adjust diagrams and feed them back to the Agent.

Core Capabilities

The plugin includes the following core features:

Layout and UI

  • Right-side panel and full screen: The panel can be toggled via a button at the bottom of the sidebar. The canvas supports full-screen mode to provide more working space.
  • Adaptive layout: After the editor column is inserted into the Shell grid, the chat area automatically shrinks to avoid being obscured. The drag-adjusted width can range from 300 to 1200px, while the chat area width is always kept at 400px or more. Double-click the resize handle to reset the width.
  • Responsive design and dark mode: On screens smaller than 420px, the sidebar is automatically hidden and only the canvas is retained. Independent dark mode is supported.
  • Plugin coexistence: It shares the grid layout with other plugins such as dsh-web-ui without conflicts.

Editor Capabilities

  • Bidirectional synchronization: Canvas editing and Mermaid code editing are synchronized in real time. Changes are committed by blur or Ctrl+Enter.
  • Supported diagram types: flowchart, sequenceDiagram, classDiagram, and erDiagram.
  • Node operations: Supports dragging nodes from the node library, connecting nodes, and using the properties panel, as well as dedicated editors for subgraphs/namespaces/participants.
  • Session isolation and persistence: Multiple tabs are supported. Each tab independently manages its canvas, code, and viewport, and data is persisted to localStorage.

Interaction with the Agent

  • Tool channel: A global tool mermaid_load is registered. When the Agent calls this tool, the diagram is automatically imported as a new tab and the panel is opened.
  • Import from chat: Automatically scans Mermaid code blocks in the conversation, displays the unread count, and provides the “Import from chat” feature.
  • Send back to chat: After editing, click “Send to chat” to insert the code block into the current session.
  • Command reference: Type / in the input box and select the current session’s tab code from the pop-up menu to insert it into your draft.

Installation and Enablement

The plugin is distributed as an npm package and requires no build step.

dsh plugin --profile web add mermaid2aichat-dsh

After installation, dsh web must be restarted. Once the page is refreshed, a “Mermaid Editor” button appears at the bottom of the sidebar.

Typical Usage

  • Agent generates and edits: Tell the Agent: “Draw the flow of XXX as a flowchart and send it to the editor.” After the Agent calls mermaid_load, adjust the diagram in the editor and click “Send to chat.”
  • Reference code: Type / in the input box and select a saved tab code from the pop-up menu.

Suitable Scenarios and Notes

  • Suitable scenarios: Suitable for flowcharts, sequence diagrams, class diagrams, or ER diagrams that require repeated editing and feedback to the Agent.
  • Notes: The plugin communicates directly with dsh and does not modify the dsh source code. It does not depend on MCP, a server, or a VS Code extension. It complements one-time generators such as archify, which are more suitable for generating HTML documents for final presentation.

Conclusion

By providing a visual editing environment and a bidirectional Agent interaction channel, this plugin turns static diagrams into an iterative development tool. For more details, view the GitHub repository or the Skill Catalog.