How to Export Archify Diagrams in High Resolution (PNG, JPEG, WebP, SVG)

Archify automatically renders raster exports at 4× the native diagram size, producing crisp, high-resolution images up to 16 megapixels without upscaling artifacts.

The tt-a1i/archify repository generates interactive architecture diagrams as standalone HTML pages. Every diagram includes a built-in export toolbar capable of producing publication-quality outputs, supporting both high-resolution bitmap formats and scalable vector graphics.

Understanding the 4× Resolution Export

Archify achieves high-resolution exports by serializing the SVG at a multiple of its original viewBox dimensions before rasterization, rather than scaling up a low-resolution image.

The RASTER_SCALE Implementation

In archify/assets/template.html (lines 1191-1195), the export script defines a constant that controls output quality:

// Constant controlling the export resolution multiplier
RASTER_SCALE = 4

This setting instructs the browser to render the SVG at four times the viewBox width and height. Because the rasterization happens at the target resolution natively, the resulting PNG, JPEG, or WebP files contain no interpolation artifacts and remain sharp even when zoomed.

Safe Scaling for Large Diagrams

To prevent memory errors on massive diagrams, Archify implemented a safety mechanism at lines 10000-10008 in archify/assets/template.html. The pickSafeScale function calculates a safe multiplier that never exceeds the MAX_CANVAS_PIXELS limit of 16 megapixels. If a 4× export would exceed this threshold, the system gracefully falls back to 3×, 2×, or 1× automatically.

Theme Handling in Raster vs Vector Exports

For raster formats (PNG, JPEG, WebP), the export process bakes the current theme colors into the SVG before rasterization (lines 10815-10845). This guarantees the exported image matches the on-screen appearance exactly. In contrast, SVG exports retain both dark and light theme variables via autoTheme: true, allowing the vector file to adapt automatically to the viewer’s system preferences.

How to Access the Export Menu

You can trigger the export functionality in three ways:

1. Keyboard Shortcut Press E when no input element is focused to open the Export menu instantly.

2. Toolbar Button Click the Export button located in the top-right toolbar of every diagram. The toolbar markup is defined at lines 495-511 in archify/assets/template.html:

<div class="toolbar" role="toolbar" aria-label="Diagram actions">
  <button id="btn-export" type="button" title="Export diagram (E)">
    Export ▼
  </button>
  <div class="export-menu" id="export-menu" role="menu">
    <button data-action="copy">Copy to clipboard PNG</button>
    <hr>
    <button data-format="png">Download PNG</button>
    <button data-format="jpeg">Download JPEG</button>
    <button data-format="webp">Download WebP</button>
    <hr>
    <button data-format="svg">Download SVG</button>
  </div>
</div>

3. URL Parameters Append query parameters to automatically configure the export state on page load (lines 11223-11238):

• ?openExport=1 — Opens the Export menu immediately (useful for automated screenshot pipelines)
• ?theme=light or ?theme=dark — Forces a specific theme before export, determining the color scheme of raster outputs

Export Formats and Resolution Details

Archify supports four primary export formats with distinct resolution characteristics:

Format	Type	Resolution	Best Use Case
PNG	Raster	4× (up to 16 MP limit)	Documentation, presentations, clipboard sharing
JPEG	Raster	4× (up to 16 MP limit)	Email attachments, web publishing
WebP	Raster	4× (up to 16 MP limit)	Modern web delivery, smaller file sizes
SVG	Vector	Infinite scalability	Technical documentation, version control

Programmatic Export with JavaScript

For automation or custom integrations, Archify exposes a public API at line 11221 of archify/assets/template.html. You can trigger exports programmatically via the Archify.exportMenu.run() method:

Export a 4× PNG and start download:

Archify.exportMenu.run('png');

Export an auto-themed SVG (retains both dark and light variables):

Archify.exportMenu.run('svg');

Custom button implementation:

const btn = document.createElement('button');
btn.textContent = 'Export PNG (4×)';
btn.onclick = () => Archify.exportMenu.run('png');
document.body.appendChild(btn);

The export flow (lines 11210-11250) executes the following steps: serializes the SVG at the calculated scale, creates an Image from the SVG Blob, draws it onto a <canvas> element sized to the scaled dimensions, calls canvas.toBlob() to obtain the raster data, and triggers the download via a temporary anchor element.

Summary

• Archify exports diagrams at 4× resolution by default using the RASTER_SCALE constant defined in archify/assets/template.html.
• A safety limit of 16 megapixels prevents browser crashes on large diagrams via the pickSafeScale function.
• Raster formats (PNG, JPEG, WebP) bake in the current theme colors, while SVG exports retain dual-theme capability.
• Access exports via the E key, the toolbar button, or the Archify.exportMenu.run() JavaScript API.
• Use URL parameters ?openExport=1 and ?theme=dark to automate export workflows.

Frequently Asked Questions

What is the maximum resolution for Archify exports?

Archify targets 4× the native diagram size for all raster exports (PNG, JPEG, WebP). However, the pickSafeScale function in archify/assets/template.html enforces a hard limit of 16 megapixels to prevent canvas memory errors. If your diagram is large enough that 4× exceeds this limit, Archify automatically reduces the scale to 3×, 2×, or 1× as needed.

Can I export Archify diagrams without the toolbar button?

Yes. You can trigger exports programmatically using the JavaScript API. Call Archify.exportMenu.run('png') or Archify.exportMenu.run('svg') from the browser console or a custom script. Alternatively, append ?openExport=1 to the diagram URL to open the export menu automatically on page load.

How do I preserve both dark and light themes in my export?

Download the diagram as an SVG using the Export menu or Archify.exportMenu.run('svg'). Unlike raster formats that bake in the current theme, SVG exports contain both theme definitions with autoTheme: true, allowing the file to automatically adapt to the viewer's system color scheme when embedded in documentation or viewed in a browser.

Why does my exported JPEG have a background color while PNG has transparency?

The export script at lines 10815-10845 of archify/assets/template.html fills the canvas background to match the current theme before rasterizing JPEG images, because JPEG format does not support transparency. PNG exports preserve transparency (alpha channel) by default, while WebP supports both transparent and opaque modes depending on the diagram content.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}