genius-alray/dsh-mermaid-render
Mermaid diagram renderer for the Web UI conversation: renders mermaid code blocks into interactive cards (zoom, fit-width, fullscreen viewer, preview/code toggle) with official UI primitives, and keeps the original code block with an inline error banner when rendering fails.
Renders Mermaid diagram code blocks in DSH Web UI conversations into interactive diagram cards, built on official UI primitives and DSW design tokens. Fences with mermaid or mmd info strings are auto-rendered (assistant and user messages alike) with viewport-only zoom (Ctrl/⌘+wheel, fit-to-width reset), a fullscreen overlay viewer closable via Esc / mask click / button, and a preview/code segmented toggle that switches between the rendered diagram and the original mermaid source. On a render or loader error the original code block is preserved and a compact inline error banner appears beneath it.
Install
dsh plugin --profile web add genius-alray/dsh-mermaid-renderREADME Install block quoted verbatim (it links the package into the profile and appends the dsh.bundle package to dsh.profile.bundles with no manual profile edits; restart dsh web afterwards). Registry check 2026-09-16: dsh-mermaid-render resolves at 0.1.7 but its registry entry carries no repository field, so npm ownership is disclosed, not asserted — use the README's GitHub-source form.
Compatibility
The README notes that git-source installs may hit pnpm's build-script approval on first run and that the printed hint must be added to the profile's pnpm-workspace.yaml allowBuilds; the repo commits prebuilt lib/, so no local build is required. It renders in the DSH Web UI and is theme-aware (mermaid dark/default themes).
Details
- Repo: genius-alray/dsh-mermaid-render
- Category: UI Enhancements
- Stars: 0
- Version: npm dsh-mermaid-render 0.1.7 (registry-verified 2026-09-16; repo field absent)
- Last push: 2026-08-16
- First seen: 2026-08-16
Recent updates
The README documents the feature surface rather than a release-by-release table; the latest version on the registry when checked on 2026-09-16 was 0.1.7.
FAQ
- How do I install it?
- The README's command is dsh plugin --profile web add genius-alray/dsh-mermaid-render, then restart dsh web so the bundle layer is composed at boot.
- Which code fences get rendered?
- Per the README, fences with mermaid or mmd info strings in conversation messages, in both assistant and user messages.
- What happens if a diagram fails to render?
- The README says the original code block stays visible and an inline error banner appears right below it.