# How to Export Share Cards and Route Cards in Archify: Complete Guide

> Easily export share cards and route cards from Archify. Follow our complete guide to get diagram snapshots and route paths for your projects. Learn how to export now.

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

---

**To export share cards and route cards in Archify, open the Export dropdown and click Share Card for a diagram snapshot (1200×630 PNG), or Route Share Card when a directed path is active.**

Archify includes built-in export functionality for creating high-resolution PNG share cards that capture your diagram's current state. When your diagram contains a **route** (a directed path between nodes), you can also export a specialized **Route Share Card** that highlights that specific path. This guide covers both UI-driven and programmatic export methods based on the `tt-a1i/archify` source code.

## Understanding Share Cards vs. Route Share Cards

Archify offers two distinct export formats:

| Export Type | Dimensions | When Available | Use Case |
|-------------|-----------|--------------|----------|
| **Share Card** | 1200×630 px | Always | General diagram sharing, documentation |
| **Route Share Card** | 1200×630 px | Only when a route exists | Highlighting specific paths, tutorials |

Both formats respect your current **theme** (dark/light mode), **diagram size**, and any active **filters**, ensuring the exported PNG matches exactly what you see on screen.

## Exporting via the Archify UI

The export workflow uses a dropdown menu with dedicated buttons. According to the source in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) at lines 4477-4479, the UI markup includes:

```html
<button data-format="share-card" type="button" role="menuitem">
  Share Card <span class="hint">1200×630 PNG</span>
</button>
<button data-action="route-share-card" type="button" role="menuitem"
        hidden disabled>
  Route Share Card <span class="hint">1200×630 PNG</span>
</button>

```

Follow these steps to export:

1. Open the **Export** dropdown menu (labeled "Export")
2. Click **Share Card** — Archify renders a 1200×630 px PNG and immediately starts the download
3. If your diagram contains an active route, the **Route Share Card** button becomes enabled; click it to export the route-highlighted version

Behind the scenes, Archify records an export receipt for analytics and triggers the download via the `download()` helper function located around line 6431 in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html).

## Programmatic Export Methods

For automation, custom toolbars, or headless scenarios, you can trigger exports by dispatching click events on the button elements:

```javascript
// Export a standard share card
document.querySelector('button[data-format="share-card"]').click();

// Export a route-specific share card (only works when a route is present)
document.querySelector('button[data-action="route-share-card"]').click();

```

Wrap these in reusable functions for cleaner integration:

```javascript
// Programmatic export helpers for custom implementations
function exportShareCard() {
  const btn = document.querySelector('button[data-format="share-card"]');
  btn && btn.click();
}

function exportRouteShareCard() {
  const btn = document.querySelector('button[data-action="route-share-card"]');
  if (btn && !btn.disabled) btn.click();
}

```

The route share card export logic resides around line 6481 in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html), with conditional enabling based on route state detection.

## Key Implementation Files

| File Path | Purpose | Location |
|-----------|---------|----------|
| [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) | UI markup and event handling for export buttons | Lines 4477-4479, 6431, 6481 |
| `archify/renderers/shared/utils.mjs` | Helper utilities: `download()`, `recordExportReceipt()` | Low-level PNG blob creation and download triggering |
| `archify/test/share-card-export.test.mjs` | Test suite validating PNG generation and download flow | Export functionality verification |
| `archify/test/route-share-card.test.mjs` | Test suite for route-specific export logic | Confirms route detection and conditional enabling |

The `download()` helper in `archify/renderers/shared/utils.mjs` handles browser-compatible file saving, while `recordExportReceipt()` captures usage analytics before the download begins.

## Customizing Export Behavior

The export functions automatically capture:

- **Current viewport** — what's visible on screen
- **Active theme** — dark or light mode settings
- **Applied filters** — any node or edge filtering in effect
- **Diagram dimensions** — canvas size at time of export

To modify output dimensions or add watermarks, you would need to extend the renderer pipeline in `archify/renderers/shared/utils.mjs` before the PNG blob creation step.

## Summary

- **Share cards** export via `button[data-format="share-card"]` as 1200×630 px PNGs
- **Route share cards** become available only when a directed path exists in the diagram
- Both exports record analytics receipts and trigger downloads through `download()` in `utils.mjs`
- Programmatic export uses standard DOM `click()` dispatch on data-attributed buttons
- Test suites in `share-card-export.test.mjs` and `route-share-card.test.mjs` validate core functionality

## Frequently Asked Questions

### How do I enable the Route Share Card button?

The Route Share Card button automatically enables when your diagram contains an active route (a directed path between nodes). According to the source code around line 6481 in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html), the button checks for route presence and removes the `disabled` and `hidden` attributes only when a valid route exists in the current diagram state.

### Can I export share cards from a headless script?

Yes. Since Archify's export triggers are standard DOM buttons with `data-format` and `data-action` attributes, you can automate exports in headless browsers using Puppeteer or Playwright by selecting these buttons and dispatching click events. The `download()` helper in `archify/renderers/shared/utils.mjs` handles the actual file generation.

### What image format do share cards use?

All share card exports generate **PNG files at 1200×630 pixels**. This dimensions ratio (approximately 1.91:1) optimizes for social media sharing and documentation embeds. The source code in [`examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) explicitly labels this as "1200×630 PNG" in the button hints.

### Where is the export analytics data stored?

Archify calls `recordExportReceipt()` before triggering downloads, as implemented in `archify/renderers/shared/utils.mjs`. This function captures export metadata for analytics purposes, though the specific storage destination depends on your Archify deployment configuration.