# How to Export Archify Diagrams in High Resolution (PNG, JPEG, WebP, SVG)
> Easily export crisp, high resolution Archify diagrams in PNG JPEG WebP or SVG formats. Learn how to get amazing graphical output without upscaling artifacts.
- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-07-15
---
**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`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) (lines 1191-1195), the export script defines a constant that controls output quality:
```javascript
// 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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html):
```html
```
**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`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html). You can trigger exports programmatically via the `Archify.exportMenu.run()` method:
**Export a 4× PNG and start download:**
```javascript
Archify.exportMenu.run('png');
```
**Export an auto-themed SVG (retains both dark and light variables):**
```javascript
Archify.exportMenu.run('svg');
```
**Custom button implementation:**
```javascript
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 `