Mermaid export SVG #3877

Closed
opened 2025-11-11 15:41:40 -06:00 by GiteaMirror · 1 comment
Owner

Originally created by @gawxyz on GitHub (Feb 16, 2025).

Feature Request Rationale
The current preview of Mermaid diagrams within chat logs lacks native SVG export functionality. Users must manually take screenshots or rely on third-party conversion tools, which degrades technical documentation collaboration efficiency and hinders diagram reuse, editing, and high-quality presentations.

Proposed Solution
Integrate an "Export SVG" button into the existing Mermaid preview interface. Upon activation, the system should:

  1. Automatically convert rendered Mermaid diagrams into standardized SVG files for direct download.
  2. Preserve original style configurations (e.g., theme colors, font sizes, layout parameters).
  3. Embed necessary metadata (e.g., source code references, version compatibility tags) to ensure seamless integration with mainstream vector graphic editing tools (e.g., Adobe Illustrator, Inkscape).

Evaluated Alternatives

  1. Manual SVG generation via Mermaid Live Editor
    • Workflow-disruptive, requiring code copying and external platform dependency.
  2. SVG extraction via browser DevTools
    • Technically demanding for non-developers, with potential styling inconsistencies.
Originally created by @gawxyz on GitHub (Feb 16, 2025). **Feature Request Rationale** The current preview of Mermaid diagrams within chat logs lacks native SVG export functionality. Users must manually take screenshots or rely on third-party conversion tools, which degrades technical documentation collaboration efficiency and hinders diagram reuse, editing, and high-quality presentations. **Proposed Solution** Integrate an "Export SVG" button into the existing Mermaid preview interface. Upon activation, the system should: 1. Automatically convert rendered Mermaid diagrams into standardized SVG files for direct download. 2. Preserve original style configurations (e.g., theme colors, font sizes, layout parameters). 3. Embed necessary metadata (e.g., source code references, version compatibility tags) to ensure seamless integration with mainstream vector graphic editing tools (e.g., Adobe Illustrator, Inkscape). **Evaluated Alternatives** 1. **Manual SVG generation via Mermaid Live Editor** - Workflow-disruptive, requiring code copying and external platform dependency. 2. **SVG extraction via browser DevTools** - Technically demanding for non-developers, with potential styling inconsistencies.
Author
Owner

@tjbck commented on GitHub (Feb 18, 2025):

Addressed with 0c461023fe in dev!

@tjbck commented on GitHub (Feb 18, 2025): Addressed with 0c461023fe5d7217cf40e4cb06576a00be48002b in dev!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#3877