Archify Export Formats: Complete Guide to PNG, SVG, WebM, and More

Archify supports six export formats—PNG, JPEG, WebP, SVG, WebM, and clipboard PNG—each generated through distinct browser-native APIs including canvas rasterization, SVG serialization, and MediaRecorder streaming.

The open-source Archify diagramming tool provides a built-in export menu that lets users download rendered diagrams in multiple formats or copy them directly to the clipboard. This guide examines how each Archify export format is generated, referencing the actual implementation in the tt-a1i/archify repository.

Raster Formats: PNG, JPEG, and WebP

Archify generates all three raster formats through canvas-based rasterization of the visible SVG diagram.

PNG Export

The PNG export pipeline in examples/visual-evolution/prototype.html renders the diagram onto an off-screen <canvas> element, then calls toBlob('image/png') to create a downloadable blob:

// From prototype.html line 932
Archify.exportMenu.run('png')
  .then(() => console.log('PNG exported'))
  .catch(err => console.error('Export failed:', err));

The resulting file is downloaded with the suffix -share-card.png.

JPEG Export

JPEG generation follows an identical path, substituting the MIME type:

// MIME selection logic from prototype.html line 933
var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';

The canvas calls toBlob('image/jpeg') and delivers a -share-card.jpeg file.

WebP Export with Automatic Fallback

WebP uses canvas.toBlob('image/webp') with built-in fallback behavior. When data-format="webp" is selected (prototype.html line 934), the same MIME conditional applies. Browsers without WebP support automatically receive PNG instead.

Vector Format: SVG Export

Archify preserves the original diagram resolution through native SVG serialization rather than rasterization:

1. Clone the original <svg> element
2. Inject required namespace attributes
3. Serialize using new XMLSerializer().serializeToString(clone)
4. Create a Blob of type image/svg+xml
5. Trigger download as -share-card.svg

This logic spans lines 1295–1467 in prototype.html and maintains complete theme and styling information.

Motion Format: WebM Video Export

For animated diagrams, Archify implements the MediaRecorder API to capture canvas frames:

// Recording initialization from prototype.html lines 1502–1727
if (Archify.exportMenu.run('webm')) {
  console.log('Recording 6‑second WebM animation…');
}

The pipeline checks canRecordMotion() for API support, negotiates vp9 or vp8 codecs, and streams frames into a video/webm blob. The export button at line 937 exposes this via data-format="webm".

Clipboard Export: Copy PNG Without Downloading

Archify enables instant transfer to other applications through the Clipboard API:

// Clipboard handling from prototype.html lines 1749–1755
Archify.exportMenu.run('clip')
  .then(() => console.log('Diagram copied to clipboard'))
  .catch(err => console.error('Clipboard copy failed:', err));

After rasterizing to canvas, Archify creates a ClipboardItem with type image/png and calls navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).

Export Menu Architecture

All formats route through a unified dispatch system:

Component	Location	Purpose
Export menu button	prototype.html line 932+	UI trigger with data-format attributes
Archify.exportMenu.run(format)	prototype.html	Central dispatcher selecting generation pipeline
rasterize() helper	Embedded in export logic	Canvas preparation for raster formats
SVG serializer	prototype.html lines 1295–1467	XML serialization for vector output
Motion recorder	prototype.html lines 1502–1727	MediaRecorder wrapper for WebM

The #btn-export element opens a dropdown where each <button data-format="…"> maps directly to its generation pipeline.

Programmatic Export Examples

Download Native SVG

Archify.exportMenu.run('svg')
  .then(() => console.log('SVG downloaded'))
  .catch(err => console.error(err));

Conditional WebM Recording

if (Archify.exportMenu.canRecordMotion && Archify.exportMenu.run('webm')) {
  // Animation recording active
}

Export Verification and Testing

The archify/test/share-card-export.test.mjs test suite validates each format generation and verifies receipt metadata including file size, format string, and canonical flag. Runtime documentation in archify/references/viewer-runtime.md specifies the Archify.exportMenu API contract.

Summary

• PNG, JPEG, WebP: Canvas rasterization via toBlob() with MIME-type selection
• SVG: Native XML serialization preserving resolution and styling
• WebM: MediaRecorder API with codec negotiation and automatic fallback
• Clipboard PNG: ClipboardItem creation for immediate paste workflows
• All formats: Unified through Archify.exportMenu.run() dispatcher in prototype.html

Frequently Asked Questions

What image formats does Archify support for static exports?

Archify supports PNG, JPEG, WebP, and SVG for static diagram exports. PNG, JPEG, and WebP are generated through HTML5 canvas rasterization, while SVG uses native XML serialization to preserve vector quality. The WebP format automatically falls back to PNG on unsupported browsers.

How does Archify create animated exports?

Archify records canvas animations using the MediaRecorder API to produce WebM video files. The implementation at lines 1502–1727 of prototype.html collects canvas frames into a video/webm stream with VP9 or VP8 codec selection. The recording starts when users select the WebM option from the export dropdown.

Can Archify copy diagrams directly to the clipboard?

Yes. Archify supports copying a PNG to the system clipboard without creating a download file. The clipboard export at lines 1749–1755 creates a ClipboardItem with type image/png and writes it via navigator.clipboard.write(), enabling immediate paste into document editors, messaging apps, or design tools.

Where is the export functionality implemented in the Archify codebase?

The core export system resides in examples/visual-evolution/prototype.html, specifically lines 932–937 for the UI buttons, lines 1295–1467 for SVG serialization, and lines 1502–1727 for WebM recording. The Archify.exportMenu.run() method serves as the central dispatcher called by all format buttons.

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