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

> Easily export architecture diagrams from Archify as PNG, SVG, or share cards. Download your diagrams in various formats directly from your browser with this intuitive tool.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-08-08

---

**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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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:

```bash

# 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:

```javascript
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.