How to Export Architecture Diagrams as PNG, SVG, and Share Cards in Archify

Archify's viewer provides a unified Export menu that lets you download diagrams as PNG, JPEG, WebP, or SVG, and generate 1200×630px Share Cards entirely client-side without contacting external services.

The open-source Archify project (tt-a1i/archify) provides a browser-based architecture diagram viewer with powerful export capabilities. Whether you need high-resolution raster images for documentation, scalable vector graphics for further editing, or formatted Share Cards for social distribution, all export workflows execute locally without transmitting data to external services.

Opening the Export Menu

According to README.md lines 79-81, you can access export functionality by pressing E or clicking the Export button in the toolbar. The menu organizes actions into three distinct sections:

• Copy to clipboard → Copy Share Card (PNG)
• Download raster → Download PNG / JPEG / WebP with selectable scale (1×, 2×, or 4×)
• Download vector → Download SVG with CSS-only stylesheet

All exports respect the current visual preset and theme, ensuring the output matches exactly what appears in the viewer.

Exporting Raster Images (PNG, JPEG, WebP)

When selecting raster formats, the viewer rasterizes the diagram at your chosen scale and writes the blob to a file. As implemented in archify/test/share-card-export.test.mjs (lines 99-103), the export routine stores dimensions in data-last-export-width and data-last-export-height attributes, allowing subsequent actions to reuse the same raster without re-rendering.

Exporting SVG Vector Graphics

Selecting Download SVG generates a clean vector file by stripping all toolbar-related CSS (approximately 9KB). According to CHANGELOG.md lines 218-220, the exported SVG contains only the diagram geometry and static labels, with no transient UI state such as toolbars, cursors, or animation overlays.

Generating Share Cards

Share Cards are canonical 1200×630px PNGs designed for social sharing.

Copy Share Card to Clipboard

The Copy Share Card action copies a pre-rasterized PNG directly to your clipboard. As tested in archify/test/share-card-export.test.mjs (lines 75-83), this reuses the same rasterization promise used for regular PNG exports, guaranteeing identical pixel data while avoiding duplicate rendering operations.

Download Share Card

Download Share Card creates a separate file named <basename>-share-card.png. The receipt records exact dimensions using the constants SHARE_CARD_WIDTH = 1200 and SHARE_CARD_HEIGHT = 630, as validated in archify/test/share-card-export.test.mjs (lines 65-71). The card embeds the full diagram as a dimmed background while exporting only the selected share-card region.

Exporting Route and Reach Analysis

After running a Route Probe or Authored Reach query, the Export menu exposes two additional options:

• Route Share Card: Downloads the shortest authored path as a 1200×630px PNG while preserving the full diagram as context (source: README.md lines 85-86).
• Reach Share Card: Captures the upstream or downstream authored reach (node/edge sets) in the same 1200×630px format without claiming runtime impact (source: README.md lines 89-90).

Programmatic Export for CI Pipelines

For automated workflows, invoke the CLI via archify/bin/archify.mjs to render HTML, then extract assets using the recordExportReceipt helper:

# Install Archify globally

npx skills add tt-a1i/archify -g

# Render diagram to HTML

node archify/bin/archify.mjs render architecture examples/web-app.json out.html

The generated HTML contains a recordExportReceipt(format, blob, canonical, meta) function. You can evaluate this in a headless browser (e.g., Puppeteer) to request the "share-card" format programmatically:

import { execFileSync } from 'node:child_process';
import path from 'path';

// Render to HTML
execFileSync(process.execPath, [
  path.join('archify', 'bin', 'archify.mjs'),
  'render', 'architecture',
  'examples/web-app.json',
  'tmp.html'
]);

// Evaluate recordExportReceipt in headless browser to extract PNG blob

Summary

• Archify supports PNG, JPEG, WebP, and SVG exports through a client-side viewer interface.
• Press E to open the Export menu, which offers clipboard copying, raster downloads at multiple scales, and vector output.
• Share Cards are standardized 1200×630px PNGs available for general diagrams, routes, or reach analysis.
• The recordExportReceipt function enables programmatic export automation in CI pipelines.
• All exports occur locally in archify/renderers/*/render-*.mjs without external service dependencies.

Frequently Asked Questions

What image formats does Archify support for export?

Archify exports diagrams as PNG, JPEG, WebP, and SVG. The raster formats support 1×, 2×, and 4× scaling, while SVG output strips UI chrome to produce clean vector geometry suitable for further editing in design tools.

Can I automate diagram exports in a CI pipeline?

Yes. Use archify/bin/archify.mjs to render your JSON architecture definitions to HTML, then invoke the recordExportReceipt function in a headless browser environment. This programmatic approach allows you to extract PNG blobs or Share Cards during automated builds without manual interaction.

What are the dimensions of Archify Share Cards?

Share Cards are fixed at 1200×630 pixels, defined by the SHARE_CARD_WIDTH and SHARE_CARD_HEIGHT constants in the viewer source. This aspect ratio optimizes display on social media platforms while maintaining diagram readability.

Does Archify support WebM video export?

Based on the current source analysis of tt-a1i/archify, WebM video export is not documented in the export menu or renderer implementations. The viewer currently supports static image formats (PNG, JPEG, WebP, SVG) and Share Cards only.

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