Archify Export Formats: A Complete Guide to PNG, JPEG, WEBP, SVG, WEBM, and Clipboard Output

Archify supports six export formats: PNG, JPEG, WEBP, SVG, WEBM video, and direct PNG clipboard copying, all accessible through a unified export menu API.

Archify is an open-source diagramming tool built by tt-a1i that lets users export rendered visuals in multiple raster, vector, and media formats. Whether you need a high-resolution image for presentation slides, a scalable vector for print, or an animated video for documentation, Archify's export system handles each format through dedicated generation pipelines in the core codebase.

Complete List of Archify Supported Export Formats

Archify exposes every export option through a dropdown menu tied to #btn-export in examples/visual-evolution/prototype.html. Each format button carries a data-format attribute that determines which pipeline executes when clicked.

PNG Export

Archify generates PNG files by rasterizing the visible SVG diagram onto an off-screen <canvas> element. The canvas then calls toBlob('image/png') (or toDataURL) to produce a PNG blob, which is downloaded as *-share-card.png.

The rasterization logic lives in the export routine that invokes rasterize('png') followed by download(blob, base + '-share-card.png') at line 932 of prototype.html.

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

JPEG Export

JPEG generation follows the same canvas rasterization path as PNG, but uses canvas.toBlob('image/jpeg'). The MIME type is selected via a conditional check:

var mime = format === 'jpeg' ? 'image/jpeg' : 'image/webp';

The resulting blob downloads as *-share-card.jpeg. This logic appears at line 933 of prototype.html.

WEBP Export

For WEBP output, Archify calls canvas.toBlob('image/webp') after rasterization. The format button declares data-format="webp" in the UI markup at line 934. On browsers without native WEBP support, Archify automatically falls back to PNG.

SVG Export

SVG export preserves the diagram's original resolution and theme information by cloning the native <svg> element rather than rasterizing. The process in prototype.html (lines 1295–1467) performs these steps:

1. Clones the original SVG element
2. Injects required namespace attributes
3. Serializes with new XMLSerializer().serializeToString(clone)
4. Creates a Blob of type image/svg+xml
5. Triggers download as *-share-card.svg

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

WEBM Video Export

For animated diagrams, Archify records canvas frames using the MediaRecorder API. The pipeline (lines 1502–1727 in prototype.html) captures a video/webm stream with VP9 or VP8 codecs, assembles frames into a Blob, and downloads the result as *-share-card.webm.

Before recording, Archify verifies support via canRecordMotion(). The format button at line 937 declares data-format="webm".

// Record 6-second WebM animation (if supported)
if (Archify.exportMenu.run('webm')) {
  console.log('Recording WebM animation…');
}

Clipboard PNG Copy

Instead of file download, Archify can place a rasterized PNG directly onto the system clipboard. After canvas rasterization, it constructs a ClipboardItem and writes via navigator.clipboard.write():

// Copy diagram PNG to clipboard
Archify.exportMenu.run('clip')
  .then(() => console.log('Diagram copied to clipboard'))
  .catch(err => console.error('Clipboard copy failed:', err));

This implementation appears at lines 1749–1755 of prototype.html.

How Archify's Export Architecture Works

The export system centers on Archify.exportMenu.run(format), a dispatcher that routes format strings to appropriate generators. The architecture follows three layers:

• UI Layer: <button data-format="..."> elements in prototype.html (lines 932–937) expose user-facing options
• Dispatch Layer: runExport selects rasterizer, serializer, or media recorder based on format
• Generation Layer: Canvas APIs for raster formats, XMLSerializer for SVG, MediaRecorder for WEBM

Key files implementing this system include:

• examples/visual-evolution/prototype.html — export menu UI and core runExport implementation
• archify/references/viewer-runtime.md — API documentation for Archify.exportMenu
• archify/test/share-card-export.test.mjs — test coverage verifying format generation and receipt metadata
• archify/assets/template.html — base template injecting export menu scripts

Summary

• Six export formats: PNG, JPEG, WEBP raster images; SVG vector; WEBM video; and direct PNG clipboard copy
• Unified API: Call Archify.exportMenu.run(format) where format is 'png', 'jpeg', 'webp', 'svg', 'webm', or 'clip'
• Automatic fallbacks: WEBP degrades to PNG on unsupported browsers; canRecordMotion() guards WEBM recording
• Source location: All export logic resides in examples/visual-evolution/prototype.html with tests in archify/test/share-card-export.test.mjs

Frequently Asked Questions

What is the highest quality export format in Archify?

SVG provides the highest quality because it preserves the original vector data without rasterization. Unlike PNG, JPEG, or WEBP, SVG files maintain infinite scalability and retain all theme information from the source diagram. The trade-off is that SVG cannot capture animated content—for motion, WEBM is required.

Can Archify export without downloading a file?

Yes, use the clipboard export. Calling Archify.exportMenu.run('clip') places a PNG directly on the system clipboard using the Clipboard API. This enables instant paste into applications like Slack, Figma, or Google Docs without creating temporary files on disk.

Does Archify support GIF or MP4 animation export?

No, Archify only supports WEBM for video export. The MediaRecorder implementation in prototype.html (lines 1502–1727) specifically targets video/webm with VP9/VP8 codecs. To obtain GIF or MP4, export WEBM and convert using external tools like FFmpeg.

Why does my WEBP export sometimes save as PNG instead?

Archify automatically falls back to PNG when WEBP is unsupported. The browser's canvas implementation determines WEBP availability; if canvas.toBlob('image/webp') fails or the browser lacks support, the export pipeline switches to PNG as a safe default. This behavior is controlled by the MIME type conditional at line 933 of prototype.html.

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