# Archify Export Formats and Share Card Generation: Complete Guide

> Explore Archify export formats like PNG, JPEG, SVG, and more. Learn to generate Route and Reach Share Cards easily with this complete guide.

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

---

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

   ```javascript
   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`](https://github.com/tt-a1i/archify/blob/main/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:

   ```javascript
   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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/scripts/visual-evolution/prototype.html) with workflow examples in [`scripts/mco-runtime.html`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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.