Archify Export Formats and Share Card Generation: Complete Guide

Archify supports seven export formats including PNG, JPEG, WebP, SVG, WebM, Route Share Card, and Reach Share Card, all accessible through the Archify.exportMenu API or the E key shortcut.

The open-source diagramming tool Archify provides a built-in export pipeline for converting diagrams into shareable images, videos, and interactive cards. This guide covers every available format and walks through the exact steps to generate Route and Reach Share Cards from your diagrams.

---

Available Export Formats in Archify

Archify's export system supports both static raster/vector outputs and dynamic video or card formats. Each format is invoked through Archify.exportMenu.runExport() with a specific identifier.

Raster Image Formats

Format	Description	API Call
PNG	Lossless raster at 4× source resolution for crisp screenshots	Archify.exportMenu.runExport('png')
JPEG	Compressed raster at 4× source resolution, smaller file sizes	Archify.exportMenu.runExport('jpeg')
WebP	Modern format with both lossless and lossy compression options	Archify.exportMenu.runExport('webp')

Vector and Video Formats

• SVG — Archify.exportMenu.runExport('svg')
  Preserves full diagram structure as scalable vector graphics, ideal for further editing or infinite zoom.

• WebM — Archify.exportMenu.runExport('webm')
  Generates an animated video of traced motion. Requires an active trace animation and browser MediaRecorder support.

---

What Are Share Cards in Archify?

Share Cards are self-contained export packages that capture authored diagram states with embedded metadata. Archify provides two specialized types:

Card Type	Captures	Use Case
Route Share Card	A traced navigation route through the diagram	Sharing specific traversal paths
Reach Share Card	A set of highlighted nodes (an authored "reach")	Sharing analytical selections or findings

Both formats package the visual snapshot as an SVG/PNG with embedded structural metadata.

---

How to Generate a Route Share Card

The Route Share Card captures a traced navigation path through your diagram.

Follow these steps:

1. Trace a route using Archify's navigation UI to define the path you want to capture.

2. Open the Export Menu by pressing E or calling Archify.exportMenu.open().

3. Select "Route Share Card" from the menu options, or programmatically trigger:

   Archify.exportMenu.runExport('share-card', {type: 'route'})

4. Export executes — Archify internally calls Archify.routeProbe.exportSnapshot() to capture the route state, then assembles the card with embedded metadata.

The source implementation in scripts/visual-evolution/prototype.html handles this entire workflow, including the UI presentation and runExport dispatcher.

---

How to Generate a Reach Share Card

The Reach Share Card captures a curated selection of diagram nodes.

Follow these steps:

1. Author a reach by selecting the nodes you want to highlight (Archify's "reach" authoring interface).

2. Open the Export Menu with E or Archify.exportMenu.open().

3. Select "Reach Share Card" from the menu, or trigger programmatically:

   Archify.exportMenu.runExport('share-card', {type: 'reach'})

4. Export executes — Archify calls Archify.reachProbe.exportSnapshot() to capture the reach state and packages it into the final card.

Design specifications in docs/research-reach-share-card-2026-07-23.md document the share-card concept, supported formats, and export-snapshot mechanics.

---

Error Handling for Exports

When exports fail, Archify surfaces errors through DOM attributes for UI feedback:

• data-last-export-error-format — identifies which format failed
• data-last-export-error — contains the error details

These attributes are set on the document element, enabling your interface to display contextual error messages. The scripts/mco-runtime.html file demonstrates this error handling pattern in a complete export workflow.

---

Summary

• Archify provides seven export formats: PNG, JPEG, WebP, SVG, WebM, Route Share Card, and Reach Share Card
• Access all exports through the E key or Archify.exportMenu.runExport() with format-specific identifiers
• Route Share Cards require a traced route and call Archify.routeProbe.exportSnapshot()
• Reach Share Cards require authored node selections and call Archify.reachProbe.exportSnapshot()
• Failed exports record diagnostic data to data-last-export-error-* attributes on the document element
• Core implementation lives in scripts/visual-evolution/prototype.html with workflow examples in scripts/mco-runtime.html

---

Frequently Asked Questions

Can I export Archify diagrams programmatically without using the UI?

Yes. Every export format is available through the Archify.exportMenu API. Call Archify.exportMenu.runExport('png'), Archify.exportMenu.runExport('share-card', {type: 'route'}), or any other format identifier directly from your code. The menu does not need to be open for programmatic exports to execute.

What resolution are raster exports in Archify?

PNG and JPEG exports render at 4× source resolution according to the implementation in scripts/visual-evolution/prototype.html. This ensures crisp output even for high-DPI displays or print applications.

Why does WebM export fail in some browsers?

WebM export depends on browser MediaRecorder support and requires an active trace animation in your diagram. If either condition is not met, the export will fail and Archify will record the error to data-last-export-error for diagnosis.

What's the difference between a Route and Reach Share Card?

A Route Share Card captures a time-ordered traversal path through the diagram (how you moved through it), while a Reach Share Card captures a static selection of nodes (what you identified as significant). Route cards use Archify.routeProbe.exportSnapshot(); reach cards use Archify.reachProbe.exportSnapshot() before final packaging.

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