# Archify Diagram Export Formats: Complete Guide to 6 Supported Formats

> Explore Archify's diagram export options. Learn about SVG, PNG, JPEG, WebP, PDF, and animated WebM formats to best share your architectural diagrams.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: api-reference
- Published: 2026-08-07

---

**Archify supports six export formats for diagrams: SVG, PNG, JPEG, WebP, PDF, and animated WebM.**

The tt-a1i/archify repository provides a browser-based diagramming tool built on the D2 renderer. Its export pipeline handles both static and animated diagram outputs, with options ranging from lossless vector formats to compressed raster images and video recordings.

---

## Core Export Formats in Archify

Archify's export capabilities are implemented in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html). The system distinguishes between **vector formats** (native resolution), **raster formats** (4× supersampled), and **video formats** (animation capture).

### Vector Formats

**SVG** — The canonical, lossless representation. Archify exports the raw SVG generated by D2 without transformation. This format preserves full editability and scales infinitely.

The export menu registers SVG as the default vector option ("exported directly from the canonical SVG generated by D2").

**PDF** — A printable vector format leveraging D2's composition export. Suitable for documentation and print workflows.

### Raster Formats

All raster exports apply **4× source resolution scaling** for high-quality output:

| Format | Compression | Best For |
|--------|-------------|----------|
| **PNG** | Lossless | Screenshots with transparency |
| **JPEG** | Lossy | Photo-realistic compression |
| **WebP** | Lossy + Lossless | Modern web optimization |

The source code explicitly notes: "Raster exports are always rendered at 4× source resolution" and uses a "sandboxed image-rendering context" for PNG/JPEG/WebP generation.

### Animated Video Format

**WebM** — Motion export capturing a traced animation sequence. Requires:

- An active trace animation in the diagram
- Browser `MediaRecorder` API support

If either condition fails, the export returns a rejected promise with a diagnostic message.

---

## Export API and Code Examples

Archify exposes export functionality through a global `archify.exportMenu` API. Below are verified patterns from the source.

### Export as PNG (Client-Side Download)

```javascript
archify.exportMenu.run('png')
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'diagram.png';
    a.click();
  })
  .catch(err => console.error('Export failed:', err));

```

The `run('png')` method triggers the 4× scaled rasterization pipeline and returns a `Blob` containing the encoded image data.

### Export as SVG

```javascript
archify.exportMenu.run('svg')
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'diagram.svg';
    a.click();
  });

```

SVG exports bypass rasterization and stream the native D2-generated markup directly.

### Export Animated Diagram as WebM

```javascript
archify.exportMenu.run('webm')
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const video = document.createElement('video');
    video.src = url;
    video.controls = true;
    document.body.appendChild(video);
  })
  .catch(err => console.warn('WebM export unavailable:', err));

```

This path validates trace animation state before invoking `MediaRecorder`. Without trace data, the promise rejects immediately.

---

## Key Implementation Files

| File | Export Responsibility |
|------|----------------------|
| [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html) | Toolbar UI, raster scaling (4×), WebM recorder setup, format validation |
| [`experiments/mco-showcase/mco-runtime.html`](https://github.com/tt-a1i/archify/blob/main/experiments/mco-showcase/mco-runtime.html) | Runtime export menu mirroring, live demonstration of all formats |

Both files maintain parity in supported formats. The [`prototype.html`](https://github.com/tt-a1i/archify/blob/main/prototype.html) implementation at line 1246 establishes the raster scaling policy, while line 1362 handles the image context for PNG/JPEG/WebP, and line 1527 guards WebM export behind animation and `MediaRecorder` capability checks.

---

## Format Selection Guidelines

- **Web deployment** — Use **SVG** for crisp scaling or **WebP** for compressed raster fallback
- **Print documentation** — Use **PDF** for vector fidelity or **PNG** at 4× for embedded images
- **Slide decks** — **PNG** or **JPEG** depending on transparency needs
- **Social sharing** — **WebM** animated exports for demonstration videos

---

## Summary

- Archify diagram export formats include **SVG, PNG, JPEG, WebP, PDF, and animated WebM**
- Raster formats (PNG/JPEG/WebP) render at **4× source resolution** for quality
- **WebM export** requires trace animation data and browser `MediaRecorder` support
- Core logic lives in [`experiments/visual-evolution/prototype.html`](https://github.com/tt-a1i/archify/blob/main/experiments/visual-evolution/prototype.html) with runtime parity in [`mco-runtime.html`](https://github.com/tt-a1i/archify/blob/main/mco-runtime.html)
- The `archify.exportMenu.run(format)` API returns native `Blob` objects for all formats

---

## Frequently Asked Questions

### Does Archify support PDF export for diagrams?

Yes. PDF export leverages D2's composition engine and produces a printable vector document. Trigger it via `archify.exportMenu.run('pdf')`.

### Why are my PNG exports larger than expected?

Archify rasterizes PNG, JPEG, and WebP at 4× the source resolution to ensure high-quality output. This intentional upsampling increases file size but eliminates aliasing artifacts.

### Can I export an Archify diagram as a video?

Yes, via **WebM export**. The diagram must contain a trace animation, and your browser must support the `MediaRecorder` API. Without animation data, the export will fail with a warning.

### Is SVG the default export format?

SVG is the primary vector option and generally recommended for maximum fidelity. However, Archify does not enforce a default — you must explicitly specify your desired format in the `exportMenu.run()` call.