Blog

Export your diagrams to SVG (and much lighter PDFs)

DiagramaHub v0.5.8 lets you download diagrams as SVG. Just before, v0.5.7 cut PDF exports from 150–200 MB to ~1–5 MB and improved PNG and Markdown.

A diagram that stays inside the tool doesn't do much. You want it in the README, in your team wiki, or in a PDF for someone who doesn't have an account. Over the last few weeks we focused on making exports fast, light and clean, and today, with version 0.5.8, a new format is here: SVG, vector and scalable.

SVG: clean vectors for your docs

Starting with 0.5.8 you can download your Mermaid, PlantUML, D2 and DBML diagrams as SVG. Because it's a vector format, it stays sharp at any size, it's small, and it fits right into:

  • Documentation and READMEs, where a PNG gets blurry as soon as someone zooms in.
  • Vector tools, if you want to keep polishing the diagram by hand for a talk or a poster.

Along with SVG we redesigned the export modal. Formats now show up as a 2×2 grid of cards (PNG, SVG, PDF and Markdown), content options live in a compact secondary section, and the source-code download moved to a subtle button in the footer. Less clutter, same power.

PDFs: from 150–200 MB to ~1–5 MB

Two days earlier, in version 0.5.7, we tackled something you probably noticed if you ever exported a large diagram to PDF: the file weighed 150 to 200 MB. We were capturing an uncompressed bitmap. We switched to high-quality 2x PNG rasterization, and that same PDF now lands around ~1–5 MB.

That release also brought:

  • Header and footer on PDF and PNG: the diagram title is always there; project, folder and author are added when you select them. The footer shows the export date.
  • Formatted descriptions in PDFs: the description's Markdown is rendered as HTML with headings, bold text, lists and tables instead of raw syntax.
  • Richer Markdown exports: the Markdown export includes the diagram description and project metadata when you pick those options.
  • Per-format loading state: each button shows its own spinner instead of every button switching to "Exporting" at once.
  • Lazy-loaded jsPDF: the PDF library is only downloaded when you need it, so the editor loads faster.

Under the hood, we pulled the export logic out of the editor page into dedicated modules (PDF generator, Markdown exporter, description renderer and metadata header). That cleanup is what let us add SVG without making the code any messier.

How the flow looks

flowchart LR
    A[Your diagram] --> B[Export modal]
    B --> C[PNG]
    B --> D[SVG]
    B --> E[PDF]
    B --> F[Markdown]
    D --> G[README or wiki]
    D --> H[Vector editor]
    E --> I[Share with people outside DiagramaHub]

Security fixes along the way

Between 0.5.5 and 0.5.8 we also shipped security work worth calling out:

  • Password changes (0.5.6, critical): when you changed or reset your password, a bug saved the old hash back, so in practice the password didn't actually change. It's fixed. If you changed or reset your password before that release, we recommend doing it again.
  • DOM-based XSS (0.5.8): rendered SVG is now sanitized with DOMPurify before it's shown in the preview, the editor and shared diagram views, and Markdown descriptions rendered for PDF/PNG exports are sanitized too.
  • Hardened images: the backend moved to an Alpine base image with fewer packages and a smaller CVE surface (0.5.6), and the frontend image now picks up the latest OpenSSL patches (0.5.8). Diagram descriptions are also capped at 50,000 characters (0.5.5).

Try it

Open any diagram in DiagramaHub Cloud, click export and pick SVG. If you self-host, upgrade to 0.5.8. The full technical details are in the changelog.