feat: Add copy/export & zoom for rendered Mermaid diagrams #25
Description
Problem
When I render Mermaid diagrams in Markdown-Viewer there is no easy way to copy or export the rendered diagram as an image or to zoom the diagram for inspection. I currently have to copy the diagram source and paste it into an external live editor (e.g., mermaid.live) to export or check it at a higher resolution.
Proposed enhancement
Add a small toolbar on rendered Mermaid diagrams with options:
- Download PNG: Export the rendered diagram as a PNG image.
- Copy image to clipboard: So users can paste the diagram image directly.
- Open/zoom: Open the diagram in a modal or new pane for zooming and panning.
- (Optional) Download SVG: Export the diagram as SVG for vector-quality use.
Motivation
- Makes diagrams easier to share and embed without leaving Markdown-Viewer.
- Saves time for frequent users and improves usability for documentation and sharing.
Implementation notes / suggestions
- Use the Mermaid renderer’s SVG output and convert to PNG via canvas for downloads.
- Provide a modal/lightbox for zooming with pan/zoom controls, or leverage native browser zoom.
- Prefer a non-blocking UI: small inline toolbar shown when hovering over the diagram.
- Consider accessibility/keyboard shortcuts for copying or exporting.
Acceptance criteria
- A toolbar appears for Mermaid diagrams with Download PNG and Zoom actions.
- Downloaded PNG matches the rendered diagram and respects themes (dark/light mode) if applicable.
- Copy-to-clipboard places an image into the clipboard that can be pasted into chats/emails/docs.
- Unit/integration tests where possible and a README note documenting the feature and usage.
Labels: enhancement, ux