Skip to content

feat(er-diagram): export as SVG, PDF, Mermaid and Graphviz DOT - #3738

Merged
datlechin merged 5 commits into
mainfrom
feat/2519-er-diagram-export-formats
Oct 21, 2026
Merged

datlechin merged 5 commits into
mainfrom
feat/2519-er-diagram-export-formats

Conversation

@datlechin

Copy link
Copy Markdown
Member

Summary

  • ER diagram toolbar's export button is a menu: PNG, SVG, PDF, Mermaid, Graphviz DOT, and Copy as Mermaid.
  • Node and edge renderers draw through ERDiagramCanvas: a CGContext canvas for the screen, PNG and PDF, ERDiagramSVGCanvas for SVG. Every export comes from the same drawing calls.
  • PDF: one page sized like the PNG, text stays searchable text.
  • SVG: shapes and <text>, truncated like the canvas. SF Symbols have no public vector outline, so each one is a PNG in <defs>, placed with <use>.
  • Mermaid (.mmd): quoted table names, types and columns fitted to the Mermaid 11.6+ lexer (character varying(255) reads character_varying(255), pk reads _pk), PK and FK keys, the canvas's marker at each end. Copy as Mermaid wraps it in a mermaid fence.
  • Graphviz DOT (.gv, since .dot resolves to Word's template type): HTML-like label per table, a full-width port row per column with generated port ids, crow, tee and odot arrowheads.
  • Compact mode and junction collapse carry into every format. Text formats sort tables by name and edges by table and column.
  • DiagramImageExporter is now DiagramExporter, with one save for every format.
  • Fixed: key, link and junction icons drew upside down on the canvas and in the PNG. NSImage.draw(in:from:operation:fraction:) ignores the flipped context; the draw now passes respectFlipped: true.
  • Fixed: the graph builder read foreign keys in dictionary order, so edge order, and port order on ties, changed per launch.

Test plan

  • New: ERDiagramMermaidWriterTests, ERDiagramDOTWriterTests, ERDiagramVectorExportTests.
  • Fail on main: ERDiagramGraphBuilderTests/edgesFollowTableOrder(), ERDiagramVectorExportTests/symbolsDrawUpright().
  • Existing ER and query plan suites pass on the canvas refactor, including the PNG pixel tests in ERDiagramThemeTests.
  • A 31-table schema exported collapsed, expanded and compact, light and dark: Mermaid parses with the 11.10 and develop grammars, DOT renders with Graphviz 12.1.2 with every port resolved, SVG passes xmllint and renders in WebKit and rsvg with the PNG's geometry, PDF renders as one page.

SVG export, light
SVG export, dark
DOT export rendered by Graphviz

Fixes #2519

@datlechin
datlechin merged commit cb90601 into main Oct 21, 2026
8 checks passed
@datlechin
datlechin deleted the feat/2519-er-diagram-export-formats branch October 21, 2026 11:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Export the ER diagram as SVG, PDF, Mermaid and Graphviz DOT

1 participant