# What Kind of Output Does Archify Generate? A Complete Guide to Export Formats

> Explore Archify export formats: interactive HTML viewers, static PNG SVG WebM assets, and shareable cards. Generate your technical map today.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-08-11

---

**Archify generates a self-contained, interactive technical map with multiple export formats including single-file HTML viewers, static PNG/SVG/WebM assets, and share-optimized cards.**

Archify transforms codebase or system descriptions into portable, version-controlled artifacts that can be shared directly in chat, embedded in documentation, or checked into repositories. This article breaks down every output format the tool produces, based on the `tt-a1i/archify` source code.

---

## Core Output: The Typed JSON IR

At the heart of every Archify artifact sits a **deterministic, schema-validated JSON representation** of the diagram.

- The schema is formally defined in [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md), which acts as the contract between the generator and renderer.
- This intermediate representation (IR) ensures consistency across all downstream formats.
- Because the JSON is typed and validated, outputs remain reproducible across different runs and environments.

The JSON IR feeds directly into the rendering pipeline that produces all other artifacts.

---

## Interactive HTML Viewer

Archify's flagship output is a **single-file HTML viewer** that bundles layout engines, interaction logic, and optional motion presets into one portable document.

### Key Features of the Viewer

- **Zero dependencies** — open locally in any modern browser or host on static file services.
- **Theme support** — toggle between dark and light modes.
- **Visual presets** — switch between Signal-Flow, Blueprint, Classic, and other rendering styles.
- **Finite animation** — play preset motion sequences directly in the browser.

The viewer is generated via the CLI entry point in `archify/bin/archify.mjs`:

```bash

# Generate an architecture diagram as an interactive HTML file

node archify/bin/archify.mjs generate \
  --type architecture \
  --source https://github.com/example/project \
  --output ./project-arch.html

```

Result: [`project-arch.html`](https://github.com/tt-a1i/archify/blob/main/project-arch.html) is fully self-contained and ready to distribute.

---

## Static Export Formats

From the HTML viewer (or CLI), Archify exports three primary static formats:

| Format | Use Case | CLI Flag |
|--------|----------|----------|
| **PNG** | Documentation, presentations, issue attachments | `--format png` |
| **SVG** | Scalable diagrams for web or print | `--format svg` |
| **WebM** | Finite-motion video clips for demos or social | `--format webm` |

### Export from the Viewer Interface

Press **E** to open the Export menu, then select your preferred format. All rendering happens client-side using the bundled canvas/WebGL engines.

### Export via CLI

```bash

# PNG export of full diagram

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format png

# SVG for vector editing

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format svg

```

---

## Share Cards: Optimized Social Images

Archify produces **1200 × 630 PNG images** designed for READMEs, release notes, and social platforms. These canonical "share cards" follow Open Graph standards for optimal link previews.

### Canonical Share Card

```bash

# Generate the standard share-optimized PNG

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format png \
  --share-card

```

### Route-Share Cards: Highlight Specific Paths

Route-share cards capture a specific authored path through the diagram while preserving full context underneath.

```bash

# Highlight the Web → API route in a shareable PNG

node archify/bin/archify.mjs export \
  --input ./project-arch.html \
  --format png \
  --route web~api \
  --share-card

```

The `--route` parameter accepts Archify's internal path notation (defined in [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md)), letting you emphasize critical data flows without cropping the surrounding architecture.

### Reach-Share Cards: Show Upstream/Downstream Impact

A third variant highlights **reach** — upstream dependencies or downstream consumers — without implying runtime behavior. This distinction matters for architectural reviews where you want to show "what touches this" versus "what runs when this runs."

---

## Version-Controlled Workflow

All Archify outputs are designed for **git-based collaboration**:

1. Generate [`project-arch.html`](https://github.com/tt-a1i/archify/blob/main/project-arch.html) once.
2. Commit it alongside your code.
3. Reference it from READMEs with stable relative paths.
4. Regenerate when significant architectural changes occur.

The single-file constraint means no broken asset links or missing dependencies — what you commit renders identically six months later.

---

## Summary

- **JSON IR** — schema-validated, deterministic foundation for all outputs.
- **Single-file HTML viewer** — interactive, themeable, zero-dependency browser experience.
- **Static exports** — PNG, SVG, and WebM for documentation, editing, and video.
- **Share cards** — 1200 × 630 PNGs optimized for social and README embedding.
- **Route-share and reach-share cards** — contextual highlights for specific paths or dependency analysis.
- **Portable by design** — every artifact can be version-controlled and shared via stable URLs.

These capabilities are implemented across `archify/bin/archify.mjs` (CLI generation and export), [`archify/SKILL.md`](https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md) (schema contracts), and the example outputs in [`archify/examples/web-app.html`](https://github.com/tt-a1i/archify/blob/main/archify/examples/web-app.html) and [`archify/examples/archify-repo.html`](https://github.com/tt-a1i/archify/blob/main/archify/examples/archify-repo.html).

---

## Frequently Asked Questions

### Can I open Archify's HTML output without a server?

**Yes.** The generated HTML files contain all JavaScript, styles, and layout engines inline. Double-click to open in any modern browser, or host on static file services like GitHub Pages, Netlify, or S3.

### What's the difference between a route-share card and a regular share card?

A **regular share card** shows the full diagram scaled to 1200 × 630. A **route-share card** overlays emphasis on a specific path (e.g., `web~api`) while keeping the complete diagram visible as background context. Use route-share cards when you want to direct attention without cropping information.

### Does Archify require internet access to render diagrams?

**No.** Once generated, all assets are self-contained. The HTML viewer runs entirely client-side with no external CDN calls, making it suitable for air-gapped environments or long-term archival.

### Which export format should I use for print documentation?

**SVG** for vector quality that scales to any resolution, or **PNG** at high DPI for raster-based publishing workflows. The SVG export preserves all visual styling from your selected preset (Signal-Flow, Blueprint, etc.) as editable vector paths.