Skip to content

Add SVG and PNG export for database diagrams#1253

Draft
Copilot wants to merge 4 commits intomasterfrom
copilot/add-export-as-svg
Draft

Add SVG and PNG export for database diagrams#1253
Copilot wants to merge 4 commits intomasterfrom
copilot/add-export-as-svg

Conversation

Copy link
Copy Markdown

Copilot AI commented Nov 11, 2025 •
edited
Loading

Diagrams could only be exported as HTML. Added SVG and PNG export options.

Implementation

Backend

  • getDiagramSvgExport.js - Wraps diagram HTML in SVG foreignObject with embedded styles
  • exportDiagramSvg / exportDiagramPng endpoints in files controller

Frontend

  • Added html-to-image library for DOM-to-PNG conversion
  • exportDiagramSvg() - Extracts diagram content, calls SVG export endpoint
  • exportDiagramPng() - Converts canvas to PNG via toPng(), sends base64 to backend
  • Registered diagram.exportSvg and diagram.exportPng commands
  • Added toolbar buttons and menu items in DiagramTab

Usage

// SVG export maintains vector format and theme styles
await exportDiagramSvg();  // Saves as .svg with embedded HTML tables

// PNG export captures current rendered state
await exportDiagramPng();  // Converts DOM to raster image

All three formats (HTML/SVG/PNG) now accessible via toolbar and context menu.

Original prompt

This section details on the original issue you should resolve

<issue_title>FEAT: Export as svg</issue_title>
<issue_description>The diagram can be exported as an html file, but a pure svg file is a better option for saving the diagram in dbgate. </issue_description>

Comments on the Issue (you are @copilot in this section)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 3 commits November 11, 2025 12:26
@janproch
Update plan to include PNG export requirement
627a581 
Co-authored-by: janproch <2543891+janproch@users.noreply.github.com>
@janproch
Add SVG and PNG export functionality for diagrams
f5bd935 
Co-authored-by: janproch <2543891+janproch@users.noreply.github.com>
@janproch
Format code with prettier
a4fb628 
Co-authored-by: janproch <2543891+janproch@users.noreply.github.com>
Copilot AI changed the title [WIP] Add feature to export diagram as SVG file Add SVG and PNG export for database diagrams Nov 11, 2025
Copilot AI requested a review from janproch November 11, 2025 12:39
@janproch janproch requested a review from Stelinkaa November 11, 2025 12:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@janproch janproch Awaiting requested review from janproch

@Stelinkaa Stelinkaa Awaiting requested review from Stelinkaa

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

Assignees

@janproch janproch

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

FEAT: Export as svg

2 participants

@janproch