Archify Diagram Export Formats: Complete Guide to 6 Supported Formats

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. 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)

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

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

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	Toolbar UI, raster scaling (4×), WebM recorder setup, format validation
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 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 with runtime parity in 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.

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