# How to Export Share Cards in Archify: Generating 1200×630 PNG Diagrams

> Export stunning 1200x630 PNG share cards from Archify. Learn how to generate high-resolution diagrams for generic, route-specific, and reachability analysis variants with this guide.

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

---

**Archify's share-card export functionality generates high-resolution 1200×630 PNG images of architecture diagrams through a specialized rendering pipeline in [`viewer/export.js`](https://github.com/tt-a1i/archify/blob/main/viewer/export.js) that supports generic, route-specific, and reachability analysis variants.**

The open-source visualization tool Archify (tt-a1i/archify) includes a robust export system designed for creating social-media-ready diagram snapshots. Understanding the Archify export share cards implementation reveals a tightly-coupled architecture that balances visual fidelity with memory safety constraints across the viewer module.

## Understanding the Share Card Export Architecture

The implementation spans multiple coordination layers between HTML templates and JavaScript rendering logic, ensuring theme consistency and valid state management before rasterization occurs.

### UI and Menu Definition

The export menu interface is defined in [`viewer/template.source.html`](https://github.com/tt-a1i/archify/blob/main/viewer/template.source.html) at approximately lines 5055–5057, where three distinct buttons are injected under the **Export** menu: the generic share-card option, the route-share-card variant, and the reach-share-card variant. These HTML elements provide the entry points for users to trigger different export modes based on available diagram data.

### Menu State Synchronization

Before the menu appears, the system verifies which export options are valid for the current diagram state. The functions `syncRouteShareItem` and `syncReachShareItem` (lines 996–1012 in [`viewer/export.js`](https://github.com/tt-a1i/archify/blob/main/viewer/export.js)) check for the existence of route snapshots via `Archify.routeProbe.exportSnapshot()` or reachability snapshots via `Archify.focus.reachabilitySnapshot()`. If no snapshot exists for a specific variant, the corresponding menu item is hidden or disabled to prevent invalid exports.

## The Export Execution Pipeline

When a user selects the share-card option, the system executes a deterministic rasterization pipeline that converts the current SVG diagram into a bitmap image while preserving theme variables and annotations.

### Entry Point and Format Dispatching

The primary entry point is `runExport(format)` located at lines 3130–3150 in [`viewer/export.js`](https://github.com/tt-a1i/archify/blob/main/viewer/export.js). When called with the format string `'share-card'`, this function dispatches to `rasterizeShareCard()` and handles post-export actions including receipt recording, toast notifications, and triggering the browser download mechanism.

### Rendering the Canvas Composition

The core rendering logic resides in `renderShareCard(options)` (lines 909–999), which constructs a canvas of fixed dimensions defined by the constants `SHARE_CARD_WIDTH` and `SHARE_CARD_HEIGHT` (1200×630 pixels, defined at lines 17–20). This function executes a deterministic composition sequence: it fills the background with theme colors, draws a colored accent bar, renders fitted title and subtitle text using `fitCanvasText`, draws badge labels, and composites the diagram SVG centered within the card boundaries. The raster scale is calculated as `sourceScale = Math.min(2, pickSafeScale(...))` at lines 998–1002 to balance quality against memory constraints.

### SVG Serialization and Memory Safety

Before rasterization, `serializeSvg(scale, opts)` (lines 226–289) processes the diagram SVG by cloning the node, stripping animation attributes, injecting current theme variables, and optionally adding route or reachability markers. To prevent memory exhaustion on low-end devices, the `pickSafeScale` function (lines 410–414) caps the rasterization scale to ensure total canvas pixels remain below 16 megapixels (16 × 1024²), automatically reducing resolution if the diagram dimensions exceed safe thresholds.

## Export Variants: Route and Reachability Snapshots

Beyond the default diagram capture, Archify supports contextual exports that overlay analytical data onto the share card for targeted communication.

### Route Share Cards

When `rasterizeShareCard()` receives `options.variant === 'route'` (lines 611–626), it obtains a path-specific snapshot from `Archify.routeProbe` and passes this data to `renderShareCard()`. The resulting PNG highlights the specific route through the architecture diagram, making it suitable for sharing path analysis results with stakeholders.

### Reachability Share Cards

For dependency impact analysis, setting `options.variant === 'reach'` triggers a snapshot fetch from `Archify.focus.reachabilitySnapshot()`. This variant renders the diagram with reachability overlays visible at lines 560–590, allowing teams to share network dependency coverage as static images suitable for documentation or presentations.

## Programmatic Share Card Export API

Developers can trigger exports programmatically without user interaction through the global `Archify.export` interface, enabling automated documentation workflows or custom upload pipelines.

```javascript
// Trigger a standard share-card export
Archify.export && Archify.export.runExport('share-card');

// Export a route-specific share-card (requires active route snapshot)
Archify.export && Archify.export.rasterizeShareCard({ variant: 'route' })
  .then(blob => {
    const url = URL.createObjectURL(blob);
    console.log('Route share-card URL:', url);
  })
  .catch(err => console.error(err));

// Export reachability analysis as share-card
Archify.export && Archify.export.rasterizeShareCard({ variant: 'reach' })
  .then(blob => { /* handle PNG blob */ });

```

These methods return Promises that resolve to PNG blobs, enabling custom workflows beyond the default `canvas.toBlob()` → `download()` sequence (lines 931–997).

## Summary

- Archify generates **1200×630 PNG share cards** through [`viewer/export.js`](https://github.com/tt-a1i/archify/blob/main/viewer/export.js) using a fixed-dimension canvas pipeline that composites SVG diagrams with titles and accent bars.
- The system supports **three export variants**: generic diagram cards, route-specific snapshots via `Archify.routeProbe`, and reachability analysis cards via `Archify.focus`.
- **Menu state synchronization** in `syncRouteShareItem` and `syncReachShareItem` prevents invalid exports by checking snapshot availability before enabling UI buttons.
- **Memory safety** is enforced via `pickSafeScale`, which caps rasterization at 16 megapixels to prevent crashes on resource-constrained devices.
- **SVG serialization** removes animation artifacts and injects theme variables at lines 226–289 to ensure deterministic, theme-consistent visual output.
- **Programmatic access** is available through `Archify.export.runExport()` and `Archify.export.rasterizeShareCard()` for integration with automated documentation systems.

## Frequently Asked Questions

### What file contains the main share-card export logic in Archify?

The core implementation resides in [`viewer/export.js`](https://github.com/tt-a1i/archify/blob/main/viewer/export.js), which handles menu synchronization at lines 996–1012, SVG serialization at lines 226–289, canvas rasterization via `renderShareCard()`, and the download workflow at lines 931–997.

### What are the exact dimensions of Archify share-card exports?

All share-card exports render at **1200×630 pixels**, defined by the `SHARE_CARD_WIDTH` and `SHARE_CARD_HEIGHT` constants at lines 17–20 of [`viewer/export.js`](https://github.com/tt-a1i/archify/blob/main/viewer/export.js), optimized for social media card displays.

### How does Archify prevent memory crashes when exporting large diagrams?

The `pickSafeScale` function at lines 410–414 automatically calculates a safe rasterization scale that keeps total canvas pixels below 16 megapixels, falling back to lower resolutions for oversized diagrams while maintaining the fixed 1200×630 output dimensions.

### Can I export a share-card showing a specific route through my architecture?

Yes. Call `Archify.export.rasterizeShareCard({ variant: 'route' })` after creating a route snapshot via the route probe interface; this renders the diagram with the specific path highlighted on the 1200×630 canvas via the `renderShareCard()` pipeline at lines 909–999.