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

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 at lines 4477-4479, the UI markup includes:

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

Programmatic Export Methods

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

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

// 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, with conditional enabling based on route state detection.

Key Implementation Files

File Path	Purpose	Location
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, 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 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.

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