genius-alray/dsh-mermaid-render

README excerpt

dsh-mermaid-render Interactive Mermaid diagram rendering for agent messages in the DSH Web UI: mermaid code blocks in the conversation are rendered into interactive diagram cards — zoom, fit-width, fullscreen viewer, and a preview/code toggle — built entirely on official UI primitives and DSW design tokens. When rendering fails, the original code block is preserved and an inline error banner is shown right below it. Features - Auto-render mermaid code blocks — fences with mermaid / mmd info strings in conversation messages become diagram cards automatically (both assistant and user messages). - Zoom / fit-width — viewport-only zoom: the card shell keeps its size, only the diagram inside scales and scrolls. Ctrl/⌘+wheel zooms, the fit button resets to width fit. - Fullscreen viewer — a fixed overlay (product-style mask layer, portal to body): zoom, fit, and close via Esc / mask click / button. - Preview / code toggle — a segmented selector in the card's top-right switches between the rendered diagram and the original mermaid source. - Graceful failure — on a render or loader error the original code block stays visible and a compact inline error banner appears under it; no stray elem…

Category