dsh-mermaid-preview

In day-to-day dsh Web usage, conversations, trajectories, plan reviews, and summaries all flow through Markdown rendering, yet Mermaid fenced code blocks remain nothing more than raw text. dsh-mermaid-preview fills that gap: without touching a single line of dsh source code, it uses a DOM observer to detect every mermaid fence and render it as a clean SVG diagram, so one integration covers every MarkdownText view.

The plugin supports 11+ diagram types including flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, gantt, pie, erDiagram, journey, mindmap, gitGraph, and timeline. It follows dsh light and dark themes with live redraws, preserves the original copy button, and adds a convenient show-source / show-diagram toggle. When the CDN is unreachable or the syntax is invalid, it degrades gracefully back to a code block with a hint, and on unmount all injected styles and listeners are removed cleanly. There are no runtime dependencies, no data collection, and the security level is strict.

It is ideal for developers and architects who describe system architecture, API sequences, data flows, or project schedules with Mermaid diagrams inside dsh. Whether asking the AI to generate a flowchart to untangle module dependencies or pasting a gantt chart to align milestones during a plan review, the diagram renders the moment the message lands, with no external editor required.