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

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

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

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