How Archify's Export Options Generate PNG, SVG, WebP, and Share Card Formats

Archify generates all export formats client-side by rendering SVG diagrams to an off-screen HTML5 canvas, then converting the canvas to PNG, WebP, or serialized SVG blobs for immediate download or clipboard copying.

The tt-a1i/archify repository implements a lightweight, browser-based export system that requires no server-side processing. Every diagram exists as an SVG element in the DOM, and four distinct JavaScript functions—rasterize(), rasterizeShareCard(), rasterizeRouteShareCard(), and rasterizeReachShareCard()—handle the transformation into downloadable files. This article breaks down the exact implementation in [archify/assets/template.html](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html).

The Core Export Pipeline

All Archify export options follow the same three-stage pipeline: select format, rasterize or serialize, then deliver. The entry point is a UI dropdown that invokes rasterize(format) with one of three string arguments: "svg", "png", or "webp".

Step 1: Format Selection and Method Routing

When a user clicks the Export menu, the toolbar triggers rasterize(format) at approximately line 1457 in template.html. The function branches based on the requested output type:

• "svg" → Direct XML serialization
• "png" or "webp" → Canvas rasterization with MIME-specific encoding

This routing happens entirely in the browser. No network request leaves the client.

Step 2: SVG to Raster Conversion (PNG and WebP)

For PNG and WebP exports, Archify creates a temporary <canvas> element, injects the SVG into an Image object, and draws it to the canvas context:

// Simplified excerpt from template.html lines ~1470-1485
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = () => {
  ctx.drawImage(img, 0, 0);
  
  // PNG: lossless, no quality parameter
  // WebP: lossy, default quality 0.95
  const mime = format === 'webp' ? 'image/webp' : 'image/png';
  const quality = format === 'webp' ? 0.95 : undefined;
  
  canvas.toBlob((blob) => {
    download(blob, `my-diagram.${format}`);
  }, mime, quality);
};

img.src = 'data:image/svg+xml;base64,' + btoa(svgString);

The canvas.toBlob() API handles the binary encoding. PNG output omits the quality parameter for lossless compression. WebP sets quality to 0.95 for near-lossless visual fidelity at smaller file sizes.

Step 3: SVG to SVG Serialization

When rasterize('svg') is called, the pipeline skips canvas creation entirely. The function uses XMLSerializer to extract the raw SVG markup:

// From template.html lines ~1457-1465
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgElement);
const blob = new Blob([svgString], { type: 'image/svg+xml' });
download(blob, 'my-diagram.svg');

This preserves the full vector fidelity, including any CSS styles and metadata embedded in the DOM element.

Step 4: Triggering File Downloads

All export paths converge on the download(blob, filename) helper (lines ~1470-1488). This function creates a temporary object URL, attaches it to a dynamically created <a> element, sets the HTML5 download attribute, and programmatically clicks the link:

function download(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);  // Prevent memory leak
}

The filename combines the diagram's display name with the appropriate extension: architecture-diagram.png, network-topology.svg, etc.

Share Card Export Variants

Archify share card formats extend the rasterization pipeline to generate composite images that combine diagram thumbnails with contextual metadata. Three specialized functions handle different sharing scenarios, all located around lines 6020-6070 in template.html.

General Share Card

The rasterizeShareCard(options) function creates a hidden DOM container, clones the diagram SVG into it, overlays title and status badges, then rasterizes the composite:

// Example: Export a default share card
rasterizeShareCard({
  filename: 'my-diagram-share-card.png'
});

Route Share Card

rasterizeRouteShareCard() generates cards highlighting the shortest authored path between two nodes. This variant injects additional UI elements showing the start node, end node, and hop count before rasterization.

Reach Share Card

rasterizeReachShareCard() produces cards visualizing reachability from a designated start node. The function adds a reachability summary badge and color-codes the diagram to show accessible versus inaccessible nodes.

All share card variants use the same canvas-based rasterization as standard PNG exports, outputting files named <base>-share-card.png.

Clipboard Integration

Beyond file downloads, Archify's export options support direct clipboard copying. After blob generation, the code uses the Clipboard API to write the image data:

// From template.html lines ~1190-1210 (PNG example)
navigator.clipboard.write([
  new ClipboardItem({
    'image/png': blob  // or 'image/svg+xml' for SVG exports
  })
]);

This enables immediate pasting into documentation tools, chat applications, or presentation software without intermediate file management.

Complete Export Examples

// Standard raster exports
rasterize('png');   // → my-diagram.png (lossless)
rasterize('webp');  // → my-diagram.webp (quality 0.95)
rasterize('svg');   // → my-diagram.svg (vector)

// Share card variants
rasterizeShareCard({ variant: 'route', filename: 'route-card.png' });
rasterizeShareCard({ variant: 'reach', filename: 'reach-card.png' });

// Clipboard copy (alternative to download)
// Automatically invoked when user selects "Copy" instead of "Download"

Key Implementation Files

File	Purpose
[archify/assets/template.html](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html)	Core rasterize(), share card functions, and download helpers
archify/test/share-card-export.test.mjs	Unit tests validating blob generation and filename formatting
[examples/web-app.html](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html)	Live demonstration of export UI and share card rendering

Summary

• Archify export options are implemented entirely client-side in archify/assets/template.html
• PNG and WebP use HTML5 canvas rasterization via ctx.drawImage() and canvas.toBlob()
• SVG exports bypass rasterization through XMLSerializer for lossless vector output
• Share cards composite diagrams with metadata overlays before rasterization, with three variants: general, route, and reach
• Clipboard copying uses the modern navigator.clipboard.write() API for immediate cross-application pasting
• All exports are self-contained, requiring no server infrastructure

Frequently Asked Questions

What image formats does Archify support for export?

Archify supports PNG, WebP, and SVG for standard exports, plus share card PNGs with embedded metadata. PNG provides lossless raster output. WebP offers smaller file sizes at quality 0.95. SVG preserves full vector editability.

How does Archify generate share cards without server-side rendering?

Share cards use a hidden DOM container that clones the diagram SVG and overlays UI elements (titles, route paths, reachability badges). The composite element is drawn to a canvas and converted to PNG using the same canvas.toBlob() pipeline as standard raster exports.

Can I copy exported images directly to the clipboard?

Yes. Archify's export system supports clipboard copying via the Clipboard API. After blob generation, the code calls navigator.clipboard.write() with a ClipboardItem containing the image data, enabling paste into Slack, Notion, PowerPoint, and other applications.

What is the difference between route and reach share cards?

Route share cards (rasterizeRouteShareCard) display the shortest authored path between two specific nodes with hop count metadata. Reach share cards (rasterizeReachShareCard) visualize all nodes accessible from a starting point, with color-coding indicating reachability status. Both extend the base rasterizeShareCard() implementation.

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