How to Export Share Cards and Route Cards (1200×630) from Archify

Archify generates 1200×630 PNG share cards through its export menu, with route cards available when a route overlay is active, using the recordExportReceipt() helper in examples/web-app.html to handle PNG generation and browser downloads.

The Archify diagramming library provides built-in export functionality for creating social-media-ready images. These share cards capture your diagram at a fixed 1200×630 pixel resolution, while route share cards include the active route overlay. Both are implemented in the example web application shipped with the repository.

Using the Export Menu in the UI

The simplest way to export cards is through the built-in toolbar. The export menu is defined in the main example file at examples/web-app.html.

Standard Share Card

Click the Export button (☰) in the top-right toolbar of any rendered diagram. Select "Share Card" — this option is always available and produces a clean PNG of the current view.

The button definition appears at line 4477:

<button data-format="share-card" type="button">
  Share Card <span class="hint">1200×630 PNG</span>
</button>

Source: examples/web-app.html line 4477

Route Share Card

The "Route Share Card" option appears only when a route is active. It renders the same 1200×630 PNG with the route overlay included.

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

Source: examples/web-app.html line 4478

The hidden and disabled attributes are removed by JavaScript when activeRoute is populated.

The Export Implementation

When a user selects an export option, Archify calls recordExportReceipt() followed by download(). These functions are implemented around line 6520 of examples/web-app.html.

Standard Share Card Flow

recordExportReceipt(
  'share-card',                // format identifier
  blob,                        // PNG data as Blob
  true,                        // canonical (full diagram capture)
  { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT } // 1200×630
);
download(blob, base + '-share-card.png');

Source: examples/web-app.html lines 6520–6527

Route Share Card Flow

When a route is active, the same helper receives additional parameters:

recordExportReceipt(
  'share-card',
  blob,
  false,                       // not canonical (has overlay)
  { width: SHARE_CARD_WIDTH, height: SHARE_CARD_HEIGHT },
  'route',                     // variant
  true                         // routeStateClean — render overlay
);
download(blob, diagramFilename() + '-route-share-card.png');

Source: examples/web-app.html lines 6481–6482

The variant parameter ('route') and routeStateClean flag instruct the renderer to include the route overlay before PNG generation.

Programmatic Export Examples

You can trigger share card exports directly from JavaScript using the Archify renderer's exportAsPng() method.

Export a Standard Share Card

function exportShareCard(diagram) {
  const pngBlob = diagram.exportAsPng({ width: 1200, height: 630 });
  
  recordExportReceipt(
    'share-card',
    pngBlob,
    true,
    { width: 1200, height: 630 }
  );
  
  download(pngBlob, 'my-diagram-share-card.png');
}

Export a Route Share Card

function exportRouteShareCard(diagram) {
  const pngBlob = diagram.exportAsPng({ 
    width: 1200, 
    height: 630, 
    includeRoute: true 
  });
  
  recordExportReceipt(
    'share-card',
    pngBlob,
    false,
    { width: 1200, height: 630 },
    'route',
    true
  );
  
  download(pngBlob, 'my-diagram-route-share-card.png');
}

The includeRoute: true option ensures the route overlay is rendered into the PNG before export.

Key Source Files

File	Purpose
examples/web-app.html	Primary implementation with export menu UI, button definitions (data-format="share-card", data-action="route-share-card"), and recordExportReceipt() helper
examples/*-rendered.html	Live examples demonstrating the export functionality in rendered diagrams
archify/renderers/*	Core rendering engines; PNG generation uses browser canvas API after SVG/HTML rendering
scripts/build-gallery.mjs	Gallery generator referencing share card export actions

Summary

• Share cards are 1200×630 PNG exports available via the Export menu or recordExportReceipt('share-card', ...)
• Route share cards add the active route overlay using the 'route' variant parameter
• Both use fixed dimensions (SHARE_CARD_WIDTH / SHARE_CARD_HEIGHT) optimized for social sharing
• The implementation lives primarily in examples/web-app.html with helper functions at lines 6481–6527
• Programmatic exports use diagram.exportAsPng() with dimension and overlay options

Frequently Asked Questions

What are the exact dimensions of Archify share cards?

Archify share cards are fixed at 1200×630 pixels, defined by the SHARE_CARD_WIDTH and SHARE_CARD_HEIGHT constants in examples/web-app.html. This 1.91:1 aspect ratio matches Open Graph standards for social media previews.

Why is the Route Share Card option disabled?

The Route Share Card button remains hidden and disabled until a route is active in the diagram. The UI checks for activeRoute state and enables the button via JavaScript when a valid route exists. Without an active route, the export would produce identical output to the standard share card.

Can I customize the share card dimensions?

The built-in export menu enforces 1200×630 pixels. For custom dimensions, use diagram.exportAsPng() directly with your preferred width and height values, then call download() manually. Note that recordExportReceipt() expects dimension metadata matching your actual blob size.

Where is the PNG generation handled?

Archify renders diagrams to SVG/HTML internally, then uses the browser canvas API to rasterize at the target resolution. The actual pixel data creation happens within the renderer's exportAsPng() method, not in recordExportReceipt(), which only handles receipt logging and download triggering.

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